页面布局要学习三大核心：盒子模型、浮动和定位 。
学习好盒子模型能非常好的帮助我们布局页面 。
一、看透网页布局的本质
网页布局过程：
网页布局的核心本质： 就是利用 CSS 摆盒子！
二、盒子模型（Box Model）组成
所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器 。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 内容 。
三、边框（）
可以设置元素的边框 。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色 。
语法：
border: border-width || border-style || border-color
属性作用
-width
定义边框粗细，单位是 px
-style
边框的样式
-color
边框颜色
边框样式 -style 可以设置如下值：
边框简写：
border: 1px solid red;/* 没有顺序 */
边框分开写法：
border-top: 1px solid red;/* 只设定上边框，其余同理 */
案例：
盒子模型之边框的复合写法>div {width: 300px;height: 200px;/* -- border-width 边框的粗细，一般情况下使用 px --border-width: 5px;-- border-width 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 --border-style: solid;background-color: pink;*//* 边框的复合写法 简写： */border: 10px dotted skyblue;/* 利用 CSS 层叠性将上边框单独覆盖 */border-top: 10px dotted pink;background-color: black;}
3.1 表格的细线边框
表格中两个单元格相邻的边框会重叠在一起，呈现出加粗的效果 。
表格边框——今日小说排行榜>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid black;/* 合并相邻的边框 *//* border-collapse: collapse; */font-size: 14px;text-align: center;}排名关键词趋势进入搜索最近七日相关链接1鬼吹灯
文章插图
456123 贴吧 图片 百科 1鬼吹灯
文章插图
456123 贴吧 图片 百科 3西游记
文章插图
456123 贴吧 图片 百科 1鬼吹灯
文章插图
456123 贴吧 图片 百科 1鬼吹灯
文章插图
456123 贴吧 图片 百科 1鬼吹灯
文章插图
456123 贴吧 图片 百科
- 属性控制浏览器绘制表格边框的方式 。
它控制相邻单元格的边框 。
语法：
border-collapse: collapse;
table,td,th {border: 1px solid black;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}
3.2 边框会影响盒子实际大小
边框会额外增加盒子的实际大小 。因此我们有两种方案解决：
案例：
边框会影响盒子的实际大小>/* 我们需要一个 200*200 的盒子, 但是这个盒子有 10 像素的红色边框 */div {width: 180px;height: 180px;background-color: pink;border: 10px solid black;}
四、内边距（）
属性用于设置内边距，即边框与内容之间的距离 。
属性作用
-left
左内边距
-rigth
右内边距
文章插图