CSS知识点3

一.盒子模型、

盒模型分为两种盒模型，一种是常见的标准盒模型，一种是低版本浏览器的怪异盒模型

就标准盒模型来说，他的内容区域可以用width盒height来定义宽度和高度。

标准盒模型示例：

这是一个标准盒模型，里边的200*200是内容区域，大小可以用width和height自定义。

内容区域外部的padding也可以自己定义 盒模型定义padding的四周边距在padding后加top、bottom、left、right即可，也可以缩写。

padding缩写的四种样式：

1.padding：值 四个边的内边距相等

2. padding 值1 值2 值1：上、下内边距 值2：左、右内边距

3.padding ：值1 值2 值3            值1：上内边距       值2：左、右内边距         值3：下内边距

4.padding：值1 值2 值3 值4 值1:上内边距 值2: 右内边距 值3:下内边距 值4:左内边距

顺序是上、右、下、左顺时针方向

padding外部的边框border同样可以自己定义宽度和高度，不过在写的时候必须加上边框的样式，不然就无效，

边框的样式用border-style来定义，样式有五种

默认为none 无边框，实线为solid ，虚线为dashed，点状线为dotted，双实线为doyble

可以缩写为：border ： border-width值 border-style border-color值，color不写默认为黑色。

最后就是盒子外部的外边距 margin 样式和padding相同，

示例：

 

 二.BFC

 BFC(Block formatting context)直译为"块级格式化上下文"。

一般情况下，上下两个盒子之间的外边距是取最大值，不是和

示例：

 

而左右两个盒子就不会有这个问题，默认是两个盒子之间的距离是两个外边框相加。

而上下两个盒子默认是取最大值，这个时候可以给盒子套一个父级元素，然后给父级元素添加一个

overflow，只要overflow的值不是visible就可以使距离变成和

示例：

 

 

 三.更改元素的样式。

一般情况下，块元素都独占一行，行内元素不能更改大小， 如果想让块元素和其他元素一行，想让行内元素改变大小，可以直接改变元素的样式。

可以用display来做到，想改变为块元素就加block 如果想改变为行内元素就加inline ，如果想改变为行内块元素就加inline-block。

示例：