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码
