公输的前端学习记录day12（css）

         盒子模型

页面布局要学习三大核心：盒子模型，浮动和定位。

1.1看透网页布局的本质

网页布局的过程：

（1）先准备好相关的网页元素，网页元素基本都是盒子box

（2）利用css设置盒子样式，然后摆放到相应位置

（3）往盒子里装内容。

核心：利用css摆盒子。

1.2盒子模型（box model）组成

所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

css盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容。

border边框   content内容   padding内边距    margin外边距（盒子与盒子的距离）

1.3边框（border）

边框有三部分组成：边框宽度（粗细）边框样式 边框颜色

语法：

border：border-width  || border-style || border-color

border-width边框的粗细，一般情况下都用px

border-style边框的样式，solid实线边框，dashed虚线边框，dotted点线，

border-color

边框的复合写法：

border：1px solid red；没有顺序，但一般这样写。

边框分开写法：

border-top：1px solid red；（只设定上边框，其余同理）

1.4表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

语法：border-collapse:collapse;表示相邻边框合并在一起。

1.5 边框会影响盒子的实际大小

解决方案：法一：测量盒子大小时不量边框

法二：如果测量的时候包含了边框，则需要width/height减去边框宽度。边框有左右，减的时候注意要不要减两倍边框。

1.6内边距（padding）

  即边框与内容之间的距离

padding-left/right/top/bottom

复合写法（简写）：

padding属性可以有一到四个值

padding:5px;(1个值，代表上下左右都是5像素内边距)

padding:5px 10px;(2个值，代表上下内边距5像素，左右内边距10像素)

padding:5px 10px 20px;(3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素)

padding:5px 10px 15px 20px;(4个值，顺时针，上5 右10 下15 左20)

注：padding也会影响盒子实际大小

也就是说，如果没有盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

一般用width/height减去两倍内边距

如果不指定width和height的话，此时padding值不会撑大盒子。