显示与隐藏
1.文本:(颜色,水平位置,垂直位置,首行缩进,下划线)
color: black //前景色(文字颜色)
text-align:center;/left;right;center;justify; //设置文本内容水平对齐方式
height: 50px; //搭配使用,行高等于高度,垂直居中
line-height: 50px/24px;//行高,设置文本的最小行高,元素中每一行文字所占据的高度,两行文字基线(baseline)之间的间距
vertical-align: middle;//设置元素的垂直对齐方式,只针对行内元素或行内块元素(img)
baseline;bottom;text-bottom;top;
text-indent: 2em; //首行缩进,设置第一行内容的缩进,1em就是一个汉字的宽度
text-decoration:none;underline;overline;line-through //设置文字的装饰线
text-shadow: //给文字添加阴影效果
direction:
letter-spacing
word-spacing:
text-transform:
white-space:
2.字体:(大小,字体,粗细,倾斜)
font: font-style font-variant font-weight font-size/line-height font-family
font-size: 16px;2em(200%) //文字大小,16px为默认
font-family: “宋体”;/Arial,“Microsoft YaHei”,“黑体”; // 设置字体,多个字体
font-weight:normal(400);bold(700) //用于设置文字的粗细(重量)
font-style: normal;italic;oblique //设置文字的常规、斜体显示
font-variant: normal;small-caps; //影响小写字母的显示形式.small-caps将小写字母替换为缩小过的大写字母
3.背景:(背景颜色,背景图片,背景透明,背景平铺,背景位置,背景滚动)
background: url(“images/beer.png”) center center/150px 250px no-repeat #f00
image position/size repeat attachment color
background: rgba(0,0,0,0.3) //背景半透明,最后一个参数Alpha透明度,取值0~1之间
background-color: #000000;transparent;//透明色
background-image: url(“bg001.png”);
background-repeat: repeat;no-repeat;repeat-x;repeat-y; //设置背景图片是否要平铺
background-size: auto;cover;contain;150px 180px; //设置背景图片的大小
background-attachment: scroll;fixed; //背景图片跟随元素关系,滚动/固定
background-position: 60px 80px; //设置背景图片在水平、垂直方向上的具体位置
: left;center;right;
: top;center;bottom;
: center top; //常用定位
background: linear-gradient(起始方向,颜色1,颜色2, …);
background: linear-gradient(left,red,blue); //背景颜色线性渐变
background: -webkit-linear-gradient(left,red,blue);
cursor:auto;default;pointer;text;none; //设置鼠标指针(光标)在元素上面时的显示样式
opacity: 0.2; /盒子半透明/
4.盒子模型:(宽高,边框线,外边距,内边距)
width: min-width;max-width;
height: min-height;max-height;
border: 1px solid #f00;1px solid transparent; //透明边框
border-width:1px;
border-style:none;dotted;dashed;soild;double;groove;ridge;inset;outset;
border-color: #fff;
border-radius: 50%; // 缩写属性,50%一个圆
border-radius: 15px 0 0 15px; //左上角 右上角 右下角 左下角
border-top-left-radius: 20px; //上左
border-top-right-radius: 20px; //上右
border-bottom-right-radius: 20px; //底右
border-bottom-left-radius: 20px; //底左
border-collapse:collapse; //相邻边框合并在一起
margin: //外边距, margin一般是用来设置兄弟元素之间的间距,左右外边距
padding: //内边距, padding一般是用来设置父子元素之间的间距
margin: 0 auto; //块级盒子水平居中,盒子须有宽度
text-align: center; //文字,行内元素,行内块水平居中
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset //可以设置一个或者多个阴影
box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
box-sizing: //用来设置盒子模型中宽高的行为
-
content-box; //padding、border都布置在width、heig