什么是 CSS 继承?哪些属性能继承,哪些不能?
提示:写个demo来说明
继承就是子元素继承了父元素的CSS样式的属性。
优先级从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。
对继承的元素来说,子元素自身的样式优先级高于从父级继承来的样式。
当元素的一个 继承属性没有指定值时,则取父元素的同属性的计算值,只有文档根元素取该属性的概述中给定的初始值(这里的意思应该是在该属性本身的定义中的默认值)。
当元素的一个 非继承属性 没有指定值时,则取属性的初始值该值在该属性的概述里被指定。
什么属性能继承?
1.字体:family,size,weight,line-height
2.文本:letter-spacing,word-spacing,text-align, text-indent
3.列表:list-style-type
4.颜色:color,ps:a标签不能继承父元素的字体颜色,原因是a标签自己有默认字体颜色,会覆盖掉- 继承自父元素的字体颜色;
什么属性不能被继承?
1.display
2.float
3.padding和margin
4.背景相关,比如颜色图片等
不可继承的: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
范例:
image
块级元素和行内元素分别有哪些?
提示:列出4条以上的特性区别
行内元素:只占据它对应标签的边框所包含的空间的元素。默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
inline元素举例:em strong span a br img button input label select textarea code script 等
块级元素:占据其父元素(容器)的整个空间,因此创建了一个“块”;通常浏览器会在块级元素前后另起一个新行。
block元素举例:div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th等
block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
两者区别:
块级可以包含块级和行内,行内只能包含文本和行内。
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
inline元素设置width,height属性无效。(部分替换元素(replaced elements)例如img是可以设置宽高)
block元素可以设置margin和padding属性。
inline元素padding,margin上下的值设置无效,但左右有效;
inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
如何让块级元素水平居中?如何让行内元素水平居中?如何让 inline-block 元素水平居中?
块级元素:
设置margin: 0 auto(实际为:margin: 0 auto 0 auto)可达到居中目的。一个有特定宽度的元素,若左右边距为auto,浏览器会取它的容器和该容器的宽度之差,除以2,作为该元素的左边距和右边距,左右边距相等,就实现了居中。
行内元素:
需要通过父容器实现,给父元素添加text-align:center,此时父元素必须是块级元素
inline-block元素:
用display: block将元素显示为块级元素,再给添加样式margin: 0 auto 0 auto
inline-block也可以对其父元素使用 text-align:center。
单行文本溢出加 ...如何实现?
在css对应部分添加样式
white-space: nowrap:让该行不换行
overflow: hidden:隐藏多余的
text-overflow: ellipsis;变成 ...
px, em, rem,vw 有什么区别
px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
特点:
IE无法调整那些使用px作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
em特点
em的值并不是固定的;
em会继承父级元素的字体大小。
注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
所以我们在写CSS的时候,需要注意:
body选择器中声明Font-size=62.5%;
将你的原来的px数值除以10,然后换上em作为单位;
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
rem
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
vw
相对于视区(浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小)的宽度。视区被均分为100单位的vw。
h1 {
font-size: 8vw;
}
/* 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 */
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
参考:http://www.runoob.com/w3cnote/px-em-rem-different.html
解释下面代码的作用? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
对象为body元素;
设置字体的大小是12px,行高是字体大小的1.5倍,浏览器查找用户本地的字体库,依次选择(优先级从高到低):tahoma字体,arial字体,Hiragino Sans GB字体,\5b8b\4f53\,sans-serif。
\5b8b\4f53为Unicode码,代表宋体。使用unicode码是为避免兼容性。
小技巧:在浏览器页面审查元素,点Console,输入escape('黑体/宋体```')来转换成unicode码。
问题
实现如下效果