块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
块级元素:div h1~h6 p form ul ol dl li table
行内元素:span a img em br strong textarea button input script
区别:
1.块级元素可以设置宽高,而行内元素不行
2.块级元素会独占一行,行内元素会依次排列
3.块级元素内可以包含块级元素和行内元素，而行内元素只能包含文本和行内元素
4.块级元素可以设置上下内外边距,而行内元素不行
什么是 CSS 继承? 哪些属性能继承，哪些不能？
CSS继承是指子元素继承父元素的CSS属性。
可以被继承的属性
- 字体类型的属性:font-family font-size font-style等
- 文本系列的属性:text-indent text-align line-height text-transform direction color
- 元素可见 visibility
- 列表 list-style-type、list-style-image、list-style-position、list-style
- 光标属性cursor
不可被继承的属性
- display
- 文本 vertical-align text-decoration text-shadow
- 盒模型的属性 width、height、margin、padding、border
- 背景属性 background
- 定位属性 float、clear、position、top、right、bottom、left
- content、counter-reset、counter-increment
如何让块级元素水平居中？如何让行内元素水平居中？
- 块级元素水平居中:
margin:0 auto; - 行内元素水平居中:
text-align:center;
用 CSS 实现一个三角形
单行文本溢出加 ...如何实现?
white-space: nowrap; /*文本空间，不折叠，不换行*/
overflow:hidden;/* 超容器出部分，隐藏*/
text-overflow:ellipsis; /*文本超出部分，用省略号代替*/
px, em, rem 有什么区别
- px 像素 固定单位。相对于显示器屏幕分辨率而言。
- em 长度单位。是相对于其父元素的字体大小。
- rem 长度单位。始终基于根元素html。
解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- 代码的作用是设置body内字体大小为12px，行高1.5，字体类型为 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
- 有空格，不加引号会被识别成两个元素。
- '\5b8b\4f53'是Unicode码,代表宋体
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是控制行内元素内容相对于其父元素居中对齐;作用在块级元素和inline-block元素上;可以让行内元素水平居中。
IE 盒模型和W3C盒模型有什么区别?
W3C盒模型中的padding、border所占的空间不在width、height范围内;IE盒模型width包括content尺寸+padding+border。
* {box-sizing: border-box;}的作用是什么？
该属性是让当前页面所有的元素宽高属性都按照IE盒模型的方式来计算
line-height: 2和line-height: 200%有什么区别?
主要区别在元素的行高属性继承父元素时，如果父元素设置的是 line-height: 2，那么子元素的行高则为自身字体大小的两倍；如果父元素设置的是 line-height: 200%，那么子元素的行高则为父容器文字高度的两倍
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 当一个元素的display属性设置为inline-block时，那么该元素既表现出行内元素的特性（不占据一行，宽度由内容宽度决定），又具有块级元素的特性（可设置宽高，内外边距）
- 去处缝隙:
1.删除标签间的空白字符,元素标签之间不能有空格；
2.先设置父元素font-size：0，再设置自身字体大小。 - 顶端对齐:
可以设置vertical-align:top属性
CSS sprite 是什么?
CSS sprite 是一种网页图片处理方式。它的做法是把网页中的小图标都合并到一张大图片中，然后利用 background-position 属性选择合适的图片，这样在加载网页的时候可以减少图片的请求次数，从而提高网页的加载速度
让一个元素"看不见"有几种方式？有什么区别?
1.opacity: 0设置元素的透明度为0,但元素仍然占据原本的页面空间
2.visibility: hidden与opacity: 0类似,也依然占据空间
3.display: none 让元素消失，不占用页面位置
4.background-color: rgba(0,0,0,0) 设置背景色透明
css计算单位
em
em被定义为相对于当前对象内文本的字体大小，它是相对于父元素的font-size属性值来计算的。
如下，给body元素设置font-size字体大小，那么body的任何子元素的1em就等于body设置的font-size的字体大小
<body>
<div class="test">Test</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 2em;
}
此时div的字体大小是2em，也就是继承了body字体大小的2倍，结果就是28px。
rem
rem相对于根元素<html>的font-size属性值来计算的，不会像em那样，依赖于父元素的字体大小。
如下，根据上面所设置的CSS，每个div都继承了父元素字体大小，并逐渐增加
<body>
<div>
Test <!-- 16 * 2 = 32px -->
<div>
Test <!-- 32 * 2 = 64px -->
<div>
Test <!-- 64* 2 = 128px -->
</div>
</div>
</div>
</body>
发现字体变的越来越大，这时我们需要它们字体大小统一，就可以用到rem
html {
font-size: 16px;
}
div {
font-size: 2rem;
}
这样上面三个div的font-size字体大小就都是16*2=32px;
vh、vw、vm
vh和vw相对于视口的高度和宽度，1vh 等于1%的视口高度，1vw 等于1%视口宽度
比如：浏览器高度900px，宽度700px, vh=900px/100 = 9px，1vw=700px/100=7px；
vmin和vmix相对于视口高度和宽度两者的最小值或者最大值
比如：浏览器高度800px，宽度1000px；那么vmin=800px/100=8px，vmix=1000px/100=10px。
css颜色
颜色关键字
p {
background-color: blue;
}
RGB
p {
background-color: rgb(255, 255, 255);
}
十六进制
p {
background-color: #ffffff;
}
HSL
p {
background-color: hsl(276, 100%, 85%);
}
透明色
设置元素的背景颜色为透明
p {
background-color:transparent;
}
设置元素的透明度为0
<style>
opacity:0；
</style>
currentColor
currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。
div {
border: 1px solid;
color: red;
}
上述代码将会让div拥有一个红色的边框，这就解释了border-color属性的默认值是color属性的值；
如果将上述代码中的color属性定义删除，那么边框的颜色将取决于父元素的color计算值，因为color拥有继承性
