CSS常见面试题(持续更新中)

104 阅读7分钟

1、盒子模型和box-sizing

 盒子模型是由margin外边距、padding内边距、border边框、content组成的。它包括两种类型:
     W3C盒子模型和IE盒子模型。二者是由box-sizing这个属性来区分的。
 border-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。
     在宽度和高度之外绘制元素的内边距和边框。
 content-box:为元素设定的宽度和高度决定了元素的边框盒。就是说为元素指定的任何内边距和边框
     都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到
     内容的宽度和高度。

2、垂直居中方法

1Flex2position+transform,inner宽高未知
(3position+负margin,inner宽高已知
(4)设置各个方向的距离都是0,再将margin设为auto(前提是inner宽高已知)

3、CSS权重计算方式

CSS基本选择器包含ID选择器、类选择器、标签选择器、通配符选择器。
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
各选择器权值:
(1)内联样式,权值为1000
(2)ID选择器,权值为0100
(3)类,伪类和属性选择器,权值为0010
(4)标签选择器和伪元素选择器,权值为0001
(5)通配符、子选择器、相邻选择器等,权值为0000
(6)继承的样式没有权值

4、BFC

BFC全称为Block formatting context,直译为"块级格式化上下文"。它是一个独立的渲染区域,
    只有 Block-level box 参与, 它规定了内部的 Block-level Box 如何布局,并且与这个
    区域外部毫不相干。
    
布局规则:
(1)内部的 Box 会在垂直方向,一个接一个地放置。 
(2)Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会 
     发生重叠。 
(3)每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右 
     的格式化,否则相反)。即使存在浮动也是如此。 
(4)BFC 的区域不会与 float box 重叠。
(5)BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 
(6)计算 BFC 的高度时,浮动元素也参与计算。

以下方式都会创建BFC:
(1)根元素(html)
(2)浮动元素(元素的 float 不是 none)
(3)绝对定位元素(元素的 position 为 absolute 或 fixed)
(4)行内块元素(元素的 display 为 inline-block)
(5)表格单元格(元素的 displaytable-cell,HTML表格单元格默认为该值)
(6)表格标题(元素的 displaytable-captionHTML表格标题默认为该值)
(7)匿名表格单元格元素(元素的 displaytabletable-row、table-row-group、table-header-group、
     table-footer-group(分别是HTML table、row、tbodytheadtfoot的默认属性)或 inline-table)
(8overflow 值不为 visible 的块元素
(9display 值为 flow-root 的元素
(10contain 值为 layout、content或 paint 的元素
(11)弹性元素(displayflex 或 inline-flex元素的直接子元素)
(12)网格元素(displaygrid 或 inline-grid 元素的直接子元素)
(13)多列容器(元素的column-countcolumn-width不为 auto,包括 column-count1)
(14column-spanall 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
     (标准变更,Chrome bug)。

5、清除浮动

清除浮动主要是为了防止父元素塌陷,清除浮动常用的方法是clearfix伪类
(1)父级 div 定义 height 
     原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、
     容易掌握 ,但只适合高度固定的布局.
(2)结尾处加空 div 标签 clear:both
     原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮 
     动,让父级 div 能自动获取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感 
     觉很不好 ,不推荐使用
(3)父级 div 定义 overflow:hidden,但是超出盒子部分会被隐藏,不推荐使用
(4)使用after伪元素清除浮动,符合闭合浮动思想,结构语义化正确,但是ie6-7不支持伪元素:after,
     使用zoom:1触发hasLayout
(5)使用before和after双伪元素清除浮动,代码更简洁,但是用zoom:1触发hasLayout

6、position属性

1)absolute 绝对定位,相对于 static 定位以外的第一个父元素进行定位。
(2)relative 相对定位,相对于其自身正常位置进行定位。
(3)fixed 固定定位,相对于浏览器窗口进行定位。
(4)static 默认值。没有定位,元素出现在正常的流中。
(5)inherit 规定应该从父元素继承 position 属性的值。

7、display:none、visibility:hidden、opacity:0的区别

1)结构:display:none隐藏后不占据额外空间
        visibility:hidden元素被隐藏,但是不会消失,依然占据空间
        opacity:0透明度为100%,无法隐藏,,依然占据空间
    (2)继承:display:none不会被子元素继承
        Visibil ity:hidden会被子元素继承,子元素设置visibility:visible可以将子元素显示出来
        opacity:0也会被子元素继承,但是不能通过opacity:0使其重新显示
    (3)重绘回流:display:none会产生重绘回流
        visibility:hidden只产生重绘
        opacity:0不产生回流,不一定产生重塑
    (4)js事件:display:none无法占用空间元素,因此无法点击事件
        visibility:hidden元素绑定的js无效,不可以接受js效果
        opacity:0元素不可显示,但其事件有效

8、display常用的值及其含义

1none:元素不显示,也不会占用空间
    (2)inline:display的默认属性。将元素显示为内联元素,元素前后没有换行符
    (3)block:将元素显示为块级元素,元素前后带有换行符
    (4)inline-block:行内块元素,既是内联元素,又可以设置widthheight5)inherit:规定应该从父元素继承display属性的值

9、px,em,rem的区别

1)概念
        px:绝对单位,页面按精确像素展示。
        em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体
        是16px),整个页面内1em不是一个固定的值。
        rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,
        chrome/firefox/IE9+支持。
    (2)特点
      PX特点:
        . IE无法调整那些使用px作为单位的字体大小;
        . 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
        . Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
      EM特点 :
        . em的值并不是固定的;
        . em会继承父级元素的字体大小。
      rem特点:
        rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。区别在于使用rem
        为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
        这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整
        所有字体大小,又可以避免字体大小逐层复合的连锁反应。
        目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,
        就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小