css-盒模型

内边距

属性	说明
padding-top	为顶边设置内边距
padding-right	为右边设置内边距
padding-bottom	为下边设置内边距
padding-left	为左边设置内边距
padding	简写属性,分别给 上-右-下-左 设置内边距

• 属性值可以为长度值或百分数,百分数与包含块的宽度有关

---

外边距

属性	说明
margin-top	为顶边设置外边距
margin-right	为右边设置外边距
margin-bottom	为下边设置外边距
margin-left	为左边设置外边距
margin	简写属性,分别给 上-右-下-左 设置外边距

---

控制元素尺寸

属性	说明
width	设置元素宽度,属性值可为:auto(默认) 长度值 百分数
height	设置元素高度,属性值可为:auto(默认) 长度值 百分数
min-width	为元素设置最小可接受的宽度,属性值可为:auto(默认) 长度值 百分数
min-height	为元素设置最小可接受的高度,属性值可为:auto(默认) 长度值 百分数
max-width	为元素设置最大可接受的宽度,属性值可为:auto(默认) 长度值 百分数
max-height	为元素设置最大可接受的高度,属性值可为:auto(默认) 长度值 百分数
box-sizing	设置以上元素尺寸属性应用到哪一部分,属性值可为:content-box、padding-box、border-box、margin-box

• 百分数都是与宽度有关

---

处理溢出内容

属性:

• overflow:同时设置水平与垂直方向的溢出方式
• overflow-x:设置水平方向的溢出方式
• overflow-y:设置垂直方向的溢出方式

属性值	说明
auto	若有溢出内容则显示滚动条
scroll	不管有没有溢出都显示滚动条
hidden	多余部分直接剪裁掉,只显示盒内内容
visible	默认值,不管是否溢出内容盒,都直接显示整个内容
no-content	如果内容无法全部显示就直接移除
no-display	如果内容无法显示全部就隐藏所有内容

---

控制元素可见性

visibility:设置元素的可见性

属性值	说明
collapse	元素不可见,且在页面布局中不占空间
hidden	元素不可见,且在页面布局中占据空间
visible	默认值,元素在页面上可见

---

块级元素

给元素设置display:block

使元素变为块级元素,使元素自动换行,其实用换行符能达到一样效果

---

行内元素

给元素设置display:inline

使元素变为行内元素,浏览器会忽略这种元素的width height margin属性

行内-块级元素

给元素设置display:inline-block

使元素变为行内块元素,同时具有行内与块级元素的性质:

• 盒子整体上作为行内元素显示:不会自动换行
• 盒子内部作为块元素显示:width height margin等可以使用

---

插入元素

给元素设置display:run-in

该元素盒子的类型取决于周围元素:

• 若该元素的相邻兄弟元素是块级元素,则该元素为兄弟元素中的第一个行内元素
• 其他情况该元素视为块级元素

---

隐藏元素

给元素设置display:none

告诉浏览器不要为该元素设置任何类型盒子:在布局中也不占任何空间

---

浮动盒

给元素设置float属性,值有:

• left:移动元素,使其左边界挨着包含块的左边界
• right:移动元素,使其左边界挨着包含块的右边界
• none:元素位置固定

阻止浮动元素堆叠

如果设置了多个浮动元素,默认情况下它们会一个挨着一个堆叠在一起

可以使用clear属性(属性值有:right left both none)指定某个浮动元素的某边界不能挨着另一个浮动元素

值	说明
left	元素的左边界不能挨着另一个浮动元素
right	元素的右边界不能挨着另一个浮动元素
both	元素的左/右边界都不能挨着另一个浮动元素
none	元素的左/右边界都可以挨着另一个浮动元素