1.块级元素与行内元素分别有哪些?动手测试并列出4条以上的特性区别
-
块状元素列表
-
行内元素列表
-
可变元素列表
-
块级元素的特点
1.总是独占一行,默认情况下,其宽度自动填满其父容器的宽度;
2.块级元素可以设置width,height属性;
3.块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性； -
行内元素的特点
1.行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
2.行内元素的width、height属性则无效；
3.行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。详细可以参考相关讨论 -
块级元素与行内元素的主要区别
1.块级元素各占据一行,且会另起一行,而行内元素会在同一行水平方向排列,这是行内元素与块级元素直观上的区别;
2.块级元素可以包含行内元素和块级元素;
3.块级元素可以设置width,height,而行内元素则不能设置width,height,行内元素是由其内容决定宽度和高度,因此无法设置宽度和高度;
4.块级元素只能包含文本和块级元素;
行内(inline-level)元素与块级(block-level)元素的css相关属性是display
-
相关联的几点总结
1.display:inline 对应不显示为 display:none
2.display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。 -
Visibility:none 和 Display:hidden 的区别是：
1.visibility:visible（元素可见，默认值）
2.visibility:hidden（元素不可见，但仍然为其保留相应的空间）
display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
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。
3.如何让块级元素水平居中？如何让行内元素水平居中?
- 块级元素居中语法：margin：0 auto；
- 行内元素水平居中：text-align：center；
4.单行文本溢出加.......如何实现？
要使得单行文本溢出可采取以下代码
·
E{
white-space:nowrap; /强制在同一行内显示所有文本， 直到文本结束或者遭遇br对象。/
overflow:hidden; /隐藏溢出/
text-overflow;ellipsis;;/*当对象内文本溢出时显示省略标记（...）。 */
}
·
5.px, em, rem 有什么区别
- px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
-
em ：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- em的值并不是固定的；
- em会继承父级元素的字体大小。
-
rem ：是CSS3新增的一个相对单位（root em，根em）使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
`
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
-
代码作用`
- 设置默认字体大小为12px，字体行高1.5，字体样式（优先级依次递减）
-
为什么要加引号？
- 当字体名字为中文时，需要加引号
- 当有多个英文单词，空格隔开的字体名字，需要加引号
-
字体里..代表什么？
- 代表字体的Unicod码，Unicode码全球通用，用该码表示字体是最保险的，获得该码的方式可以在网上查找，或者在开发者工具中输入escape指令。
- \5b8b 为Unicode的“宋”，\4f53 为Unicode的“体”，合起来即为宋体。
网友评论