CSS盒子模型

一、盒子模型

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。

1.1 看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子Box。

2. 利用CSS设置好盒子，然后摆放到相应的位置。

3. 往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

1.2盒子模型（Box Model）组成

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

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

1.3边框（border）

border可以设置元素的边框。边框有三部分组成：边框的宽度（粗细）边框样式 边框颜色

语法：

border : boder-width || border-style || border-color

属性	作用
border-width	定义边框的粗细，单位是px
boder-style	边框的样式（solid 实现边框 dashed 虚线边框 dotted 点线边框）
boder-color	边框颜色

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

border : 1px solid red;                /*没有顺序*/

边框分开写法：

border-top : 1px solid red         /*只设定上边框，其余同理*/

1.4表格的细线粗细

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

语法：

border-collapse : collapse;

collapse单词是合并的意思

border-callapse:cpllapse;表示相邻边框合并到一起

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

边框会额外增加盒子的实际大小。因此我们有两种解决方案：

1. 测量盒子大小的时候，不量边框。

2. 如果测量的时候包含了边框，则需要width/height减去边框宽度。

1.6内边距（padding）

padding属性用于设置内边距，即边框与内容的之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding属性（简写属性）可以有一到四个值。

值的个数	表达意思
padding：5px;	1个值，代表上下左右都有5像素内边距；
padding : 5px 10px;	2个值，代表上下内边距是5像素 左右内边距是10像素；
padding : 5px 10px 15px;	3个值，代表上内边距是5像素 左右内边距是10像素 下内边距是20像素；
padding : 5px 10px 15px 20px;	4个值，代表上内边距是5像素，右内边距是10像素，下内边距是15像素，左内边距是20像素 顺时针

当我们给盒子指定padding值之后，发生了2件事情：

1. 内容和边框有了距离，添加了内边距。

2. padding影响了盒子的实际大小大小。

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

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

注意：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子的大小

1.7 外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式代表的意义跟padding完全一致。

二、PS基本操作

因为美工大部分效果图是利用PS（Photoshop）来做的，所以以后我们大部分切图是在PS里面完成。

• 文件->打开：可以打开我们想要测量的图片

• Ctrl+R：可以打开标尺，或者视图->标尺

• 右击标尺，把里面的单位改为像素

• Ctrl+加号（+）可以放大视图，Ctrl+减号（-）可以缩小视图

• 按住空格键，鼠标可以变成小手，拖动PS视图

• 用选区拖动，可以测量大小

• Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区

视频资料来源：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】 https://www.bilibili.com/video/BV14J4114768/?p=156&share_source=copy_web&vd_source=9bce191eb50f06ae83cb422d8b7f8f31 P136-P155