CSS常见样式
2017-03-13 本文已影响0人
湖衣
1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
block-level
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
inline-level
em strong span a br img
button input label select textarea
code script
- 块级(block-level); 行内(内联、inline-level)
- 块级可以包含块级和行内，行内只能包含文本和行内
- 块级占据一整行空间，行内占据自身宽度空间
- 宽高设置、内外边距的差异
8.1.JPG
2.什么是 CSS 继承? 哪些属性能继承，哪些不能？
CSS继承是子标签继承了上级标签的CSS样式的属性。
- 所有元素可继承：visibility和cursor。
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
- 块状元素可继承：text-indent和text-align。
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
- 表格元素可继承：border-collapse。
- 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
3.如何让块级元素水平居中？如何让行内元素水平居中?
对于块级元素 设置 margin: 0 auto 可达到居中目的
/* margin: 0 auto; 实际上是下面两个起作用 */
margin-left: auto;
margin-right: auto;
}```
行内元素居中
```<style>
.box{
text-align: center;
}
</style>```
####4.用 CSS 实现一个三角形
http://js.jirengu.com/zuqabeyiqo/3/edit?html,css
[http://js.jirengu.com/zuqabeyiqo](http://js.jirengu.com/zuqabeyiqo)
####5.单行文本溢出加 ...如何实现?
```.card > h3{
white-space: nowrap;//设置文本内的空白，nowrap文本不会换行，直到遇到<br>标签为止
overflow: hidden;//设置当内容溢出元素框时发生的事情，内容会被修剪，并且其余内容是不可见的
text-overflow: ellipsis;//设置当文本溢出包含元素时发生的事情，ellipsis显示省略符号来代表被修剪的文本
}```
####6.px, em, rem 有什么区别。
- px像素（Pixel）是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
px特点:
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
- em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
- rem是[CSS3](http://www.html5cn.org/portal.php?mod=list&catid=16)新增的一个相对单位（root em，根em）。
三者区别如下：
px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
rem 的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数。
####7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
```body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}```
设置字体大小为12px，line-height为1.5，字体选用tahoma，没有则用arial，再没有则用Hiragino Sans GB，没有则用宋体，都没有则用sans-serif。
因为中间有空格，不加引号会被识别为两个元素。
字体里\5b8b\4f53代表Unicode码，译为宋体。
http://js.jirengu.com/noxuriqiho
.h-button{
display: inline-block;
padding: 8px 10px;
text-decoration: none;
color: #000;
border-radius: 3px;
cursor: pointer;
transition: all .3s;
}
.steal{
background-color: #009688;
color: #fff;
}
.yellow{
background-color:#ffeb3b;
}
.orange{
background-color: #ff9800;
}
.red{
background-color: #f44336;
color: #fff;
}
.green{
background-color: #4CAF50;
color: #fff;
}
.h-button:hover{
box-shadow: 0 10px 10px 3px #AAA;
}
/*当鼠标悬浮到div上方是，给div添加阴影*/
