主要任务: 盒模型(Box Model)
元素实际占的位置:
宽:内容的宽+左右内边距+左右边框+左右外边距
高:内容的高+上下内边距+上下边框+上下外边距
内容(content):盒子的内容,用于显示文本,图片 width height
内边距(padding):内容到边框的距离 透明色
边框(border):围绕在内边距的边框
外边距(margin):盒子与另外一个盒子之间的距离 透明色
内边距:padding
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充
length 规定以具体单位计算填充值,比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的填充
inherit 指定应该从父元素继承padding
一个值(上下左右) 两个值(上下 左右) 三个值(上 左右 下) 四个值(上 右 下 左)
外边距:margin
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
一个值(上下左右) 两个值(上下 左右) 三个值(上 左右 下) 四个值(上 右 下 左)
边框:border
border 简写属性,用于把针对四个边的属性设置在一个声明。
可以设置的属性分别(按顺序):border-width, border-style,和border-color style必需
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度 px。
inherit 规定应该从父元素继承边框宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
color 指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent 指定边框的颜色应该是透明的。这是默认
inherit 指定边框的颜色,应该从父元素继承
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
轮廓:outline 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width 缺一
outline 在一个声明中设置所有的轮廓属性
outline-color
outline-style
outline-width
inherit
outline-color 设置轮廓的颜色
color-name
hex-number
rgb-number
invert
inherit
outline-style 设置轮廓的样式
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。
outline-width 设置轮廓的宽度 thin
medium
thick
length
inherit