CSS知识点与技巧整理

(.clear{clear:both})原理：添加一对空DIV标签，使用clear:both的css属性清除浮动，以便父DIV可以获取高度。优点：浏览器支持好缺点：空DIV标签较多。如果页面上有很多浮动模块，就会出现很多空的DIV，显得不尽如人意。（不推荐）方法三：让父div也浮起来。这样可以初步解决目前的漂浮问题。但是也会让parent漂浮起来，又会产生新的漂浮问题。不推荐方法四：父级div定义display:table原理：将div属性强行放到表格中优点：令人费解缺点：会出现新的未知问题。（不推荐）方法五：在父元素上设置overflow：hidden、auto；原理：该方法的关键是触发BFC。在IE6中，同样需要触发hasLayout(zoom:1)。优点：代码引入，无结构语义问题缺点：需要溢出的元素无法显示（不推荐）方法六：父div定义伪类：after和zoom.clearfix:after{content:'.';显示：块；高度：0；清除：两者；visibility:hidden;}.clearfix{zoom:1;}原理：IE8及以上和非IE浏览器支持：之后，原理和方法2有点类似。zoom（IE有属性）可以解决ie6和非IE浏览器的浮动问题即7。优点：结构和语义完全正确，代码量适中，复用率高（建议定义公共类）缺点：代码不是很简洁（强烈推荐）。Clearfix：在{内容：”\200B”之后；显示：块；高度：0；清除：两者；}.clearfix{*缩放：1;照顾好IE6，IE7没问题。关于浮动的详细知识可以参考这篇文章：[http://luopq.com/2015/11/08/C...](http://luopq.com/2015/11/08/C...4.BFC相关知识定义：BFC（Blockformattingcontext）直译为“块级格式化上下文”，是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelHowBox是布局出来的，和这个区域外面无关。BFC布局规则BFC在页面上是一个孤立的独立容器，容器内的子元素不会影响外面的元素。反之亦然反之，BFC元素垂直方向的边距会重叠，垂直距离由边距决定，BFC取最大值的区域不会和浮动框重叠（明确浮动原理）.在计算BFC的高度时，浮动元素也参与计算。哪些元素会生成BFC根元素float属性不是noneposition是absolute还是fixeddisplay是inline-block,table-cell,table-caption,flex,inline-flexoverflow是不可见的5.box-sizing是设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括内容，第二个IE模型包括边框和填充。box-sizing属性可以是三个值之一：content-box，默认值，只计算内容的宽度，border和padding不计入widthpadding-box，padding计入widthborder-box,border和padding被计算成宽度为6.px，em,rem分别为px像素(Pixel)。绝对单位。Pixelpx是相对于显示器的屏幕分辨率的。它是一个虚拟的长度单位，是计算机系统的数字图像长度单位。如果px要转换成物理长度，需要指定精度DPI。em是相对长度单位，相对于当前对象中文本的字体大小。如果内联文本的当前字体大小没有手动设置，则它是相对于浏览器的默认字体大小。它继承父元素的字体大小，所以不是固定值。rem是CSS3新增的相对单位（rootem，rootem）。当使用rem为元素设置字体大小时，它仍然是一个相对大小，但相对大小只是HTML根元素。7、引入CSS有哪些方式？链接和@import有什么区别？有四种：inline（元素上的style属性）、inline（style标签）、externallink（链接）、import（@import）link与@import的区别：link是一个XHTML标签，除了加载CSS外，它还可以定义其他东西比如RSS；@import属于CSS的范畴，只能加载CSS。当link引用CSS时，在页面加载时同时加载；@import需要在页面完全加载后加载。link是一个XHTML标签，没有兼容性问题；@import是CSS2.1提出的，低版本浏览器不支持。link支持使用Javascript控制DOM改变样式；@import没有。8、流体布局和响应式布局的区别。流体布局使用非固定像素来定义网页内容，即百分比布局。框的宽度设置为百分比，根据屏幕的宽度缩放，不受固定像素的限制，内容填充到两侧。响应式开发使用CSS3中的MediaQuery（媒体查询），通过查询屏幕的宽度来指定具有一定宽度范围的网页布局。超小屏（移动设备）小屏设备768??px以下768px-992px中屏设备992px-1200px宽屏设备1200px以上由于响应式开发比较繁琐，一般使用第三方响应式框架来完成，比如bootstrap来完成部分工作，当然你也可以自己写回复。区别-流式布局响应式开发模式移动Web开发+PC开发响应式开发应用场景一般已经有PC端网站，开发移动端只需要单独开发移动端对于一些新建的网站，现在需要适配移动端终端，所以一套页面兼容各种终端开发，积极性强，开发效率高，兼容各种终端，效率低，只适用于移动设备，pad上体验相对较差，能适配各种终端效率代码简单，fastloading代码相对复杂，slowloading9.渐进增强和优雅降级的关键区别在于它们关注的内容，以及这种差异导致的工作流程的差异。Gracefuldegradation一开始构建完整的功能，然后以兼容低版本浏览器为目标。.渐进增强针对低版本浏览器构建页面，保证最基本的功能，然后针对高级浏览器改进和添加效果、交互等功能，以达到更好的用户体验。区别：优雅降级从复杂的现状出发，力图减少用户体验的供给。渐进式增强从一个非常基本的功能版本开始，并进行扩展以满足未来环境的需求。退化（functionaldecay）表示回头看；而progressiveenhancement就是向前看，同时保证它的根基在一个安全区内10.CSS隐藏元素的几种方式和区别display:none元素会在页面上完全消失，元素原本占据的空间也会消失它会被其他元素占用，这意味着它会导致浏览器重排和重绘。它的点击事件不会被触发。visibility:hidden和display:none的区别在于页面消失后元素所占用的空间仍会保留，因此只会导致浏览器重绘而不会重新排列。无法触发其点击事件适用于那些希望元素隐藏后页面布局不会发生变化的场景。opacity:0将元素的透明度设置为0后，元素在我们用户眼中也是隐藏的。.与visibility:hidden的一个共同点是隐藏后元素仍然占据空间，但我们都知道设置透明度为0后，元素只是不可见，它仍然存在于页面中。可以触发点击事件，将height、width等盒模型属性设置为0。简单的说就是将影响元素盒模型的元素的margin、border、padding、height、width设置为0。如果有子元素或者元素中的内容，也是其overflow:hidden应该设置为隐藏其子元素，这是一个trick。如果元素的border和padding属性不为0，显然，页面上仍然可以看到元素，触发元素的点击事件完全没有问题。如果所有的属性都设置为0，显然，这个元素就相当于消失了，也就是不能触发点击事件。这种方法既不实用，也可能会出现一些问题。但是我们平时使用的一些页面效果可能是这样实现的，比如jquery的slideUp动画，就是设置元素的overflow:hidden，然后通过timer不断设置元素的height和margin-top，margin-bottom、border-top、border-bottom、padding-top、padding-bottom均为0，从而达到slideUp的效果。其他比较有想象力的方法设置元素的position和left,top,bottom,right等，将元素移出屏幕，设置元素的position和z-index，设置z-index为负数尽可能小11.消除图片底部空隙方法imageblock-nobaselinealignment:img{}图片底线对齐：img{vertical-align:bottom;}行高足够小-基线位置向上：.box{line-height:0;}12、“nth-child”和“nth-of-type”的区别“nth-child”选择父元素的子元素。这个子元素没有指定确切的类型，只有同时满足两个条件才有效。：一种是子元素，一种是子元素正好在那个位置；“nth-of-type”选择一个父元素的一个子元素，这个子元素是指定的类型。参考13.CSS中的颜色系统有哪些？参考14.CSSFluidLayout下的宽度分离原则所谓“宽度分离”原则是指CSS中的width属性不与影响宽度的padding/border（有时包括margin）属性共存。width独立占据一层标签，而padding、border、margin则在内部利用流动性自适应渲染。例子：元素的边框有20px的空白问题。父亲{宽度：102px;}.son{border:1pxsolid;padding:20px;}15.!important问题超出了!important:max-width会覆盖width，这种覆盖是超覆盖，高于!important的权重，超过了maximum:min-宽度覆盖最大宽度。当min-width和max-width冲突时会出现此规则，如下所示：.container{min-width:1400px;max-width:1200px;}16.任意高度的元素的展开和折叠动画使用height+overflow:hidden会比较生硬。一个好方法是使用最大高度。.element{最大高度：0；溢出：隐藏；过渡：高度.25s;}.element.active{最大高度：666px;/*足够大的最大高度值*/}17.基于伪元素的图片内容生成技术要求：图片加载前显示alt信息。实现：图片没有src，所以::before和::after可以生效，我们可以通过content属性呈现alt属性值。img::after{/*生成alt信息*/content:attr(alt);/*大小和定位*/position:absolute;底部：0；宽度：100%；背景色：rgba(0,0,0,.5);变换：翻译Y（100%）；transition:transform.2s;}img:hover::after{transform:translateY(0);}当我们给图片添加src属性时，图片从普通元素变成了替换元素，::before和::之后原来支持的，此时都失效了，此时鼠标悬停在图片上不会出现任何信息。18.轻松将悬停图片变成另一张图片img:hover{content:url(laugh-tear.png);}content只是改变了视觉呈现，当我们用鼠标右键或者其他形式保存这张图片时，所有的图片还是保存了原来src对应的。这个方法也可以用在官网logo上。由于使用conetnt生成图片时无法设置图片的大小，如果想在移动端使用该技术，推荐使用SVG图片。19、content属性的特点使用content生成的文本不能被选中和复制，就像设置了user-select:none语句一样，而普通元素的文本可以很容易地被选中。内容生成的文本不能被屏幕阅读器阅读，也不能被搜索引擎抓取。因此，不要擅自使用content属性生成重要的文本信息，因为这样对无障碍和SEO都不友好。content属性只能用来生成一些不相关的内容，比如装饰图形或者序号；同样的，不用担心原来重要的文字信息会被content替换掉，替换的只是visuallayer。无法获取内容动态生成的值。content是一个非常强大的CSS属性，它强大的特性之一就是计数器效果，它可以自动累加值。如：.total::after{content:counter(icecream);}示例：https://jsrun.net/6VyKp20。内容换行和点加载效果正在加载...dot{display:inline-block;高度：1em；行高：1；文本对齐：左；垂直对齐：-.25em；溢出：隐藏；}点::之前{显示：块；内容：'...\A..\A.';空白：预包装；animation:dot3sinfinitestep-startboth;}@keyframesdot{33%{transform:translateY(-2em);}66%{转换：translateY(-1em);}}在线演示21.margin:auto的应用margin:auto的填充规则：如果一侧是fixed，一侧是auto，那么auto就是剩余空间的大小。如果两边都是auto，剩余空间平分Level元素垂直居中：使用writing-mode改变文档流向。father{height200px;书写模式：vertical-lr;}.son{height:100px;margin:auto;}margin:auto在绝对定位下居中.father{width:300px;高度150px；位置：相对；}.son{位置：绝对；顶部：0；右：0；底部：0；左：0；宽度：200px；高度：100px；：https://demo.cssworld.cn/4/3-5.php22。边框宽度支持关键字thin：薄，相当于1pxmedium：（默认）均匀粗细，相当于3pxthick：厚，相当于4px23。border-color和colorborder-color默认颜色为颜色值，即当不指定border-color颜色值时，会使用当前元素的颜色计算值作为边框颜色，如:.box{border:10pxsolid;color:red;}此时.box元素的10px边框颜色为红色（持续更新中）欢迎在留言区补充或提出不同意见延伸阅读你必须知道HTTPJavaScriptES5+ES6的基本概念继承总结JavaScript面向对象核心知识归纳