1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别
常见块级元素
div h1 h2 h3 h4 h5 h6 hr p form ul ol dl li dd dt hr pre table tr td th fieldset address menu
常见行内元素
b, big, i, small, tt,abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var,a, bdo, br, img, map, object, q,script, span, sub, sup,button, input, label, select, textarea
行内元素与块级元素的特性
内容:行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
格式:多个行内元素会并列一行,不会另起一行;而块级元素会占据整行空间。
块级元素有可设置宽高 ,行内元素无宽高,只显示默认元素内容。
块级元素可以设置内外边距 ,而行内元素设置纵向内外边距无效,可以设置横向外边距。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递
2.什么是 CSS 继承? 哪些属性能继承,哪些不能?
css继承:父元素设置样式后,子元素的样式与父元素样式相同。
可继承元素:列表相关(list),文字相关(font),文本相关(text)具体如下:
- 字体属性:font-weght、font-size、font-family...
- 文本属性:text-indet(字体缩进)、text-align、line-height、word-- spacing、letter-spacing、text-transform(文本缩放)、color
- 元素可见:visibility
- 表格属性:caption-side、border-collapse、border-spacing、empty-- - cells、table-layout
- 列表属性:list-style-type、list-style-position...
- 生成内容属性:quotes
- 光标属性:cursor
不可以继承的属性: - 文本:vertical-align、text-decoration、text-shadow、white-space(空白符处理)、unicode-bidi(文本方向)
- 盒模型:width、height、margin、padding、border
- 所有的背景属性
- 定位属性:float、clear、position、right、left、top、bottom、overflow、z-index、min-width、min-height、
- 声音样式属性
3.如何让块级元素水平居中?如何让行内元素水平居中?
块级元素居中:设置宽度后,marging:0,auto;
行内元素居中:使用代码:text-align:center
4.用实现一个三角形?
CSS形状大全
5.单行文本溢出加 ...如何实现?
white-space: nowrap; /*文本空间,不折叠,不换行*/
overflow:hidden;/* 超容器出部分,隐藏*/
text-overflow:ellipsis; /*文本超出部分,用省略号代替*/
6.px, em, rem 有什么区别?
px:像素,固定宽度
em:相对单位,相对于父元素的字体大小
rem: 相对于网页根元素的字体大小
7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
设置字体大小12px,行高1.5,字体取值依次是 tahoma,arial,Hiragino Sans GB,宋体,sans-serif;
当文字是中文时,会加引号,Hiragino Sans GB不加引号会被识别成多个元素;
\5b8b\4f53是Unicode码, 宋体,使用unicode是因为直接写成中文,有的电脑里没有对应中文字体的字体文件,所以统一写成Unicode码,便于浏览器解析加载网页