关于CSS常见面试题的一些问题

关于CSS的选择器的问题

1.css选择器的优先级：!Important>行内样式>ID选择器>类选择器>元素>通配符>继承>浏览器默认属性
    选择器规则：1.css选择规则的权值不同时，权值高的规则优先。2.css选择规则的权值相同时，后定义的规则优先。3.css属性后面加!important时，无条件绝对优先。

    

    权值等级划分，一般来说是四个等级：第一等级代表内联样式，如style=" ",权值为1000，第二等级代表ID选择器，如#id=" ",权值为100，第三等级代表class|伪类|属性选择器，如.class|:hover,:link,:target|[type],权值为10，第四等级代表标签|伪元素选择器，如p | ::after,::before,::first-inline,::selection，权值为1；
    此外，通用选择器（*），子选择器（>），相邻元素选择器（+）等选择器不再4个等级之内，所以权值为0
    权值比较规则：当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值来进行比较的，而不是简单的1000*个数+100*个数+10*个数+1*个数来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。

   

https://www.cnblogs.com/cnblogs-jcy/p/8574177.html

 关于css的两栏布局，常见的有（两列自适应，一列固定一列自适应）。

    1.两列自适应：两列自适应是特别简单的布局方式，其要点在于把列宽用百分百来表示，然后可以使用float或display:inline-block等方法来让两列处于同一行。
（1）一列设置左浮动一列设置右浮动，设置不同比例的宽度，设置高度属性。（优点：简单，缺点：两列都脱离了标准文档流，两列后面的内容或父盒子无法被撑起），故需要清除浮动。
（2）两列都使用display:inline-block，设置不同比例的宽度，设置高度属性。（优点：不用考虑盒子脱离文档流的问题，父盒子总能被高的盒子撑起。缺点：需要考虑盒子的间距）

 （3）使用绝对定位，设置方法和float类似。

    2.一列固定一列自适应：
（1）使用margin,左边一列设置float和固定宽高 ，右边这一列设置父盒子margin-left属性，子盒子（也就是右边一列）设置高度就行（也就是自适应）。（缺点：无论是设置margin-left,还是设置margin-right,都至少有一个列脱离了文档流）

（2）设置BFC:左边设置固定宽高和左浮动，右边直接使用BFC，即overflow:hidden,设置下高度就行，这样的话就刚好将两栏布局设置成功。

 关于css的三栏布局，常见的有（两列自适应中间自适应）。

    （1）使用position:左边的盒子和右边的盒子都设置绝对定位和固定宽高，左边盒子设置left:0,右边盒子设置为right:0,中间盒子设置高度和margin:0 60px的属性。

    （2） 使用BFC，左右盒子设置定宽定高和左右，中间盒子设置overflow:hidden。

（补充说明：普通盒模型和怪异盒模型的区别：在标准盒魔心下，width和height是内容区域即content的width和height，而盒子的总宽度为width+margin(左右）+padding（左右）+border（左右））

关于css的盒子居中的问题

css的盒子水平居中的方法：1.使用margin:0 auto; 2.父元素设置text-align:center,子元素设置display:inline-block 3.父元素设置相对定位，子元素设置绝对定位，并且设置top:0;left:50%,margin-left:-自身高度的一半。4.父元素绝对定位，子元素相对定位，设置top:0;left:50%,transform:translate(-50%,0%)。5.设置flex布局,直接只用设置父元素display:flex,子元素设置justify-content:center;
css的盒子垂直居中的方法：1.父元素设置相对定位，子元素设置绝对定位，并且设置left:0;top:50%,margin-top:-自身高度的一半。2.父元素绝对定位，子元素相对定位，设置left:0;top:50%,transform:translate(0%,-50%);3.设置flex布局：直接只用设置父元素display:flex,子元素设置align-items:center;
css实现盒子模型水平垂直居中的方法：1.父元素设置相对定位，子元素设置绝对定位，并且设置left:50%;top:50%,margin-top:-自身高度的一半,margin-left:-自身高度的一半。2.父元素绝对定位，子元素相对定位，设置left:50%;top:50%,transform:translate(-50%,-50%);3.设置flex布局：直接只用设置父元素display:flex,子元素设置align-items:center;justify-content:center;

https://www.cnblogs.com/plsmile/p/11119728.html