css常见样式

问答

块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

常见的块级元素

• div
• h1~h6
• p
• hr
• form
• ul
• ol
• dl
• pre
• table
• li
• dd
• dt
• th
• tr
• td

常见的行内元素有:

• em
• strong
• span
• a
• br
• img
• button
• input
• label
• select
• textarea
• code
• script

二者的区别:

• 块级元素占据一行, 行内元素占据自身宽度空间
• 块级元素可以包含块级元素和行内元素; 行内元素只能包含行内元素和文本
• 块级元素可以设置宽高, 行内元素设置宽高无效(有例外)
• 块级元素的内外边距设置都有效, 行内边距只有左右边距设置有效

什么是 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

如何让块级元素水平居中？如何让行内元素水平居中?

块级元素水平居中:

{
margin: 0 auto;
}

行内元素水平居中:

{
text-align: center;
}

用 CSS 实现一个三角形

<style type="text/css"> .tri { width: 0; height: 0; margin: 0 auto; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid black; border-left: 50px solid transparent; } </style> <div class="tri"></div>

单行文本溢出加 ...如何实现?

{
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 的字体大小, 行高, 字体
如果字体中名称中有空格, 要添加引号, 表示是一种字体, 不然会引起浏览器错误的解释.
宋体的unicode码

代码
效果1
效果2
效果3
效果4
效果5