DAY46-前端入门-组合选择器、标签a_img_list、盒模型、伪类、盒模型布局

时间 2019-11-14

标签 day46 day 前端入门组合选择器标签 img list 模型布局栏目 HTML 繁體版

原文原文链接

1、组合选择器

群组选择器

能够将任意多个选择器分组到一块儿，并用逗号分隔。html

div,.s,section{
            color:red;
        }

子代选择器

若是只但愿影响到某个标签下的第一级标签，能够用子代选择器。布局

x > y。只会影响到x标签下的y标签，不会影响到x标签下的z标签里的y标签。spa

div>strong{
    color:red;
}

后代选择器

又称包含选择器。只要是在这个标签里的某种标签都会被影响code

x 空格 y。x标签下全部的y标签htm

div a {
    text-decoration: none;
}

相邻选择器

若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器。索引

x + y。x标签左右的y标签图片

span+section{
            background-color:pink;
        }

兄弟选择器

x ~ y。x标签附近的全部的y标签。兄弟选择器包括相邻选择器。文档

span~section{
            background-color:brown;
        }

交集选择器

相交的部分就是要设置属性值的标签get

xy。即有x又有y

i.s{
    color: yellow;
}
<i class='s'>iiii</i>

组合选择器的优先级

同目录结构下

子代与后代优先级相投。相邻与兄弟优先级相同。

最终的样式采用逻辑后的样式根据选择器权值进行比较

不一样目录结构下

根据选择器权值进行比较

权值为标签权重之和

权重： *:1
div:10
class:100
id:1000
!important:10000

权值比较时，关心的是值的大小，不关心位置和具体选择器名

权值相同时，靠位置决定

id永远比class大，class永远比标签大

控制的是同一目标才具备可比性

2、属性选择器

属性选择器权重与class选择器同样

有属性class的全部标签

[class]{
            color: orange;
        }

有属性class且值为d2的全部标签

[class='d2']{
            color: pink;
        }

div且class='d2',权重增长

div[class='d2']{
            color: blue;
        }

属性以什么开头：^=

[class^='he']{
            color: yellow;
        }

属性以什么结尾：$=

[class^='rd']{
            color: tan;
        }

属性模糊匹配：*=

[class^='llo']{
            color: cyan;
        }

3、盒模型

盒模型概念

广义盒模型：文档中全部功能性及内容性标签，及文档中全部显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最经常使用）
盒模型组成：margin + border + padding + content

盒模型成员介绍

content

经过设置width与height来规定content
块级标签能够设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度能够由内容决定
内联标签不能够设置自身宽高，默认宽高均为0，宽高必定由内容决定

border

border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
border成员：border-left、border-right、border-top、border-bottom
border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

padding

padding成员：padding-left、padding-right、padding-top、padding-bottom
padding总体设置

值得个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

margin

margin成员：margin-left、margin-right、margin-top、margin-bottom
margin总体设置

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

4、边界圆角

单角设置

border-top-left-radius

一个固定值:表示横纵
border-top-left-radius: 100px;
两个固定值:表示横与纵
border-top-left-radius: 100px,50px;
百分比赋值
border-top-left-radius: 100%;

总体赋值

border-radius

不分方位
左上为第一个角,顺时针,不足找对角
border-radius: 30px;

区分横纵
1.控制横向/控制纵向
2.横向又能够分为1,2,3,4个值;纵向亦然
border-radius: 10px 100px 50px /50px;
左上横10 右上横100 右下横50 左下横100/纵向全为50

5、经常使用标签

超链接标签a

语法

<a href="连接地址"  title='鼠标悬浮的文本提示' target='目标位置'></a>

target:_self 当前页面打开 | _blank 新开空白标签为来打开目标网页

基本使用

<a href="https://www.baidu.com">百度</a>

注：若是是在本地的连接。当前目录./ 上一级目录..

其余应用场景

mailto：邮件给...
tel：电话给...
sms：信息给...

a标签默认属性的清除

a {
    color: #333;
    text-decoration: none;
    outline: 0
}

锚点

经过锚点名与#锚点名建起关联

name='tag'|href='#tag'

前往底部

<a href="#tag">前往底部</a>

设置一个锚点

<div class="bottom">
        <a name="tag">底部</a>
</div>

图片标签img

语法

<img src="图片地址" alt="加载错误提示文字" title="鼠标悬浮的文本提示">

列表标签list

reset操做

<style>
        ol,ul{
            margin: 0;
            padding:0;
            list-style: none;
        }
    </style>

有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

6、伪类选择器

a标签的四大伪类

:link 初始状态
:hover 鼠标悬停
:active 活动状态
:visited 访问事后的状态

注:鼠标样式

{
    cursor: pointer | wait | move;
}

内容伪类

:before：内容以前
:after：内容以后

.txt:before{
    content: '我是前缀```'
}
.txt:after{
    content: '```我是后缀'
}

索引伪类

:nth-child(n)：位置优先，再匹配类型。找到全部结构下的第N个标签,若是恰好是所选类型,那么匹配成功。
:nth-of-type(n)：类型优先，再匹配位置。先将页面中的全部的所选类型找出,在匹配那些在本身结构层次下的第N个。

注：位置从1开始

取反伪类

:not(selector)：对selector进行取反

7、盒模型布局

作页面必备reset操做

*{
    margin: 0
}

盒模型布局基本介绍

布局方位：margin-left、margin-right、margin-top、margin-bottom
影响自身布局：margin-left、margin-top
影响兄弟布局：margin-right、margin-bottom

margin-bottom影响上下兄弟,尽可能别对margin-right进行设置

margin-right影响上下兄弟,尽可能别对margin-bottom进行设置

display:显示方式

块:block
内联:inline
内联块:inline-block

兄弟坑

<!-- 坑1 -->
    <section class="s1"></section>
    <section class="s2"></section>

盒模型布局的坑只出如今和margin-top相关的地方

.s1,.s2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

和左右不同,上下top会重叠取大值

.s1{
            margin-bottom: 20px;
        }
        .s2{
            margin-top: 20px;
        }

父子坑

<!-- 坑2 -->
    <div class="sup">
        <div class="sub"></div>
    </div>

.sup{
            width: 200px;
            height: 200px;
            background-color:cyan;
        }
        .sub{
            width: 100px;
            height: 100px;
            background-color:orange;
        }

父子top重叠,取大值

.sup{
        margin-top: 50px;
    }
    .sub{
        margin-left: 50px;
        /*margin-top:100px;*/
    }

解决方案

1.将父级固定

.sup{
    /border-top: 1px solid black;/
    /border-top: 1px solid transparent;/
    /保证显示区域不变200200/
    /height: 199px/
}

2.经过padding

.sup{
    padding-top:50px; 
    height: 150px;
}