目录
盒子的四个属性
◼
HTML中的每一个元素都
可以看做是一个盒子
,如右下图所示,可以具备这4个属性:
◼
内容(content)
元素的内容width/height
◼
内边距(padding)
元素和内容之间的间距
◼
边框(border)
元素自己的边框
◼
外边距(margin)
元素和其他元素之间的间距
◼
因为盒子有四边, 所以
margin/padding/border
都包括
top/right/bottom/left
四个边:
◼
设置内容是通过宽度和高度设置的:
宽度设置:
width
高度设置:
height
◼
注意: 对于
行内级非替换元素
来说, 设置
宽高是无效
的!
◼
另外我们还可以设置如下属性:
min-width
:
最小宽度
,无论内容多少,宽度都
大于或等于min-width
max-width
:
最大宽度
,无论内容多少,宽度都
小于或等于max-width
移动端适配
时, 可以设置最大宽度和最小宽度;
◼
下面两个属性不常用:
min-height
:最小高度,无论内容多少,高度都大于或等于min-height
max-height
:最大高度,无论内容多少,高度都小于或等于max-height
padding&margin
![](https://i-blog.csdnimg.cn/blog_migrate/22af86e0495920bc768fc55539b5522f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6104e7d5fb3fac5366ac7d6814312022.png)
border-radius
◼
border-radius用于设置盒子的圆角
◼
border-radius常见的值:
数值
: 通常用来设置小的圆角, 比如6px;
百分比
: 通常用来设置一定的弧度或者圆形;
◼ border-radius事实上是一个缩写属性:
将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottom-left-radius 简写为一个属性。 开发中比较少见一个个圆角设置;
◼
如果一个元素是正方形, 设置
border-radius大于或等于50%时,就会变成一个圆
上下margin的传递
◼
margin-top传递
如果
块级元素的顶部线和父元素的顶部线重叠
,那么
这个块级元素的margin-top值会传递给父元素
◼
margin-bottom传递
如果
块级元素的底部线和父元素的底部线重写
,
并且父元素的高度是auto
,那么
这个块级元素的margin-bottom值会传递给父元素
◼
如何防止出现传递问题?
给
父元素设置padding-top\padding-bottom
给
父元素设置border
触发BFC:
设置overflow为auto
◼
建议
margin
一般是用来
设置兄弟元素之间
的间距
padding
一般是用来
设置父子元素之间
的间距
outline外轮廓
◼
outline表示元素的
外轮廓
不占用空间
默认
显示在border的外面
◼
outline相关属性有
outline-width
: 外轮廓的宽度
outline-style
:取值跟border的样式一样,比如solid、dotted等
outline-color
: 外轮廓的颜色
outline
:outline-width、outline-style、outline-color的简写属性,跟border用法类似
◼
应用实例
去除a元素、input元素的focus轮廓效果
shadow
我们可以通过一个网站测试盒子的阴影:
https://html-css-js.com/css/generator/box-shadow/
我们可以通过一个网站测试文字的阴影:
https://html-css-js.com/css/generator/box-shadow/
元素的水平居中方案
◼
在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
◼
行内级元素(包括inline-block元素)
水平居中:在父元素中设置
text-align: center
◼
块级元素
水平居中:
margin: 0 auto