复合选择器

语法：border-width

复合写法一：

border-width:10px 四个边都是10像素边框

border-width:10px 20px 上下边框10 左右边框20

border-width:10px 20px 30px 上边框10 左右边框20 下边框30

border-width:10px 20px 30px 40px 上边框10 右边框20 下边框30 左边框40

单独设置边框的宽度：

border-top-width：上边框

border-bottom-width：下边框

border-left-width：左边框

border-right-width：右边框

边框的样式

语法：border-style

取值：solid实线

dashed虚线

dotted点状线

double双实线

none无边框

border-color边框颜色

颜色单词：red yellow blue

十六进制（ps复制获取）：#008100 #fff #000

rgb方式：rgb(0,129,0)

复合写法二：

border:宽度 样式 颜色;

例：border:10px solid red;

注意：边框会影响盒子实际大小

边框宽度、样式、颜色没有顺序要求

如果没有宽度，默认是3px

如果没有颜色，默认是黑色

如果没有样式，没有边框---必须属性

三角形：1、宽高为0

设置边框，并且边框颜色为透明色

确定三角形的方向，要去改变该边框的颜色

取消掉该边框的对立边，设为none

盒模型问题

盒模型：width+height padding margin border

盒子实际宽度：width+border-left+border-right+padding-left+padding-right

盒子实际高度：height+border-top+border-bottom+padding-top+padding-bottom

怪异盒模型

标准盒模型box-sizing：content-box

怪异盒模型：直接进行内减（border padding）

盒子的实际宽=width

盒子的实际高=height

图片下间隙产生的原因：

父元素没有设置宽高，由图片撑开，就会存在间隙

方法：

给img的父元素设置高度，高度和图片的高度一致

给img的父元素设置font-size：0；或line-height：0；

给img标签转换为行级元素，display：block；

给img标签设置垂直对齐方式：vertical-align:middle/top/bottom;

vertical-align属性：

vertical-align:top顶线对齐

vertical-align:middle中线对齐

vertical-align:bottom底线对齐

vertical-align:baseline基线对齐

复合选择器：

有两个或多个基本选择器通过不同的方式组合而成的选择器：

后代元素选择器

语法：E F{

样式声明；

}

注：用空格进行连接

作用：选择E元素内部的所有F元素

2、子元素选择器

语法：E > F{

样式声明；

}

注：用>进行连接

作用：选择E元素内部的直接子元素F

3、相邻选择器

语法：E + F{

样式声明；

}

注：用+进行连接

作用：选择E元素之后紧跟着的兄弟元素F

交集选择器

语法：EF{

样式声明；

}

注：无连接符

作用：选择同时被所有选择器选中的元素

并集选择器（群组选择器）

语法：E,F{

样式声明；

}

注：逗号隔开

作用：给列表中的每一个选择器选中的元素设置样式。

伪类选择器

<--超链接四种状态 未访问前蓝色link 鼠标摁下后红色active 链接访问后紫色visited 鼠标悬停在链接上hover>

a:link{未访问前} a：visited{链接访问后} a：hover{鼠标悬停在链接上} a：active{鼠标摁下后}

注意：书写顺序link visited hover active（l-v--h-a）”lv hao”

实际工作中hover

配合选择器灵活使用

CSS特性

css的三大特性：

继承性：父元素向后代元素传递属性的机制

总结哪些常用的属性有继承性：

text-align、font-size、font-weight、color、line-height

强制继承：每个css属性都接受inherit，表示开启强制继承

作用：恰当的使用继承可以简化代码，降低css样式的复杂性

优先级

css引入样式

行间样式

选择器：通配符*0<标签名1<类10<id100

例外规则：!Important（这条样式声明会覆盖其他的任何说明）

注意：一定要优先考虑权重去解决样式声明的优先级。而不是!Important

层叠性

开发者样式>浏览器默认样式

行间>id>类>元素名（标签）>通配符*>继承的样式

总结：css的层叠性是通过继承和优先级实现的

样式声明不冲突--样式会同时应用于元素

样式声明冲突时：

同级选择器：css就近原则

不同级选择器：由选择器的优先级决定