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的“体”,合起来即为宋体。