所属专栏:前端只因变凤凰之路
作者简介:rchjr——五带信管菜只因一枚
前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
文章简介:本文介绍CSS的盒子模型中的边框与内边距。知识学习内容来自b站的 @黑马程序员 的视频
先准备好相关的网页元素,网页元素基本都是盒子
利用CSS设置好盒子的样式,然后摆放到相应位置
往盒子里面装内容
核心:利用CSS摆盒子
所谓盒子模型就是把html页面中的布局元素看做是一个矩形的盒子,也就是装内容的容器。CSS盒子模型本质上是一个盒子,它包括边框、外边距、内边距和实际内容四个部分。
属性
border-width,边框的粗细
border-style,边框的样式(如实线,点线,虚线等)
border-color,边框的颜色
Document
复合写法
border: 1px solid pink; 包括了粗细,样式和颜色,其中三者没有顺序
Document
边框分开写法
单独设置某一条边(把上边的设置放在最下面,合理利用层叠性)
Document
先看下面的代码效果
Document
排名
关键词
趋势
今日搜索
最近七日
相关连接
1
鬼吹灯
345
123
百度
2
盗墓笔记
345
123
百度
3
西游记
345
123
百度
4
东游记
345
123
百度
5
甄嬛传
345
123
百度
6
水浒传
345
123
百度
7
三国演义
345
123
百度
可以看到由于每个单元格的粗细都为1,加起来就为2,看起来比第一行的单元格要粗。现在有个办法可以让相邻的边框合并
border-collapse属性即可。
Document
排名
关键词
趋势
今日搜索
最近七日
相关连接
1
鬼吹灯
345
123
百度
2
盗墓笔记
345
123
百度
3
西游记
345
123
百度
4
东游记
345
123
百度
5
甄嬛传
345
123
百度
6
水浒传
345
123
百度
7
三国演义
345
123
百度
可以看到相邻边框边细了
边框会影响盒子实际大小,因此有两种解决方案:
测量盒子大小的时候不量边框
如果测量的时候包含了边框,则需要盒子的长宽减去边框的宽度
Document
可以看到我设置的盒子大小本来是180*180,加了10的左右边框后,变成了200(这里不太精准199也差不多)
padding属性用于设置内边距,即边框与内容之间的距离
包括padding-left、padding-right、padding-top、padding-bottom
复合写法
padding后面跟1个值,表示四个方向都是这个值
Document
盒子的内容
2个值,表示上下为这个第一个值,左右为第二个值
Document
盒子的内容
3个值,表示上为第一个值,左右为第二个值,下位第三个值
Document
盒子的内容
4个值,表示上右下左,按照顺时针顺序
Document
盒子的内容
可以看到,盒子实际大小由于内边距的添加也发生了改变
Document
盒子的内容
解决方法:在考虑内边距的情况下,用width/height减去添加的内边距大小
可以发现导航栏中每个盒子内的字数不同,所以如果采用给每个盒子一样长宽的方式就不合理,因此需要为每个盒子设置相同的padding来把左右两边撑开一样的距离,高度都设置成一样的即可。
相关取值(后续会告知如何使用测量工具进行测量)
上边框3px,颜色#ff8500
下边框1px,颜色#edeef0
盒子高度为41px,背景颜色为#fcfcfc
文字颜色为#4c4c4c
Document
如果盒子本身没有指定长宽属性,则此时padding不会撑开盒子大小
下图我指定了30px的padding,但是只指定了height200,所以盒子总高度会变成260,宽度应该与浏览器保持一致。
Document
这里我指定了宽度,那么加上padding的话,宽度应该会超过浏览器,导致滑动条的出现
Document
所以给我们的提示就是有时候不需要写长宽度,防止不必要的撑开。