css常见问题有哪些
小编给大家分享一下css常见问题有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1. CSS 中 inline 元素可以设置 padding 和 margin 吗？
行内元素设置width,height无效。但是设置margin和padding是有效的。
行内非替换元素的外边距不会改变一个元素的行高
<!-- 常见的块级元素 -->div, form, table, header, aside, section, article, figure, figcaption, h2~h7, nav, p, pre, blockqoute, canvas, ol, ul, dl<!-- 常见的行内元素 -->span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
2. CSS box-sizing 的值有哪些？
允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing: content-box|border-box|inherit;
一般在做自适应的网页设计的时候用，用这个属性网页结构才不会被破坏。
常用的值：
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~
兼容性
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
3. CSS BFC 原理？
BFC(block formatting context)块级格式化上下文。是一个html盒子，里面的元素左对齐
定义：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。如果他们属于不同的BFC，他们之间的外边距将不会折叠
BFC的作用
1、 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2、 垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
这个同样可以利用BFC解决。关于原理在前文已经讲过了。
3、 创建自适应两栏布局
在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。
在图片和文字的样式中都加入overflow:hidden使他变为块级格式化上下文。
3. HTML5 和 CSS3 新特性？
html5：语义化标签；增强型表单；视频和音频；canvas；svg绘图；地理定位；拖放api；webworker；storage（sessionStorage和localStorage）；webSocket；
HTML5的十大新特性
css3:
（1） CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image
（2） 对文字加特效（text-shadow、），强制文本换行（word-wrap），线性渐变（linear-gradient）
（3）旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
（4） 增加了更多的CSS选择器、多背景、rgba()；
（5）在CSS3中唯一引入的伪元素是 ::selection ；
（6） 媒体查询(@media)，多栏布局（flex）
CSS 清除浮动的方法？
也就是防止元素高度塌陷
1、父元素变为BFC块级格式化上下文overflow:hidden;
缺点：元素溢出无法控制显示，不要用
2、clear:{
clear:both;
}
3、伪元素after和before，clear:both
IE6-7不支持:after，使用 zoom:1触发 hasLayout
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .clearfix { display: inline-block;
} </style><!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1;
display: block;
}
</style>
<![endif]-->
鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，,有些版本可能content 里面内容为空,不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；after在元素之后插入content的内容。
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
4、CSS 实现左右垂直居中的方法？
CSS水平垂直居中常见方法总结
1、元素在文档流里是紧密布局的，不能直接使用top left直接移动元素，容易造成混乱。
使用position:relative;元素在文档流中位置不浮动来改变元素的居中。
content{
margin-top:-50% of height;<--伪代码-->
position:relative;
top:50%;<--或者使用transform:translateY(50%);-->}
2、弹性布局flex
body {
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 300px;
height: 300px;
background: orange;
}
3、将父容器设置为display:table
然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell 。
但是，这是不值得推荐的，因为会破坏整体的布局
用过哪种 CSS 预处理器，简单介绍一下？
谈谈CSS预处理器
目前最主流的CSS预处理器是LESS、SASS和Stylus
5、介绍几种 CSS 伪类？
添加一些选择器的特殊效果。
格式是：选择器：伪类
after 元素后插入内容
before 元素之前插入内容
empty 元素内空的子元素
6、 CSS 选择器优先级？
精华帖CSS选择器优先级总结
id > 类选择器 > 标签选择器>
7、 使用过的 CSS 布局方式？
圣杯布局、双飞翼布局、Flex布局和绝对定位布局
8、 CSS display 属性的值及作用？
display 属性规定元素应该生成的框的类型。
其中常用的的有none、inline、block、inline-block。分别的意思是：
1) none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。
2) inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3) block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4) inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。
9、 CSS单位 rem 和 em 的区别？
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
10、 标准盒子模型和css盒子模型的区别。
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
以上是“css常见问题有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
