css 面试题
1、标准的css 盒子模型 与低版本IE的盒子模型有什么不同？
标准盒子模型： 宽度 = 内容的宽度(content) + border + padding +margin ;
低版本 IE 盒子模型： 宽度 = 内容宽度 (content + border + padding) + margin ;
2、box-sizing 属性有哪些？
用来控制元素的盒子模型的解析模式，默认为content-box。
context-box ： w3c 的标准盒子模型，设置元素的height/width 属性指的是content部分的高/宽.
border-box : IE 传统盒子模型。设置元素的 height/width 属性指的是border + padding +content 部分的宽/高.
3、css 选择器有哪些，哪些属性可以继承？
css 选择器： id选择器（#id），类选择器（.classname）,标签选择器(div,h1,p),相邻选择器(h1+p)，子选择器(h1>p),后代选择器(h1 p),
通配符选择器(*),属性选择器(a[rel="external"]),伪类选择器（a:hover,li:nth-child）
可继承属性： font-size,font-family,color
不可继承的样式：border , padding ,margin ,width ,height
优先级(就近原则)： !import > [id>class>tag]
!import 比内联优先级高
4、css 优先级算法如何计算？
元素选择符：1
class 选择符：10
id选择符：100
元素标签：1000
注意： !import 声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。
5、css3 新增伪类有哪些？
p:first-of-type 选择属于父元素的第一个元素
p:last-of-type 选择父元素的最后一个元素
p:only-of-type 选择父元素的唯一的元素
p:only-clild 选择父元素的唯一子元素
p:nth-child(3) 选择父元素的第三个子元素
:enabled ,:disabled 表单控件的禁用状态
:checked 单选框或复选框被选中
6、如何居中一个浮动元素，如何让绝对定位的div居中？
居中div:
{
margin:0 auto;
height:100px;
width:100px;
border:1px solid red; //加个颜色方便看
}
浮动元素的上下左右居中：
{
float:left;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -50px;
border:1px solid red;
}
绝对定位的左右居中：
{
width:100px;
height:100px;
margin:0 auto;
position:absolute;
left:0;
right:0;
border:1px solid red;
}
flex 居中：
<div class="box">
<div class="box-child"></div>
</div>
.box{
display:flex;
justify-content:center;//水平居中
align-items:center;//垂直居中
width:100px;
height:100px;
border:1px solid red;
}
7、display 有哪些值？
inline(defalut)---内联
none ---隐藏
block ---块级显示
table ---表格显示
list-item ---项目列表
inline-block ---行内块级元素
8、position 的值？
static (default): 按照正常文档流进行排列
relative （相对定位）：不脱离文档流，参考自身静态位置通过 top,left,right,bottom 定位。
absolute （绝对定位）：参考距离最近的一个父级元素通过 top，left，right，bottom定位。
fixed （固定定位）： 所固定的参照对象是可视窗口。
9、css3 新特性？
颜色值：rgba 和 透明度 opacity
背景图片：background-image,background-origin(content-box/padding-box/border-box),background-size,background-repeat
word-wrap(对长的不可分割单词换行):break-word
文字阴影：text-shadow:1px 1px 1px #000(水平阴影，垂直阴影，模糊距离，阴影颜色)
定义自己的字体：font-face
圆角： border-radius：边框半径
边框图片： border-image：url('图片路径') 10 10 round;
盒阴影： box-shadow:1px 1px 1px #000;
媒体查询：定义两套css,根据浏览器的尺寸变化采用不同的属性 @media only screen and (max-device-width:480px){//css样式}
线性渐变： linear-gradients(下，上，左，右，对角方向)
2D转换： transform:scale(0.5,0.9) | translate(0px,30px) | skew(-9deg,0deg) | rotate()
3D转换： perspective();
过渡： transition
动画
10、css3 弹性盒布局模型
布局模型的目的是：提供一种更加高效的方式来对容器中国的条目进行布局，对齐和分配空间。在传统的布局方式中，block布局是把块垂直方向从上到下依次排列。
而inline布局则是在水平方向来排列。而弹性盒布局并没有这样内在的方向限制。
11、css创建一个三角形原理
//首先，需要把元素的宽度，高度设为0.然后设置边框样式。
{
width:0;
height:0;
border-top:40px solid transparent;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid #ff0000;
}
12、清除浮动
//浮动带来的问题
父元素的高度无法被撑开，影响与父元素同级的元素。
与浮动元素同级的非浮动元素会跟随其后。
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
//清除浮动的方式：
父级 div 定义 height。
最后一个浮动元素后加空div标签，并添加样式clear:both。
包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto 。
父级 div 定义 zoom 。
.clearfix:after{ //注意哦，clearfix 是父容器的名称
content:"\00020"; //这个是在父容器的结尾处放一个空白字符
display:block;
height:0; //让这个空白字符不显示出来
clear:both;
}
.clearfix{
zoom:1;
}
13、png,jpg,gif 图片格式？
png 是便携式网络图片（portable network graphics） 是一种无损数据压缩位图文件格式优点是： 压缩比高，色彩好。
jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来存储和传输照片的格式。
gif 是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
webp 格式是谷歌推出的图片格式，压缩率只有 jpg 的2/3; 大小比 png 小了45%。缺点是压缩的时间更久了，兼容性不好。
14、flex 用法
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局
.box {
display:inline-flex;
}
注意，设为 flex布局后，子元素的float，clear 和vertical 属性将失效。
这6个属性设置在容器上：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction 属性： 决定主轴的方向(项目的排列方向),有4个值。
row(默认值)： 主轴水平方向，起点在左端。
row-reverse : 主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap 属性：默认情况下，项目都排在一条线上，换行否。
nowrap(默认值)：不换行。
wrap： 换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow 属性：是flex-direction 和flex-wrap 的简写形式，默认值 row nowrap 。
justify-content 属性：定义了项目在主轴上的对齐方式。
flex-start(默认值): 左对齐。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
align-items 属性：定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将沾满整个容器的高度。
align-content 属性：定义了多跟轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
15、怎么让Chrome支持小于12px的文字？
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}
16、css伪类和伪元素的区别？
伪类： :focus,:hover,:active
伪元素： :before,:after
伪类本质上是为了弥补常规css选择器的不足，以便获取到更多的信息；
伪元素本质上是创建了一个有内容的虚拟容器；
17、强制换行的css是什么？
word-break:break-all;
18、解决img图片自带边距的问题
//某些时候，图片底部的空隙可能是2px或更多。
解决办法：
定义为 vertical-align:top/bottom;
1、转化成行级块元素
display:block;
2、浮动，浮动后的元素默认可以转化为块元素
float:left;
3、给img定义 vertical-align（消除底部边距）
img{
border:0;
vertical-align:bottom;
}
4、将其父容器的font-size:0;
5、给父标签设置与图片相同的高度；
19、 有多少种方法可以将css集成为web页面？
// 三种方式
1、内联：直接在HTML元素上使用
<span style="color:red">hello world </span>
2、外部：在项目中创建单独的css文件，然后再需要的web页面引入即可
<head>
<link rel="text/css" href="css 文件地址" />
</head>
3、内部：web页面中的head元素直接写入即可
<head>
<style>
span{
color:red;
}
</style>
</head>
20、万维网协会在维护css规范。
21、css 渐变是指： 我们在两幅图像之间创建中间帧，以获得第一幅图像的外观，然后发展成第二幅图像的过程，他主要用于创建动画。
22、css精灵优点： 通过将各种小图像组合成一个图像，减少了web页面的加载时间。减少HTTP请求，从而减少加载时间。
23、渐进增强和平稳退化？
渐进增强：指从最基本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步增加功能及提高用户体验。本质上讲，我们日常的一些开发习惯，例如首先使用标记语言编写页面，然后通过样式表来控制页面样式等，都属于渐进增强的概念。
平稳退化：值首先使用最新的技术面向高级浏览器构建最强的功能及用户体验，然后针对低级浏览器的限制，逐步衰减哪些无法被支持的功能及体验。在日常开发中，比如首先针对Chrome编写页面代码，然后修复IE中的异常或针对IE去除哪些无法被实现的功能特色。
24、css和 scss区别？
css：一种用于设计web页面的样式语言，而scss 用于为浏览器组合css样式表。
scss: 提供了一些变量，可以使用这些变量来缩短代码，这是与css相比的一大优势。
25、font的属性有哪些？
font-style , font-variant , font-weight , font-size/line-height ,font-family 。
26、规则集是什么意思？
该指令告诉浏览器如何在HTML页面上渲染特定元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器，以通过规则集进行标识。
27、固定底部内容
<div id="document">
<nav>头部内容</nav>
<main>主体内容</main>
<footer>底部内容</footer>
</div>
//css样式
#document{
height:100vh;
display:flex;
flex-direction:column;
background:#202020;
}
nav,footer{
background:red;
display:flex;
justify-content:center
}
main{
flex:auto;
color:green;
}
footer{
flex-shrink:0;
}
*{
margin:0;
}
//flex-grow 是用来控制一个flex元素相对它同级flex元素的自身可扩充的空间。
flex-shrink 作用与flex-grow 是恰恰相反，用来控制flex元素收缩的空间
28、悬停放大图片特效
<div class="img-wrapper">
<img src="../1.jpg" alt="" class="img">
</div>
// css 样式
.img-wrapper{
width:400px;
height:400px;
overflow:hidden;
box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.img{
height:400px;
-webkit-transition:0.3s linear;
transition:0.3s linear;
}
.img:hover{
transform:scale(1.1);
}
//可以给图片加上过滤属性 filter ，让图片变灰或者深褐色，然后悬停时候出现更加炫的颜色。
灰化属性是： filter:grayscale(100%);
深褐色化的属性是：filter:sepia(100%);
例如：
.img{
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
}
.img:hover{
filter:grayscale(0);
-webkit-filter:grayscale(0);
}
28、瞬间黑暗模式
<div id="document">
<p id="light-mode">切换日间模式</p>
<p id="dark-mode">切换夜间模式</p>
</div>
//css
body{
background:#fff;
display:flex;
justify-content:center;
}
body.dark-mode{
filter:invert(1) hue-rotate(270deg);
}
#dark-mode{
display:none;
}
//js
document.getElementById('dark-mode').onclick = function(){
let bodys = document.body;
bodys.classList.add('dark-mode');
document.getElementById('light-mode').style.display='flex';
document.getElementById('dark-mode').style.display='none;
}
document.getElementById('light-mode').onclick = function(){
let bodys = document.body;
bodys.classList.remove('dark-mode');
documnet.getElementById('light-mode').style.display = 'none';
documnet.getElementById('dark-mode').style.display='flex';
}
参考网址：
如果快乐太难，那祝你平安。
