css的使用

font连写

font-style设置文字是否倾斜

font-weight设置文字是否加粗

font-family设置文字类型，例如宋体

文字连写格式：{font：font-style font-weight font-size font-family}

例如：p{font：normol 700 20px "宋体"}

text-decoration 设置文本划线位置（a标签一般会去掉下划线）

underline 设置下划线  overline  设置上划线   line-through设置贯穿线   none设置无划线

text-indent设置文本缩进

常用于段落开始的两个空格，例如：text-indent：2em

链接伪类的设置，a:link  未访问的链接   a：visited   已访问的链接    a：hover   鼠标悬浮在链接上     a：active   选定的链接

例如

a{
   font-size:20px;
   color:#333;
   text-decoration:none;
}

a:hover{
   color:#FF6700;
   text-decoration:underline;
}

选择器的权重问题

标签选择器：0，0，0，0

类/伪类： 0，0，0，1

ID选择器：0，1，0，0

行内样式：1，0，0，0

判断权重是根据所有的类型相加，根据大小比较进行判断

块元素，以及行内元素，行内块有些之间是可以转换的

display：inline  将标签转为行内元素

display：block  将标签转为块元素

display：inline-block  将标签转为行内块

display：none  隐藏元素

边框

border:1px solid red 设置边框

border-radius：50px   圆角边框使用（这里的50px也可以使用百分比的方式进行）

border-radius：左上 右上 右下 左下

内边距

padding 设置内容与边框之间的距离

padding：20px 内容与四个边的距离为20px

外边距

margin 设置上下左右边框之外的距离

如果想要盒子居中，则使用左右外边距设置auto即可

例如：margin:20px auto;

盒子大小计算

宽度=内容宽+padding+border

高度=内容高+padding+border

计算宽度时，不算margin（有的情况下，margin会塌陷）

box-sizing：指定计算盒子宽高的方式，有两个可选值content-box（默认）和border-box

当设置为border-box时，width和height就是最终宽高，不再受padding影响

外边距塌陷

同一列上下两个元素相邻，并且上有margin-bottom，下有margin-top时，就会发生塌陷，塌陷后的margin取最大值

父子嵌套后的margin也取最大值

盒子阴影

box-shadow： 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

列表样式

列表样式是针对ul-li/ol-li设置的样式，主要作用：去除原点或者序号

list-style-type | list-style|image |list-style

list-style-image 使用图片代替圆点

示例：list-style-image：url（图片路径）

list-style：既能设置圆点样式，又能设置图片样式

示例：list-style：none；list-style：url（image/camera.jpg);

块元素是从上向下的顺序进行排列

行内元素是按照从左到右的顺序排列（碰到父元素边缘则自动换行）

浮动

浮动的目标就是让 一行容纳多个盒子

float：left|right|none

浮动后，会把本来占据的空间让给下一个元素，元素浮动后，会被转换为类似行内块的元素