css常见问题
1. CSS 中 inline 元素可以设置 padding 和 margin 吗？


行内元素设置width,height无效。但是设置margin和padding是有效的。


行内非替换元素的外边距不会转变一个元素的行高


div, form, table, header, aside, section, article,  figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul,  dlspan, 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当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

svg canvas
折叠的结果：


两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。


两个相邻的外边距都是负数时，折叠结果是两者肯定值的较大值。


两个外边距一正一负时，折叠结果是两者的相加的和。



这个同样可以利用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






.clearfix:after {


content: ".";


display: block;


height: 0;


clear: both;



visibility: hidden;


} .clearfix { display: inline-block;


} /* for IE/Mac */





.clearfix {



zoom: 1;/* triggers hasLayout */


display: block;/* resets display for IE/Win */


}









鉴于 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%;}


2、弹性布局flex


body {


display: flex;


align-items: center; /*定义body的元素垂直居中*/



justify-content: center; /*定义body的里的元素水平居中*/


}


.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计算了进去;

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。