背景
背景 border-radius:5px 圆角
background-color:#fff; 背景色
background-image:url(./img.jpg); 背景图(默认平铺)
背景平铺 repeat
background-size:
covor等比例放大图片有部分不能显示、
contain等比例缩放,只要一个方向满足平铺,就停止播放
缩写
Background:背景图片链接平铺 平铺设置 图片显示位置
background-repeat:repeat-x/no-repeat; 背景图平铺
background-attachment:scroll/fixed 随滚动条动固定
background-position:bottom/center/top 10px 10px; 背景图定位
backgroung:#fff url(img.jpg) no-repeat center; 颜色背景图平铺定位
opacity:0.4;/filter:alpha(opacity=40); img透明度
缩写backgroung:(UR)no-repeat l eft top;
文字
color:red;
text-align:left/center/right; 水平对齐 vertical-align:top; 垂直对齐
line-height:50px; 垂直居中行高:50px
text-decoration:underline/overline/linethrough/none; 下划线
text-indent:40px; 首行缩进(标签内部继承)
text-transform:uppercase/lowercase/capitalize; 大写小写首字母大写
text-shadow:10px 10px 10px red; 水平垂直模糊颜色文字阴影
letter-spacing:-1px;字符间距
字体
字体
font-family:'微软雅黑' 字体通用
font-size:12---14px (一般常用) 字体大小通用 font-size:0; 子元素无间隔
font-weight:normal/bold; 加粗
font-style:normal/italic; 倾斜cursor:wait;鼠标放上光标等待
font:14px/20px '微软雅黑' 字体大小行高字体
列表
列表
list-style-type:circle/square/none; 无序列表标记
list-style-type:upper-roman/lower-alpha; 有序列表大写罗马小写英文
list-style-image:url('./a.jpg'); 列表标记图
list-style:square url("sqpurple.gif"); 形状 [图片]
边框
边框
box-sizing:border-box; 盒子尺寸不变
border-top-10px; 边框宽度
color:red; 边框颜色
style:solid/dashed/dotted;实线虚线点线
border-top:10px solid red; 宽线色 border-right/-bottom/-left:
border:10px solid red; 边框
border-radius:10px; 圆角边框
border-collapse:collapse; 合并表格边框
内间距
padding-top:10px; padding-right/-bottom/-left:
padding: 上右下左上(左右)下 (上下)(左右)
外间距
margin-top:10px; margin-right/-bottom/-left:
margin:50px(上下) auto;(左右)50 左右居中
.clearfix before:{content:"";display:table} 清除m-top父标签塌陷