Day06

margin属性（外边距）

margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距

（允许负值）

什么是margin？：用于设置盒子和盒子之间的距离

取值：px、em

百分比（相对父元素）

允许使用负值

auto浏览器自动计算

语法：

上边距：margin-top

下边距：margin-bottom

左边距：margin-left

右边距：margin-right

复合写法：

margin:20px; 上下左右都是20的外边距

margin:20px 30px; 上下外边距20、左右外边距30

margin:20px 30px 40px; 上外边距20、左右外边距30、下外边距40

margin:20px 30px 40px 50px; 上外边距20、右外边距30、下外边距40、左外边距50

让盒子居中

margin：0  auto; 上下外边距0  左右外边距自动（居中）

margin的应用：

实现已知宽度的块级盒子水平居中

外边距问题（11.10）

嵌套块级元素垂直外边距塌陷

描述：当父元素没有padding、border时，子元素与父元素直接相邻，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并，取两个值中的较大值。负值取绝对值较大的值。

解决方法：1、给父元素设置边框或内填充（慎用）

1. 给父元素设置overflow：hidden；（溢出隐藏）改变渲染规则  -BFC

结构关系：相邻元素的垂直外边距合并

描述：当两个块级兄弟元素垂直方向上的margin值直接相遇时会发生合并。最终结果取较大值。 负值取绝对值较大的值。

解决方法：

1. 尽量只定义其中一个的margin值

给其中一个盒子加父元素：overflow：hidden;改变渲染规则

盒模型

什么是盒模型？

css盒模型本质上就是一个盒子，封装周围的html元素，包括：实际内容（weight+height）+内填充（padding）+边框（border）+外间距（margin）

1. Width:设置宽度 px 百分比
2. height：设置高度

border边框

边框是围绕内容和外边距margin之间的一条或多条线

1. 边框的宽度

语法：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：右边框

1. 边框的样式

语法：border-style

取值：solid实线

dashed虚线

dotted点状线

double双实线

none无边框

1. border-color边框颜色

颜色单词：red  yellow  blue

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

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

复合写法二：

border:宽度  样式  颜色;

例：border:10px solid red;

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

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

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

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

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

三角形：1、宽高为0

1. 设置边框，并且边框颜色为透明色
2. 确定三角形的方向，要去改变该边框的颜色
3. 取消掉该边框的对立边，设为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

图片下间隙产生的原因：

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

方法：

1. 给img的父元素设置高度，高度和图片的高度一致
2. 给img的父元素设置font-size：0；或line-height：0；
3. 给img标签转换为行级元素，display：block；
4. 给img标签设置垂直对齐方式：vertical-align:middle/top/bottom;

vertical-align属性：

vertical-align:top顶线对齐

vertical-align:middle中线对齐

vertical-align:bottom底线对齐

vertical-align:baseline基线对齐

复合选择器：

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

1. 后代元素选择器

语法：E F{

样式声明；

}

注：用空格进行连接

作用：选择E元素内部的所有F元素
2、子元素选择器

语法：E > F{

样式声明；

}

注：用>进行连接

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

3、相邻选择器

语法：E + F{

  样式声明；

  }

注：用+进行连接

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

1. 交集选择器

语法：EF{

样式声明；

}

注：无连接符

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

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

语法：E,F{

样式声明；

}

注：逗号隔开

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

1. 伪类选择器

<--超链接四种状态 未访问前蓝色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的三大特性：

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

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

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

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

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

1. 优先级

css引入样式

行间样式

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

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

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

1. 层叠性

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

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

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

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

样式声明冲突时：

同级选择器：css就近原则

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