前端学习:css盒子模型相关知识
认识盒子模型
生活中, 我们经常会看到各种各样的盒子
HTML每个元素都是盒子
盒子模型
HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性
内容（content）
元素的内容width/height
内边距（padding）
元素和内容之间的间距
边框（border）
元素自己的边框
外边距（margin）
元素和其他元素之间的间距
内容 – 宽度和高度
设置内容是通过宽度和高度设置的:
宽度设置: width
高度设置: height
◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!
◼ 另外我们还可以设置如下属性:
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度;
◼ 下面两个属性不常用:
min-height：最小高度，无论内容多少，高度都大于或等于min-height
max-height：最大高度，无论内容多少，高度都小于或等于max-height
内边距 - padding
padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
padding包括四个方向, 所以有如下的取值:
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding单独编写是一个缩写属性
padding-top、padding-right、padding-bottom、padding-left的简写属性
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
padding并非必须是四个值, 也可以有其他值;
边框 - border
border用于设置盒子的边框:
边框相对于content/padding/margin来说特殊一些:
边框具备宽度width;
边框具备样式style;
边框具备颜色color
设置边框的方式
边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
边框的样式设置值
边框的样式设置值
边框的样式有很多, 我们可以了解如下的几个
groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来
同时设置的方式
如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置
border-top
border-right
border-bottom
border-left
border：统一设置4个方向的边框
圆角 – border-radius
border-radius用于设置盒子的圆角
border-radius常见的值
数值: 通常用来设置小的圆角, 比如6px;
border-radius补充
如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.
外边距 - margin
margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
margin包括四个方向, 所以有如下的取值:
margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距
margin单独编写是一个缩写属性
margin-top、margin-right、margin-bottom、margin-left的简写属性
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左
margin也并非必须是四个值, 也可以有其他值
盒子阴影 – box-shadow
box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加
<shadow>的常见格式如下
文字阴影 – text-shadow
text-shadow用法类似于box-shadow，用于给文字添加阴影效果
<shadow>的常见格式如下
相当于box-shadow, 它没有spread-radius的值;--也就是没有第四个length
行内非替换元素的注意事项
行内级非替换元素
a，span，img
以下属性对行内级非替换元素不起作用
width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊--并不会占据空间
padding-top、padding-bottom、上下方向的border
举例1
效果图
