内容简介:代表内联样式,如style="xxx",权值为 1000;代表 ID 选择器,如#content,权值为 100;代表类、伪类和属性选择器,如.content、:hover、[attribute],权值为 10;
选择器的权重和优先级
-
选择器的类型:
- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div, h1, p)
- 相邻选择器(h1 + p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(a[rel="external"])
- 伪类选择器(a:hover, li:nth-child)
权重分为四级:
代表内联样式,如style="xxx",权值为 1000;
代表 ID 选择器,如#content,权值为 100;
代表类、伪类和属性选择器,如.content、:hover、[attribute],权值为 10;
代表元素选择器和伪元素选择器,如div、p,权值为 1。
需要注意的是:通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为 0。 权重值大的选择器其优先级也高,相同权重的优先级又遵循后定义覆盖前面定义的情况。
盒模型
- 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
- 低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin
box-sizing属性:
- content-box:一个标准模式下的盒模型的计算方式
- border-box:一个怪异模式下的盒模型的计算方式
div设置了box-sizing:border-box之后,width的宽度是内容 + padding + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。
浮动float
float被设计出来的初衷是用于文字环绕效果,即一个图片一段文字,图片float:left之后,文字会环绕图片.
float 的破坏性 —— float 破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。
清除浮动
.clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom: 1; /* 兼容 IE 低版本 */ } <div class="clearfix"> <img src="image/1.png" style="float: left"/> <img src="image/2.png" style="float: left"/> </div>
如何实现水平居中
inline元素使用
text-align: center
block元素使用
margin: auto
绝对定位元素可结合left和margin实现,但是必须知道宽度。
.item { width: 300px; height: 100px; position: absolute; left: 50%; margin: -150px; }
如何实现垂直居中
inline 元素可设置line-height的值等于height值,如单行文字垂直居中:
.container { height: 50px; line-height: 50px; }
绝对定位元素,可结合left和margin实现,但是必须知道尺寸。
- 优点:兼容性好
- 缺点:需要提前知道尺寸
.container { position: relative; height: 200px; } .item { width: 80px; height: 40px; position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; }
绝对定位可结合transform实现居中。
- 优点:不需要提前知道尺寸
- 缺点:兼容性不好
.container { position: relative; height: 200px; } .item { width: 80px; height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: blue; }
绝对定位结合margin: auto,不需要提前知道尺寸,兼容性好
.container { position: relative; height: 300px; } .item { width: 100px; height: 50px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
移动端的布局用过媒体查询吗?
- <head>里边<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
- CSS : @media only screen and (max-device-width:480px) {/css样式/}
css动画
首先,使用@keyframes定义一个动画,名称为testAnimation,如下代码,通过百分比来设置不同的 CSS 样式,规定动画的变化。所有的动画变化都可以这么定义出来。
@keyframes myfirst { 0% {background: red; left:0; top:0;} 25% {background: yellow; left:200px; top:0;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0; top:200px;} 100% {background: red; left:0; top:0;} }
然后,针对一个 CSS 选择器来设置动画,例如针对div元素设置动画,如下:
div { width: 100px; height: 50px; position: absolute; animation-name: myfirst; animation-duration: 5s; }
以上所述就是小编给大家介绍的《前端面试CSS》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
BSD Hacks
Dru Lavigne / O'Reilly Media, Inc. / 2004-05-24 / USD 24.95
If you want more than your average BSD user--you want to explore and experiment, unearth shortcuts, create useful tools, and come up with fun things to try on your own--BSD Hacks is a must-have. This ......一起来看看 《BSD Hacks》 这本书的介绍吧!