1、CSS盒子模型
1.1、标准盒子模型
1.2、IE盒子模型
1.3、标准盒子模型和IE盒子模型之间差异
- width的包含范围不同(故这使得在计算整个盒子的宽度时存在着差异)
- 标准盒子模型:width指content部分的宽度,
- IE盒子模型中:width表示content+padding+border这三个部分的宽度,
1.4、盒子尺寸计算
width的包含范围不同,故这使得在计算整个盒子的宽度时存在着差异
- 标准盒子模型的盒子尺寸:左右border+左右padding+width
- IE盒子模型的盒子尺寸:width
2、CSS边框 border
2.1、边框样式border-style
同时设置上下左右四个边框样式
border-style: none;
/* 定义无边框。 */
border-style: hidden;
/* 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 */
border-style: dotted;
/* 定义点状边框。在大多数浏览器中呈现为实线。 */
border-style: dashed;
/* 定义虚线。在大多数浏览器中呈现为实线。 */
border-style: solid;
/* 定义实线。 */
分别设置上下左右四个边框样式
border-style: dotted solid double dashed;
/* 上边框是点状 右边框是实线 下边框是双线 左边框是虚线 */
border-style: dotted solid double;
/* 上边框是点状 右边框和左边框是实线 下边框是双线 */
border-style: dotted solid;
/* 上边框和下边框是点状 右边框和左边框是实线 */
border-style: dotted;
/* 所有4个边框都是点状 */
设置下边框样式
border-bottom-style: none;
/* 定义无边框。 */
border-bottom-style: hidden;
/* 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 */
border-bottom-style: dotted;
/* 定义点状边框。在大多数浏览器中呈现为实线。 */
border-bottom-style: dashed;
/* 定义虚线。在大多数浏览器中呈现为实线。 */
border-bottom-style: solid;
/* 定义实线。 */
2.2、边框宽度 border-width
同时设置上下左右四个边框宽度
border-width: thin;
/* 定义细的边框。 */
border-width: medium;
/* 默认。定义中等的边框。 */
border-width: thick;
/* 定义粗的边框。 */
border-width: 5px;
/* 允许您自定义边框的宽度。 */
border-width: inherit;
/* 规定应该从父元素继承边框宽度。 */
分别设置上下左右四个边框样式
border-width: thin medium thick 10px;
/* 上边框是细边框右边框是中等边框 下边框是粗边框 左边框是 10px 宽的边框 */
border-width: thin medium thick;
/* 上边框是细边框右边框和左边框是中等边框 下边框是粗边框 */
border-width: thin medium;
/* 上边框和下边框是细边框右边框和左边框是中等边框 */
设置下边框样式边框宽度
border-bottom-width: thin;
/* 定义细的边框。 */
border-bottom-width: medium;
/* 默认。定义中等的边框。 */
border-bottom-width: thick;
/* 定义粗的边框。 */
border-bottom-width: 5px;
/* 允许您自定义边框的宽度。 */
border-bottom-width: inherit;
/* 规定应该从父元素继承边框宽度。 */
2.3、边框颜色border-color
同时设置上下左右四个边框颜色
border-color:color;
/* 指定背景颜色。在CSS颜色值查找颜色值的完整列表 */
border-color:transparent;
/* 指定边框的颜色应该是透明的。这是默认 */
border-color:inherit;
/* 指定边框的颜色,应该从父元素继承 */
分别设置上下左右四个边框颜色
border-color:red green blue pink;
/* 上边框是红色 右边框是绿色 底部边框是蓝 左边框是粉红色 */
border-color:red green blue;
/* 上边框是红色 左,右边框是绿色 底部边框是蓝 */
border-color::red green;
/* 顶部和底部边框是红色 左右边框是绿色 */
border-color:red;
/* 所有四个边框是红色 */
设置下边框样式边框颜色
border-top-color: #000;
border-left-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-bottom-color:color;
/* 指定背景颜色。在CSS颜色值查找颜色值的完整列表 */
border-bottom-color:transparent;
/* 指定边框的颜色应该是透明的。这是默认 */
border-bottom-color:inherit;
/* 指定边框的颜色,应该从父元素继承 */
2.4、同时设置:border-width border-style border-color;
border:border-width border-style border-color;
border:5px solid red;
2.5、边框圆角border-radius CSS3
边框圆角四个角同时设置
border-radius: 10px;
/* 定义弯道的形状。 */
border-radius: 50%;
/* 使用%定义角落的形状。 */
四个角分别设置
border-radius: 左上 右上 右下 左下;
border-top-left-radius: 2px; /* 左上 */
border-top-right-radius: 2px; /* 右上 */
border-bottom-right-radius: 2px; /* 右下 */
border-bottom-left-radius: 2px; /* 左下 */
2.6、边框图像border-image CSS3
用于指定要用于绘制边框的图像
border-image-source: url(border.png);
指定图像的边界向内偏移(number|%|fill);
border-image-slice:20%;
/* 四个边界同时设置 */
border-image-slice:20% 20% 20% 20%;
/* 上 右 下 左 */
border-image-slice:20% 20% ;
/* 上下 左右 */
border-image-slice:20% 20% 20% ;
/* 上 右 下左 */
指定图像边界的宽度(参数:number|%|auto)
border-image-width:10px;
/* 四个边界同时设置 */
border-image-width:20% 20% 20% 20%;
/* 上 右 下 左 */
border-image-width:20% 20% ;
/* 上下 左右 */
border-image-width:20% 20% 20% ;
/* 上 右 下左 */
用于指定在边框外部绘制 border-image-area 的量
border-image-outset: length|number;
用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。
border-image-repeat: stretch|repeat|round|initial|inherit;
border-image-repeat:stretch;
/* 默认值。拉伸图像来填充区域 */
border-image-repeat:repeat ;
/* 平铺(repeated)图像来填充区域。 */
border-image-repeat:round ;
/* 类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域。 */
border-image-repeat:space ;
/* 类似 repeat 值。如果无法完整平铺所有图像,扩展空间会分布在图像周围 */
border-image-repeat:initial;
/* 将此属性设置为默认值。查看 initial */
border-image-repeat:inherit;
/* 从父元素中继承该属性。 */
border-image:border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat;
2.8、box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
2.7、边框合并折叠border-collapse用于table
border-collapse:collapse;
/* 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 */
border-collapse:separate;
/* 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 */
border-collapse:inherit;
/* 规定应该从父元素继承 border-collapse 属性的值 */
3、外边距margin
margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin: 25px 50px 75px 100px;
/* 上边距为25px
右边距为50px
下边距为75px
左边距为100px */
margin: 25px 50px 75px;
/* 上边距为25px
左右边距为50px
下边距为75px */
margin: 25px 50px;
/* 上下边距为25px
左右边距为50px */
margin: 25px;
/* 所有的4个边距都是25px */
4、内边距padding
当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding:25px 50px 75px 100px;
/* 上填充为25px
右填充为50px
下填充为75px
左填充为100px */
padding:25px 50px 75px;
/* 上填充为25px
左右填充为50px
下填充为75px */
padding:25px 50px;
/* 上下填充为25px
左右填充为50px */
padding:25px;
/* 所有的填充都是25px */
5、CSS 尺寸
盒子高度
height: auto;
/* 默认。浏览器会计算出实际的高度。 */
height: 200px;
/* 使用 px、cm 等单位定义高度。 */
height: 60%;
/* 基于包含它的块级对象的百分比高度。 */
height: inherit;
/* 规定应该从父元素继承 height 属性的值。 */
行高(设置行高等于盒子高度此时盒子中的内容会垂直居中)
line-height: normal;
/* 默认。设置合理的行间距。 */
line-height: number;
/* 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 */
line-height: 30px;
/* 设置固定的行间距。 */
line-height: 100%;
/* 基于当前;字体尺寸的百分比行间距。 */
line-height: inherit;
/* 规定应该从父元素继承 line-height 属性的值。 */
最大高度
max-height: none;
/* 默认。定义对元素被允许的最大高度没有限制。 */
max-height: 600px;
/* 定义元素的最大高度值。 */
max-height: 50%;
/* 定义基于包含它的块级对象的百分比最大高度。 */
max-height: inherit;
/* 规定应该从父元素继承 max-height 属性的值。 */
最小高度
min-height: 100px;
/* 定义元素的最小高度。默认值是 0。 */
min-height: 20%;
/* 定义基于包含它的块级对象的百分比最小高度。 */
min-height: inherit;
/* 规定应该从父元素继承 min-height 属性的值。 */
宽度
width: auto;
/* 默认值。浏览器可计算出实际的宽度。 */
width: 300px;
/* 使用 px、cm 等单位定义宽度。 */
width: 100%;
/* 定义基于包含块(父元素)宽度的百分比宽度。 */
width: inherit;
/* 规定应该从父元素继承 width 属性的值。 */
最大宽度
max-width: none;
/* 默认。定义对元素的最大宽度没有限制。 */
max-width: 600px;
/* 定义元素的最大宽度值。 */
max-width: 60%;
/* 定义基于包含它的块级对象的百分比最大宽度。 */
max-width: inherit;
/* 规定应该从父元素继承 max-width 属性的值。 */
最小宽度
min-width: 200px;
/* 定义元素的最小宽度值。默认值:取决于浏览器。 */
min-width: 20%;
/* 定义基于;包含它的块级对象的百分比最小宽度。 */
min-width: inherit;
/* 规定应该从父元素继承 min-width 属性的值。 */
6、CSS 轮廓outline
-
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
-
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
-
outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)
在一个声明中设置所有的轮廓属性
outline:outline-color outline-style outline-width;
设置轮廓的颜色
outline-color:color-name;
outline-color:hex-number;
outline-color:rgb-number;
outline-color:invert;
outline-color:inherit;
设置轮廓的样式
outline-style:none;
outline-style:dotted;
outline-style:dashed;
outline-style:solid;
outline-style:double;
outline-style:groove;
outline-style:ridge;
outline-style:inset;
outline-style:outset;
outline-style:inherit;
设置轮廓的宽度
outline-width:thin;
outline-width:medium;
outline-width:thick;
outline-width:length;
outline-width:inherit;