移动web面试题总结03

1.position 的值有哪些，分别有哪些作用？

静态定位：static 默认值 不脱离文档流

绝对定位：absolute 参照物：最近的一级带有带定位的父级元素；如果找不到，那么相对于浏览器窗口进行定位

相对定位：relative 参照物：元素偏移前位置

固定定位：fixed 参照物：浏览器窗口

2.为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

为什么会出现浮动？

让块级元素在一行显示并且无缝隙；让块级盒子一左一右进行显示。

浮动元素会引起什么问题？

1. 子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；

2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后；

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法

如何清除浮动？

1. 给父亲设置高度

2. 额外标签法（clear:both;标签添加在父元素内容的最后面,但是标签一定是块级元素）

3. 给父级元素设置单伪元素；

     .clearfix::after {
                       content: '';
                       display: block;
                       clear: both;
                        height: 0;
                       visibility: hidden;
               }
     /*兼容ie6 ie7*/
       .clearfix {
                       *zoom: 1
                   }

4. 给父级元素设置双伪元素；

    .clearfix::before,
               .clearfix::after {
                   content: '';
                   display: table;
               }
   ​
               .clearfix::after {
                   clear: both;
               }
     /*兼容ie6 ie7*/
         .clearfix {
                       *zoom: 1
                   }

5. 给父级元素设置 overflow：hidden；或 overflow：auto（本质是构建一个 BFC）

3.如何解决 margin“塌陷”？

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出现

第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

解决方案：

1、为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成 透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

.father::before {
 content:'';
 display:table;
}

4.::before 和 ::after 中双冒号和单冒号有什么区别、作用？

区别:

单冒号（:）用于 CSS3 的伪类

双冒号（::）用于 CSS3 的伪元素

作用：

::before 和 ::after 的主要作用是在元素内容前后加上指定内容伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次，并且只能出现在开始和末尾

伪类、伪元素优先级分别与类、标签优先级相同

5.CSS3 新增伪类，以及伪元素？

CSS3 新增伪类

p:first-of-type 选择属于其父元素的首个<p>元素

p:last-of-type 选择属于其父元素的最后<p>元素

p:nth-child(n) 选择属于其父元素的第 n 个子元素并且必须是<p>元素

p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素并且必须是<p>元素

p:nth-of-type(n) 选择属于其父元素第 n 个<p>元素

p:nth-last-of-type(n) 选择属于其父元素倒数第 n 个<p>元素

p:last-child 选择属于其父元素最后一个子元素的并且必须是<p>元素

p:target 和锚点链接一起使用

        URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素 (target element)

        :target 选择器可用于选取当前活动的目标元素

:not(p) 选择非<p>元素

:enabled 选中不在禁用状态下的表单控件

:disabled 选中禁用状态下的表单控件

:checked 选中 单选框或复选框被选中的元素

伪元素

::first-letter 将样式添加到文本的首字母

::first-line 将样式添加到文本的首行

::before 在某元素之前插入某些内容

::after 在某元素之后插入某些内容