1、网页布局本质
1.1、页面布局的过程
-
先准备好相关的网页元素,网页元素基本都是盒子
-
利用CSS设置好盒子样式,然后摆到相应的位置
-
往盒子里面装内容。
网页布局的核心本质:利用CSS摆放盒子。
2、盒子模型组成
盒子模型:将HTML页面中的布局元素看作矩形盒子。
-
border边框
-
content内容
-
padding内边距
-
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、外边距典型应用
外边距可以让块级盒子水平居中的两个条件
-
盒子必须指定宽度width
-
盒子左右的外边距设置为auto。
margin:0 auto;块级盒子水平居中对齐
注意:此方法为块级元素水平居中,行内块元素或者悍内块元素水平居中在其父元素添加text-align:center即可;
9、外边距合并
使用margin定义块元素的垂直外边距时,可能出现外边距的合并
9.2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,符元素有上边距同时子边距也用外边距,此时父元素会塌陷较大的外边距值。
解决方案:
-
可以为父元素定义上边距
-
可以为父元素定于上内边距
-
可以给父元素添加overflow:hidden
10、清除内外边距
网页元素中许多元素都带有默认的内外边距,我们需要清楚内外边距。
* {
padding:0;
margin:0;
}
行内块元素只设置左右内外边距,但是转换为块级和行内块元素就可以设置。
11、PS基本操作
网页美化使用PS
-
文件-打开:打开测量的图片
-
ctrl+R:打开标尺修改单位为像素