CSS盒子模型

1、网页布局本质

1.1、页面布局的过程

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

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

3. 往盒子里面装内容。

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

2、盒子模型组成

盒子模型：将HTML页面中的布局元素看作矩形盒子。

1. border边框

2. content内容

3. padding内边距

4. margin外边距

3、边框（border）

border设置盒子的边框的宽度（粗细）、边框的样式、边框的颜色

border：border-width || border-style || border-corder

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lEUtzhfy-1610084294415)(https://tcs.teambition.net/storage/3120b5907468e22950f36c3601a75a5ede1a?Signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBcHBJRCI6IjU5Mzc3MGZmODM5NjMyMDAyZTAzNThmMSIsIl9hcHBJZCI6IjU5Mzc3MGZmODM5NjMyMDAyZTAzNThmMSIsIl9vcmdhbml6YXRpb25JZCI6IiIsImV4cCI6MTYxMDY4OTA1OSwiaWF0IjoxNjEwMDg0MjU5LCJyZXNvdXJjZSI6Ii9zdG9yYWdlLzMxMjBiNTkwNzQ2OGUyMjk1MGYzNmMzNjAxYTc1YTVlZGUxYSJ9.DnAiH5_GtlLVF7en0S3heVCrtkT4RDgNQuHjJ0vZlvA&download=image.png “”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-giFlHf3O-1610084294418)(https://tcs.teambition.net/storage/312010e1f39f5ac8f03fc01add4798877089?Signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBcHBJRCI6IjU5Mzc3MGZmODM5NjMyMDAyZTAzNThmMSIsIl9hcHBJZCI6IjU5Mzc3MGZmODM5NjMyMDAyZTAzNThmMSIsIl9vcmdhbml6YXRpb25JZCI6IiIsImV4cCI6MTYxMDY4OTA1OSwiaWF0IjoxNjEwMDg0MjU5LCJyZXNvdXJjZSI6Ii9zdG9yYWdlLzMxMjAxMGUxZjM5ZjVhYzhmMDNmYzAxYWRkNDc5ODg3NzA4OSJ9.LpADpNYctQs11pbI5IKRDqAiQzo-hmfA217BDmcLrMc&download=image.png “”)]

4、边框的简写

CSS边框属性简写

border：1px solid red；  没有顺序

边框分开写法:

border-top: 1px solid red；上边框
border-bottom: 1px solid red； 下边框

5、表格的细线边框

border-collapse:collapse;

将表格的相邻单元格的边框合并在一起。

6、内边距（padding）

padding属性设置内边距，则边框与内容之间的边距。

7、影响盒子大小

7.1、会影响盒子的大小

• border-width盒子边框线粗细会增大盒子

• padding内边距会增大盒子

解决方法：

利用目标的盒子大小的width和height减去需要设置盒子边框和内边距的大小。

7.2、不会影响盒子大小的因素

如何设置本身没有指定width/height属性，则此时padding不会被撑开盒子大小。

8、外边距（margin）

margin属性设置盒子外边距，控制盒子与盒子之间的距离。

8.1、边距简写

和padding设置的方式一样。

8.2、外边距典型应用

外边距可以让块级盒子水平居中的两个条件

1. 盒子必须指定宽度width

2. 盒子左右的外边距设置为auto。

margin：0 auto；块级盒子水平居中对齐

注意：此方法为块级元素水平居中，行内块元素或者悍内块元素水平居中在其父元素添加text-align：center即可；

9、外边距合并

使用margin定义块元素的垂直外边距时，可能出现外边距的合并

9.2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，符元素有上边距同时子边距也用外边距，此时父元素会塌陷较大的外边距值。

解决方案：

1. 可以为父元素定义上边距

2. 可以为父元素定于上内边距

3. 可以给父元素添加overflow：hidden

10、清除内外边距

网页元素中许多元素都带有默认的内外边距，我们需要清楚内外边距。

* {
	padding：0；
	margin：0；
}

行内块元素只设置左右内外边距，但是转换为块级和行内块元素就可以设置。

11、PS基本操作

网页美化使用PS

• 文件-打开：打开测量的图片

• ctrl+R:打开标尺修改单位为像素