css常见面试题

# css常见面试题

# box-sizing

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

box-sizing有两个值一个是 content-box，另一个是 border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。

# href和src区别

href和src

href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。

# position

relative仍占据文档流，只不过可以通过topleft更改位置，而absolute和fixed是直接脱离文档流

# HTML结构的语义化

标签语义化，就是指标签的含义。语义化主要目的是直观的认识标签(markup)和属性(attribute)的用途和作用，对搜索引擎友好，自然容易被搜索引擎抓取。

去掉或丢失样式的时候能够让页面呈现出清晰结构。
有利于SEO和搜索引擎建立良好沟通，爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发维护，语义化可读性。

# 清除浮动

一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的。

如果这个父元素相邻的元素是行内元素，那么这个行内元素会在父元素的区域内见缝插针，找到一块放得下的地方
如果是块级，那么设置这个块级元素的margin-top将会以这个父元素的起始位置作为起点
浮动元素并没有脱离正常的文档流，仍占据正常文档流空间

理解

浏览器解析到浮动的时，会将浮动元素脱离开原来的父元素像上层浮起，就像小河里的木板是浮在水面上和河底是不接触的。那么这个时候父元素相当于已经被拿空了，那么当然只会看到的一条线的情况了。所以必须记住要把浮起的木板再压下去，也就是清除浮动。

元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。

意义

原因：父盒子高度为0，子盒子不占位置。
清除浮动目的：让父盒子有高度。

# 方案一使用overflow

在父盒子上设置overflow： hidden；之后，父盒子具有的包裹性，就不会出现高度塌陷的问题了。(overflow:auto也可以)

开启BFC处理浮动，如何开启元素的BFC：

设置元素浮动：不能解决高度塌陷问题，反而致使高度塌陷
设置元素绝对定位：同上
设置元素为inline-block：能够解决高度塌陷问题，可是会致使父元素宽度丢失，不推荐使用这种方式
将元素的overfloat属性设置为一个非visible的值：推荐设置为hidden，这是开启BFC反作用最小的方式；可是这样会将溢出的内容隐藏，看状况采用

可是在IE6及如下的浏览器并不支持BFC，因此使用这种方式不能兼容部分浏览器。然而在IE6中虽然不支持BFC，但也具备另外一个隐含属性叫hasLayout，该属性的做用和BFC相似，开启方式也有多种，这里就不一一列举，直接介绍一个反作用最小的方式：将元素设置zoom : 1便可。具体代码以下：

.parent-box{   
   width: 200px;   
   background: gray;   
   border: 5px solid;   
   overflow: hidden;
   zoom: 1;}

# Overflow详解

当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性

属性	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）
hidden	溢出内容会被修剪，并且被修剪的内容是不可见的
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器会始终显示滚动条

# 方案二设置固定高度

给父级加高度(有的情况下适合)

# 方案三 clear:both

这样因为这个空的div并没浮动，因此能够撑开父元素高度，基本没有什么反作用

# clear

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

<div id="a">
        <div id="a1"></div>
        <div id="a2">1111</div>
        <div id="a3"></div>
</div>

    <style type="text/css">
        #a{
            
            border:1px solid red;
            background:orange;
        }
        #a1{
            float: left;
            background:blue;
            width:100px;
            height:1000px;
        }
        #a2{
            float: right;
            width:200px;
            height:1500px;
            background:grey;
        }

        #a3{
            clear: both
        }
    </style>

优缺点

优点：简单，代码少，兼容所有浏览器
缺点：增加页面的标签，造成结构的混乱

# 方案四 after伪类(万能清除法)

父级元素添加after伪类(比较通用);即给高度塌陷的父元素添加一个::after伪元素，并给这个伪元素设置必定的样式，来清除浮动。原理与第三种方法相似，但这样既解决了高度塌陷问题，又不会形成页面结构冗余，是目前最为通用的清除浮动的方法，推荐使用。

        #a{
            
            border:1px solid red;
            background:orange;
            zoom:1;//兼容低版本浏览器
        }
        #a:after{
            display:block;
            clear:both;
            content:"";
            visibility:hidden;
			overflow:hidden;
            height:0
        }

# 方案五 br标签清除浮动

br标签存在一个属性clear。这个属性就是可以清除浮动的利器，在br标签中设置属性clear，并赋值all，即能清除浮动。但这种方法与第二种同样，一样会使页面结构冗余。具体代码以下：

<body>
   <div class="parent-box">
   <div class="son-box"></div>
   <br clear="all" />  
   </div>
   <div class="another-box"></div>
<body>

# opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能： display : none修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见

← meta标签盒模型 →