1、属性
(1)字体属性
官方文档:/css-zh/properties/font/index.htm
1)font-style
指定字体风格
2)font-weight
指定文本字体粗细
3)font-size
指定字体大小
4)font-family
指定文本使用某个字体或者字体序列
(2)边框属性
官方文档:/css-zh/properties/backgrounds/index.htm
1)border
设置边框样式
2)border-width
设置边框厚度
设置单边边框厚度
border-top-width:设置顶部边框厚度border-right-width:设置右边框厚度border-bottom-width:设置底部边框厚度border-left-width:设置左边框厚度
3)border-style
设置边框样式
4)border-color
设置边框颜色
设置单边边框颜色
border-top-color:设置顶部边框颜色border-right-color:设置右边框颜色border-bottom-color:设置底部边框颜色border-left-color:设置左边框颜色
(3)文本属性
官方文档:/css-zh/properties/text/index.htm
1)text-align
定义元素内容的水平对齐方式
2)text-indent
定义块内文本内容的缩进
3)vertical-align
定义行内元素在行框内的垂直对齐方式
4)letter-spacing
指定字符之间的额外间隙
5)text-transform
定义元素的文本如何转换大小写
6)word-spacing
指定单词之间的额外间隙
7)line-height
定义元素中行框的最小高度
(4)尺寸与补白
官方文档:/css-zh/properties/dimension/index.htm
1)width
定义元素宽度
2)height
定义元素内容区域高度
3)margin
为元素设置外边距
单边设置外边距
margin-top:设置顶部外边距margin-right:设置右边外边距margin-bottom:设置底部外边距margin-left:设置左边外边距
4)padding
为元素设置内边距
单边设置内边距
padding-top:设置顶部内边距padding-right:设置右边内边距padding-bottom:设置底部内边距padding-left:设置左边内边距
(5)布局属性
官方文档:/css-zh/properties/layout/index.htm
1)display
设置或检索对象是否及如何显示文档:/css-zh/properties/layout/display.htm
2)float
定义了元素向左或者向右浮动放置文档:/css-zh/properties/layout/float.htm
① 文档流
文档流:就是指文档的排列顺序;标准文档流:浏览器中网页的各个元素默认排列的方式(从上到下,从左到右);脱离标准文档流:不按照默认的方式,进行排列;
② 浮动的影响
浮动元素,会脱离标准文档流, 后面元素会向上移动父元素的高度发生了变化 ,因为浮动元素脱离标签文档流浮动元素变成了行内块级元素(在一行显示,可以设置宽高)
③ 清除浮动影响的方式
父元素设置高度父元素添加一个最小的块级子元素,给子元素设置 clear:both; 属性父元素设置 overflow:hidden; 属性父元素设置伪元素(after)父元素一起浮动
④ overflow 清除浮动与clear:both 清除浮动的区别
overflow 清除浮动:不会新增元素,易于使用,overflow对于绝对定位的元素不能清除浮动clear:both清除浮动:需要新增元素,性能较低,可以清除任何元素的浮动
3)clear
定义了一个元素是否可以放置在它之前的浮动元素旁边,或者必须向下移动在新行中放置文档:/css-zh/properties/layout/clear.htm
4)visibility
定义了元素是否可见文档:/css-zh/properties/layout/visibility.htm
5)overflow
定义了元素处理溢出内容的方式文档:/css-zh/properties/layout/overflow.htm
(6)定位属性
官方文档:/css-zh/properties/positioning/index.htm
1)position
用于指定一个元素在文档中的定位方式文档:/css-zh/properties/positioning/position.htm
2)z-index
定义一个元素在文档中的层叠顺序文档:/css-zh/properties/positioning/z-index.htm
3)top
定义了元素的上外边距边界与其包含块上边界之间的偏移文档:/css-zh/properties/positioning/top.htm
4)right
定义了元素的右外边距边界与其包含块右边界之间的偏移文档:/css-zh/properties/positioning/right.htm
5)bottom
定义了元素的底外边距边界与其包含块底边界之间的偏移文档:/css-zh/properties/positioning/bottom.htm
6)left
定义了元素的左外边距边界与其包含块左边界之间的偏移文档:/css-zh/properties/positioning/left.htm
7)clip
定义了元素的哪一部分是可见的。区域外的部分是透明的文档:/css-zh/properties/positioning/clip.htm
(7)颜色属性
官网文档:/css-zh/index.htm
注意
rgb,全称Red Green Blue,r(红色),g(绿色),b(蓝色)rgba,全称Red Green Blue Alpha,它是在 RGB 上扩展包括了 “alpha” 通道,r(红色),g(绿色),b(蓝色),a(透明度)除了设置线条颜色外,还可以设置为透明(transparent)
(8)列表属性
官方文档:/css-zh/properties/list/index.htm
1)list-style
设置列表项目相关内容
(9)表格属性
官方文档:/css-zh/properties/table/index.htm
1)border-collapse
设置或检索表格的行和单元格的边是合并还是独立
2)border-spacing
设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距
(10)变换
官方文档:/css-zh/properties/transform/index.htm
1)transform
设置或检索对象的转换
注意
这里取值,只是列举了部分值,详细文档请参考官方文档
(11)过渡
1)transition
检索或设置对象变换时的过渡官方文档:/css-zh/properties/transition/index.htm
(12)动画
官方文档:/css-zh/properties/animation/index.htm
1)animation
检索或设置对象所应用的动画特效
2、盒子模型
盒子模型是CSS非常重要的思维模型把每一个标签当成一个矩形盒子布局就是通过不同大小的盒子按照不同的排列方式组合而成盒子与盒子之间可以相互影响
(1)盒子模型类型
标准盒子模型怪异盒子模型注意:只要完整定义DOCTYPE都会触发标准模式,如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式
1)标准盒子模型
① 标准盒子模型组成
width:设置的宽度height:设置的高度padding:内填充border:边框margin:外边距(透明的)
② 标准盒子模型计算方式:
宽度:width + padding * 2 + border * 2 + margin * 2高度:height + padding * 2 + border * 2 + margin * 2
2)怪异盒子模型组成
① 怪异盒子模型组成
width:设置的宽度height:设置的高度margin:外边距
② 怪异盒子模型计算方式:
宽度:width(包含padding * 2 + border * 2) + margin * 2高度:height(包含padding * 2 + border * 2) + margin *2
更多CSS属性学习,请参考官网文档
/css-zh/index.htm