1.块级元素和行内元素分别有哪些?
- 区别1
块级元素可以包含块级元素和行内元素;行内元素只能包含文本和行内元素 - 区别2
块级元素独占一行,行内元素只占据自身宽度空间; - 区别3
块级元素可是设置过宽高,行内元素不能设置宽高 - 区别4
块级元素可以设置margin,padding,行内元素只能设置水平的margin,padding,竖直方向的不生效
2.什么是 CSS 继承? 哪些属性能继承,哪些不能?
CSS继承指的是特定的CSS样式向下传递到子孙元素。
- 不可继承的特性
不可继承的: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。
引用自:css中可以和不可以继承的属性 by四眼闷
3.如何让块级元素水平居中?如何让行内元素水平居中?
- 块级元素居中
.box{
margin-left:auto;
margin-right:auto;
}
- 行内元素水平居中
.box{
text-align:center;
}
4.用CSS实现一个三角形
对块级元素设置宽高为0,设置上下左右border为不同颜色,或透明,可组合出不同样式三角形,调整border像素设置,可调整三角形的大小;
5.单行文本溢出...的实现方法
white-space:nowrap ——显示不下的元素,不进行换行
overflow:hidden ——溢出的元素隐藏
text-overflow:ellipsis ——超出的部分用…代替
6.px,em,rem有什么区别
- px
固定单位,按照像素来设置大小 - em
相对单位,是相对于父元素字体大小的相对值,2em为两倍 - rem
相对单位,是相对于字体大小的相对值;
7.解释下面代码作用
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- font-size:12px;
- line-height:1.5;
- font-family:tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
字体样式写多个,是为避免浏览器上找不到该字体,而做的备选,如果找不到前面的字体会选择后面列的字体;
字体的样式,同一种有多种表达方法,加引号的目的是为了把单词联系在一起,表明一个完整的字体样式;
后面的数字字符,是直接把字体样式转换为了unicode码