背景
-
常用背景属性
background-color设置元素的背景颜色
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background简写属性，作用是将背景属性设置在一个声明中。
简写顺序：color image repeat attachment position; -
h5新增属性
background-size:px | % | cover | contain;background-size: 50px;
输入一个值，对应的值等比例缩放
background-size: 50px 150px;
输入两个值，不成比例，图片将被拉伸
background-size: cover;
cover使图片填充整个页面 不顾图片的展示效果。把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size: contain;
contain使整个图片按比例完全显示在页面内。把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域background-clip: border-box|padding-box|content-box;
background-clip:border-box;
背景被裁剪到边框盒
background-clip: padding-box;
背景被裁剪到内边距框
background-clip: content-box;
背景被裁剪到内容框。线性渐变line-gradient
-
径向渐变radial-gradient
边框/轮廓
-
常用边框属性
border-width规定边框的宽度。
border-style：dotted | solid | double | dashed; 规定边框的样式。
border-color规定边框的颜色。
border简写属性，顺序：border-width border-style border-color -
新增边框属性
border-radius: 1-4 length|% / 1-4 length|%;
“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径 -
轮廓
outline-color设置轮廓的颜色。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。
outline-offset: length|inherit;轮廓与边框边缘的距离。
outline简写属性 -
border与outline的区别
1、outline是不占空间的，既不会增加额外的width或者height
2、outline有可能是非矩形的
3、border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计
4、outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。
文本
- 常用字体属性
font-family 设置字体系列。多个用逗号隔开
font-size 设置字体的尺寸。
font-style:normal(文本正常显示)|italic(文本斜体显示)|oblique (文本倾斜显示)
font-weight:bold|bolder|normal|lighter|100~900整数 设置字体的粗细
line-height 设置行高
font简写属性顺序： style weight size/line-height family
-
常用文本属性
color设置文本颜色
direction设置文本方向。
line-height设置行高。
text-align对齐元素中的文本。
vertical-align:top|middle|bottom。
text-decoration：none|underline(下划线)|overline(上划线)|（line-throung）|blink(闪烁） 添加修饰。
text-indent缩进元素中文本的首行
letter-spacing设置字符间距。
word-spacing设置字间距。
white-space设置元素中空白的处理方式。 -
h5新增文本属性
text-shadow：h-shadow v-shadow blur color;
word-wrap:normal|break-word;
盒阴影
-
box-shadow
语法：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
颜色透明
-
rgba
background: rgba(颜色值,颜色值,颜色值,透明度);
-
opacity
background: rgb(颜色值,颜色值,颜色值);
opacity: 0~1; -
区别
相同之处就是背景色完全是一样的
RGBA设置透明度可以不影响其他的元素属性,opacity影响
列表
- 列表常用属性
- list-style-type:disc(实心圆点)|square（方块）|circle（空心圆点）|none
- list-style-image:url(引入图片的路径)
- list-style-position:inside|outside
- list-style简写属性顺序：type position image;
表格
- 表格常用属性
- border-collapse：
separate默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse如果可能，边框会合并为一个单一的边框.会忽略 border-spacing 和 empty-cells 属性。 - border-spacing设置分隔单元格边框的距离。
- caption-side设置表格标题的位置。
- empty-cells设置是否显示表格中的空单元格。
- table-layout设置显示单元、行和列的算法。
- border-collapse：
