1.1块级元素和行内元素分别有哪些？
- 块级元素
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
- 行内元素
em strong span a br img
button iput label select textarea
code script
1.2块级元素和行内元素区别
- 宽高的设置只对块级元素有效对行内元素是无效的
-
行内元素会在一条直线上排列，都是同一行，水平方向排列
块级元素各占据一行，垂直方向排列。 - 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
- 行内元素可以感受浮动元素的存在
- 行内元素设置上下margin,padding,border不占据空间。
2.1什么是 CSS 继承?
每一个元素都是文档树的一部分，除了最顶级的HTML元素，每个元素都有其对应的父级元素，每一个父级元素的CSS属性值都可以被应用到它的子元素中去。
2.2哪些属性能继承，哪些不能？
- 不可继承的：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
- 所有元素可继承：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。
3.1如何让块级元素水平居中？
margin: 0 auto;
3.2如何让行内元素水平居中？
text-align: center;
4.用 CSS 实现一个三角形
.trangle {
width: 0;
height: 0;
border-top:solid 20px transparent;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
border-bottom:solid 20px red;
}
5.单行文本溢出加 ...如何实现?
span {
white-space: nowrap;不折行
overflow: hidden;超出部分隐藏
text-overflow: ellipsis;显示省略号
}
6.px, em, rem 有什么区别?
- px: 固定单位
- em：相对单位，相对于父元素的字体大小（例如：父元素字体大小为12px，子元素如果设置字体大小为2em，则实际显示为父元素的2倍24px）
- rem 相对单位，相对于根元素（html）字体大小（方法与em相似，不过计算依据为根元素字体大小）
7.解释下面代码的作用?为什么要加引号? 字体里\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，宋体，sans-serif
为什么要加引号：如果不加引号Hiragino Sans GB会被按空格分隔成多个元素，加引号让其被视为为一个整体。
\5b8b\4f53：代表宋体的unicode码。可以通过浏览器的控制台使用unescape('%u5b8b%u4f53')来解码。
网友评论