CSS基础

1、类标签和id标签的区别？

类选择器在修改样式中用的最多，并且可以多次使用；id选择器一般用于页面唯一性的元素上，经常和JS搭配使用。

2.CSS字体属性？

font-family定义字体系列
font-size定义字体大小，标题标签需要单独指定文字大小
font-weight定义字体粗细，700=>bold 400=>normal
font-style定义字体风格，normal标准字体样式 italic斜体

3.CSS文本属性？

color定义文字颜色
text-align定义文本内容的水平对齐方式
text-decoration定义添加到文本的修饰 underline添加下划线 none删除下划线
text-indext定义文本内容第一行的缩进 2em表示缩进当前元素2倍文字大小的距离
line-height定义行高 会继承

4.CSS的复合选择器？

后代选择器：所有后代 div a{}
子代选择器:亲儿子 div>a{}
并集选择器：为多组标签定义相同的样式 div,h2{}
伪类选择器：添加特殊的效果。
（1）链接伪类选择器：有顺序 link visited hover active a:hover{}
（2）focus伪类选择器:为获得焦点的表单元素修改样式 input:focus{}

5.CSS元素的显示模式？

块元素： <h1>-<h6> <p> <div> <ul> <ol> <li>
行内元素： <lable> <a> <span> <strong> <b>
行内块元素： <img> <input> <textarea>

6.CSS的背景

background-color background-image background-repeat background-position background-attachment（图片是否固定）
background-size 规定背景图片的尺寸 background-size:63px 100px;
background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域

7.CSS的三大特定？

（1）层叠性：就近原则
（2）继承性：text- font- line- color cursor 这些样式会被继承
（3）优先级：当同一个元素指定多个选择器，就产生了优先级
根据选择器权重大小来选择样式
!important 无穷大 > 行内样式style 1000 > id 100 > 类 10 > 元素 1 > 继承和* 0

盒子模型

8.盒子模型

（1）边框
content-box盒子模型中border会影响盒子大小
注意层叠性 border:1px solid blue;border-top:1px solid blue;
（2）内边距
content-box盒子模型中padding会影响盒子大小
典型应用：当导航栏里面每个栏的字数不一样时，可以给盒子的左右设置padding值，使撑开盒子，而不给盒子宽度。
（3）外边距
content-box盒子模型中margin不会影响盒子大小
典型应用：外边距可以让块级盒子水平居中

9.外边距合并/塌陷

外边距塌陷也称为外边距合并，是指两个在标准流中相邻（兄弟或父子关系）的块级元素的外边距组合在一起变成单个外边距。不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题
（1）兄弟关系
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

解决办法：只给一个盒子添加margin值
（2）父子关系
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，则父元素会有外边距，且合并后的外边距为两者中的较大者，子元素会紧贴父元素。即使父元素的上外边距为0 也会发生合并

解决方法：1、可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; padding: 1px;
2、可以为父元素添加 overflow:hidden；
3、脱离标准流。 float: left； position: absolute；
4、子元素的margin-top改为padding-top

10.圆角边框

border-radius:50%;
border-top-left:15px;（顺序不能变）

11.阴影的添加

（1）盒子阴影

div:hover{
    box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
}

（2）文字阴影
text-shadow

浮动

12.浮动的特点？

浮动脱离了标准流，具有行内块元素的特性，不过浮动盒子间无缝隙。
一浮都浮
纵向排列找标准流，横向排列找浮动

13.清除浮动

当父元素无高度，并且子盒子浮动了，父盒子影响了下面的布局，此时需要清除浮动。方法有：
（1）额外标签法：隔墙法，在浮动元素后面添加空的块级元素
（2）给父元素添加overflow属性
（3）给父元素添加伪元素。其实也是隔墙法，但是结构上不需多加标签，空盒子由CSS生成。

定位

13.定位的类型和特点

相对定位<=>粘性定位 都占有原来的位置
绝对定位<=>固定定位 都不占有原来的位置
定位的盒子会出现重叠的情况，可以用z-index控制盒子的前后次序。

14.行内块元素之间为什么会有空白？怎么消除？

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
（1）父元素中设置font-size: 0，在子元素上重置正确的font-size

    .container {
      width: 800px;
      height: 200px;
      font-size: 0;
    }

    .container .one,
    .container .two {
      width: 200px;
      height: 200px;
      display: inline-block;
      font-size: 14px;
    }

（2）为子元素设置float:left