coderwhy学习笔记三

你是可姐姐

◼生活中, 我们经常会看到各种各样的盒子:

◼ 事实上, 我们可以把HTML每一个元素看出一个个的盒子:

◼ 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

效果图

效果图

效果图◼ border用于设置盒子的边框:
◼ 边框相对于content/padding/margin来说特殊一些:
边框具备宽度width;
边框具备样式style;
边框具备颜色color;

边框的样式设置值◼ 边框的样式有很多, 我们可以了解如下的几个:
groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

效果图◼ 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%时，就会变成一个圆

效果图
来源：http://www.yidianzixun.com/article/0lTl4mEr
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！