html/css

1.水平、垂直居中的几种方法。

2.块级、行内元素的区别?

(1)占行,块级元素独占一行,行内元素跟其他的行内元素共用一行。

(2)width & height,块级可以设置width、height,行内元素则无效,宽高由内容决定,高度可通过line-height调节。

(3)margin、padding,行内元素只有margin或padding-left、-right有效,padding-left或right会改变元素范围,但不会对其他元素造成影响。

(4)行内元素无效属性,overflow和vertical-align。

(5)包含,块级元素可包含块级或者行内元素,行内元素包含文本或行内元素。 

3.清除浮动的几种方法,推荐第一种

1.给父级加一个通用的类以及一个伪类,room:1为了解决IE下浮动
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfix{zoom:1} 
2.父级的overflow:hidden/auto
3.父级设置display:table
4.加一个空的div,设置clear:both    

4.css选择器优先级以及性能优化

css大小写不敏感。

优先级由高到低排序:

important > 行内style > id > 伪类、属性(eg:nth-child()、:nth-of-type()、[type=text])> 类 > 标签 > 通用 > 浏览器自定义或继承

优化:

(1)避免使用通配符;

(2)不使用标签名修饰类名或id名称;

(3)减少使用后代选择器,意味着减少规则去匹配的时间,将选择器的深度降到最低;

(4)利用继承性。

效率由高到低排序:

1.基本选择器,id、class、标签、*通用选择器;
2.组合选择器,‘div p后代’、‘div>p子(直接子元素,不包括子的后代)’、‘div~p 同级(div之后的所有同级p)’、‘div+p相邻(div之后的第一个同级p)’;
3.属性选择器,‘[title](带有 title 属性的所有元素)’,input[type="text"]
4.伪类选择器,:hover  :active  :focus  :first-child :checked :enabled :nth-child(n) :nth-of-type(n)

详解:nth-child(n)与:nth-of-type(n)的区别

xx:nth-child(n)选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 要同时满足两个条件:

1.第N个元素;

2.是xx标签。

xx:nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。 html结构如下:

<ul> 
    <div>pppppp</div> 
    <li>1111111</li> 
    <li>2222222</li> 
    <li>3333333</li> 
</ul>

 例子1

li:nth-child(2){
    background: red;
}  //"<li>1111111</li>"会变为红色
li:nth-of-type(2){
    background: red;
}  //"<li>222222</li>"会变为红色

 例子2

li:nth-child(1){
    background: red;
}  //无红色
li:nth-of-type(1){
    background: red;
}  //"<li>1111111</li>"会变为红色

 总结::nth-of-type(n)更严谨。

5.viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

(1)像素与分辨率:分辨率指一定长度范围内有多少像素。长度固定时,分辨率越高越清晰。大屏幕手机分辨率低时,每个像素所占的物理单位变大,会导致实际显示的元素变大。

(2)viewport含义:指设备的屏幕上用来显示我们网页的区域。

(3)width取值:当width取值大于屏幕的分辨率时,会出现滚动条,默认为980;小于时,页面按照实际分辨率。只设置width,height等比例缩放。

用document.body.clientWidth/clientHeight、document.body.offsetWidth/offsetHeight可获取viewport设置的宽高。
用window.screen.width/height、window.screen.availWidth/availHeight可获取屏幕实际的分辨率。

(4)initial-scale、maximum-scale、minimum-scale、user-scalable分别表示初始、最大、最小、用户调整缩放,当user-scalable=no时,max-和min-无效。

 

 

 

posted @ 2016-12-06 18:33  简惬  阅读(260)  评论(0编辑  收藏  举报