看了书发现自己对盒模型的理解是零碎的不成体系的。
为元素应用内边距
- 内边距就是padding,内边距的设置也是四个方向padding-top/padding-right/padding-left/padding-bottom,以及他们的简写属性padding
- 如果使用百分数指定内边距的话,百分数跟包含块的宽度有关,高度不在考虑范围。
- 内边距可以有效防止边框绘制在文本上。
为元素应用外边距
- 外边距就是margin,同样边距的设置也是四个方向margin-top/margin-left/margin-right/margin-bottom,简写属性就是margin 方向是上右下左
- 百分数值和包含块的宽度相关的
- 当display属性的值为inline的元素应用外边距的顶边和底边的外边距就不会显示
控制元素的尺寸
- width/height设置元素的宽高
- min-width/min-height设置元素最小可接受的宽高
- max-width/max-height设置元素最大可接受的宽高
- 上面三个属性的值都可以是auto/长度值/百分数
- 当涉及到百分数时是根据包含块的宽度来计算的,当包含块的宽度变化时,元素的宽高也跟着变化,保证所占百分比不变
- box-sizing:设置尺寸调整应用到元素盒子的那一部分,它的属性值为:content-box,padding-box,border-box,margin-box
处理溢出内容
- 处理溢出就是overflow属性他是一个 简写属性,实际上有处理水平方向溢出的overflow-x和处理竖直方向上的溢出overflow-y
- 以下是改属性的值:
值 | 说明 |
---|---|
auto | 浏览器自行处理溢出内容,若内容被剪掉就显示滚动条,否则不显示 |
hidden | 多余部分直接剪掉 |
scroll | 为让用户看到所有内容,添加滚动条机制 |
visible | 默认值,不管是否溢出盒中都显示元素内容 |
还有两个值no-content和no-display书上说主流浏览器都不支持,那么就不再讲了
控制元素的可见性
- 使用visibility属性控制元素的可见性以下是三个属性值以及相关说明
值 | 说明 |
---|---|
collapse | 元素不可见且在页面布局中不占据空间 |
hidden | 元素不可见,但在页面布局中占据空间 |
visible | 默认值可见 |
元素的盒类型
真是没有想到display的属性值居然有这么多。
创建浮动盒
- 使用float属性创建浮动盒
- 以下是浮动盒的属性:
值 | 说明 |
---|---|
left | 移动元素,使左边界挨着块的左边界,或者另一个浮动元素的右边界 |
right | 移动元素,使右边界挨着块的右边界,或者另一个浮动元素的左边界 |
none | 元素位置固定 |
- 阻止浮动元素的堆叠(一个挨着一个的堆叠在一起)使用clear属性可以阻止