1.背景
background-color | 背景颜色 |
background-image | 背景图片 |
background-repeat | 是否重复 1.repeat-x 2.repeat-y 3.no-repeat |
2.文本
字体颜色 | color:颜色; |
对齐方式 | text-align:left;(左对齐) text-align: center;(居中) text-align: right;(右对齐) text-align:justify;(两端对齐) |
文本修饰 | text-decoration: line-through(中划线) overline(中划线) underline(下划线); |
去除文本效果(去除超链接的下划线) | a { text-decoration:none; } |
首行缩进 | text-indent:2em;(首行缩进两格,em表示相对值) |
3.display属性
display:none; | 隐藏元素 |
display: block; | 显示元素 |
4.浮动
float的属性值有none、left、right。
1.只有横向浮动,并没有纵向浮动。
2.会将元素的display属性便更为block。
3.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4.浮动元素的前一个元素不会受到任何影响(如果想让两个块元素并排显示,必须让两个块元素都应用float。)
5.盒子模型
1.border(边框):设置所有的边框属性
1)可同时设置边框的宽度、样式、颜色。
border: 颜色 样式 宽度(顺序无要求)
例:border: red soild 1px
2)使用border-width、border-style、border-color单独设置。
3)设置是否将表格边框折叠为单一边框。
属性值: border-collapse(单元格边框合并)、border-separate(默认,单元格边框独立)
2.padding(内边距(会使元素变形)):设置元素所有内边距的宽度,或者设置各边上内边距的宽度。
例: { padding:15px;}
1)如果在表的内容中控制文本到边框的内边距,使用td和th元素的填充属性:
td{
padding: 15px;
}
2)单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right
(默认按照上、右、下、左的顺序设定)
(设置一个值:上右下左都一致。 设置两个值:上下一致、左右一致 设置三个值:上右下,则左和右一致)
3.margin(外边距)
例:{ margin:100px;}
1)设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
2)单独设置各个边的外边距:margin-top、margin-left、margin-bottom、margin-right
(默认按照上、右、下、左的顺序设定)
(设置一个值:上右下左都一致。 设置两个值:上下一致、左右一致 设置三个值:上右下,则左和右一致)
(auto:自动,可以理解为居中的意思,浏览器自动计算外边距。)
{margin: auto auto;}(第一个auto表示上下边距自动计算,第二个auto表示左右边距自动计算。
注意:但是上下边距自动计算不会生效,只有左右生效,表现为居中状态)