web前端面试之css（3）

目录

为什么要初始化CSS?

CSS的盒模型？

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

CSS3新增伪类举例：

CSS3有哪些新特性？

解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？ 

1BFC（Block Formatting Context） 是什么？应用？ 

讲讲 position float display 各有哪些取值，它们互相之间会如何影响？

如何实现浏览器内多个标签页之间的通信?

解释下浮动和它的工作原理？清除浮动的方法

CSS隐藏元素的几种方法（至少说出三种）

如何让一个盒子水平垂直居中

如何居中div？

position有哪些值？有什么作用？

css的重绘与回流

如何用css美化radio、checkbox等按钮样式？

如何处理浏览器兼容性问题？

怎么让Chrome支持小于12px 的文字？

---

为什么要初始化CSS?

CSS的盒模型？

盒模型：

1、W3C盒模型（标准盒模型）：盒模型的width与height只含content，不包括padding和border。

2、IE盒模型（怪异盒模型）：IE盒模型的width与height是content、padding和border的总和。

盒子模型组成：

margin（外边距）、border（边框）、padding（内边距）、content（内容）

margin、border、padding是CSS属性，content则是HTML元素的内容

盒子模型大小

盒子真正的宽和高按下面公式计算：

默认情况下width和height属性只是设置content（内容）部分的宽和高

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

  CSS 选择符：

1.   id选择器（ # myid）
2.   类选择器（.myclassname）
3.   标签选择器（div, h1, p）
4.   相邻选择器（h1 + p）
5.   子选择器（ul > li）
6.   后代选择器（li a）
7.   通配符选择器（ * ）
8.   属性选择器（a[rel = "external"]）
9.   伪类选择器（a: hover, li:nth-child）

哪些属性可以继承

1. 字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust
2. 文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
3. 元素可见性 visibility
4. 表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
5. 列表布局属性 list-style-type，list-style-image，list-style-position，list-style
6. 生成内容属性 quotes
7. 光标属性 cursor
8. 页面样式属性 page，page-break-inside，windows，orphans
9. 声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

  优先级：

1. 优先级就近原则，同权重情况下样式定义最近者为准；
2. 载入样式以最后载入的定位为准；
3. !important > id > class > tag；
4. important 比 内联优先级高，但内联比id要高；

CSS3新增伪类举例：

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

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

  p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

  p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

  p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

  :enabled :disabled 控制表单控件的禁用状态。

  :checked 单选框或复选框被选中。

CSS3有哪些新特性？

更详细的请见：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

  CSS3实现圆角（border-radius），阴影（box-shadow），

  对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

  增加了更多的CSS选择器 多背景 rgba

  在CSS3中唯一引入的伪元素是::selection.

  媒体查询，多栏布局

  border-image

解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？ 

  1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型， 宽度 = 内容宽度。 
  2. box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承 父盒子模型； 
  3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为 外边距塌陷。 
  4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。

什么是外边距合并？

当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

浏览器标准模式和怪异模式有什么区别？

两者的区别：

• 盒模型的解析上：
  在strict mode中 ：width是内容宽度
  在quirks mode中 ：width则是元素的实际宽度 ，而内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
• 图片元素垂直对齐方式
  在strict mode中 ：vertical-align 属性默认取值为 baseline
  在quirks mode中 ：vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。
• < table >元素中的字体
  Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。
• 内联元素的尺寸

在 Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。

• 元素的百分比高度

当一个元素使用百分比高度时，在 Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。

• 元素溢出的处理

在 Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容

 

1BFC（Block Formatting Context） 是什么？应用？ 

  1. BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。 
  2. 应用场景： 
  1. 解决margin叠加的问题 
  2. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。 
  3. 用于清除浮动，计算BFC高度。

讲讲 position float display 各有哪些取值，它们互相之间会如何影响？

div随屏幕大小改变 

overflow内容超出设置大小显示滚动条，不超出不显示

 

解释下浮动和它的工作原理？清除浮动的方法

  浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

  1.使用空标签清除浮动。

  这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

  2.使用after伪对象清除浮动

　该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

    #parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

  3.设置overflow为hidden或者auto

  4.浮动外部元素

CSS隐藏元素的几种方法（至少说出三种）

  Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
  Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
  Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
  Position:不会影响布局，能让元素保持可以操作;
  Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

如何让一个盒子水平垂直居中

//已知宽高
<div class="div1"></div>
<style>

    .div1{
        width:400px;
        height:400px;
        position:absolute;
        left:50%;
        top:50% 
        margin:-200px 0 0 -200px;    
    }   

</style>

//未知宽高
<!DOCTYPE html>
    <html lang="en">
        <head>    
            <meta charset="UTF-8">    
            <title>Document</title>    
            <style>
            .div1{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                border: 1px solid #000;
                width: 400px;
                height: 400px;        
            }    
            </style>
        </head>
        <body>    
            <div class="div1"></div>
        </body></html>

//未知宽高方法二：
<!DOCTYPE html>
    <html lang="en">
    <head>    
    <meta charset="UTF-8">    
    <title>Document</title>    
    <style>
      .div1{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border: 1px solid #000;
        width: 400px;
        height: 400px;        
      }    
    </style>
    </head>
<body>    
<div class="div1"></div>
</body>
</html>

如何居中div？

position有哪些值？有什么作用？

• static。默认值，不脱离文档流，top，right，bottom，left等属性不生效。
• relative。不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。
• absolute。脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。
• fixed。通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。

css的重绘与回流

重绘：当节点需要更改外观而不会影响布局。

回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。
常见的几何属性有width、height、padding、margin、left、top、border 或者是DOM节点发生增减移动。

减少重绘和回流的办法：

1. 使用css3新增属性：translate替代top等方向值。
2. 避免频繁使用style，而是采用class。

如何用css美化radio、checkbox等按钮样式？

https://www.haorooms.com/post/css_mh_ck_radio

如何处理浏览器兼容性问题？

https://blog.youkuaiyun.com/qq_36987708/article/details/107980698

怎么让Chrome支持小于12px 的文字？

移动端，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？

做法是：

针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！

<style>
pspan{
    font-size:10px;
    -webkit-transform:scale(0.8);
    display:block;
}
</style>
<p>
    <span>haorooms博客测试10px</span>
</p>

 什么是渐进式渲染 (progressive rendering)？

渐进式渲染是指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看，而是边下载边渲染，所以用户打开一个网页的时候往往不能第一时间看到所有的内容，但是能够看到一个大概的样子，后续的内容浏览器会慢慢补上形成一个完整的页面。这个有点像 bigpipe。

css3的优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。

渐进增强观点则认为应关注于内容本身。

css3颜色渐变

画圆形、椭圆、三角形