CSS之盒子模型

导读：使用CSS美化页面布局时，主要针对三个部分，1 盒子模型  2 浮动  3 定位。CSS盒子模型的本质是一个盒子封装了包括内边距、外边框、边框的三个部分。

 

一、 边框border

 边框样式，三重点：点线、实线、虚线

 

简写

 

 二、表格的细线边框

 若我们想要展示一个表格，在构建的时候，由于是两个框叠加，导致第一个单元格的右边框（1px）与第二个单元格的左边框(1px)会出现重叠的情况（合计2px），collapse属性可以确保重叠后仍然是1px。

 

三、内边距padding

盒子内部的内容和边框的距离

 

四、外边距

 

 ps: 行内元素、块内元素、行内块元素 水平居中对齐的策略

行内块元素（如图片）——>给其父元素添加text-align:center

行内元素：同上

块内元素：1. 给盒子指定宽度  2. margin:0 auto;

 

4.2  嵌套块元素塌陷——外边距合并

 

五、清楚内外边距

 注意：日常写前端时可以将上述内容放入<style>标签中的第一行