web前端:html5+css3的神奇搭配

作者:长安城的希望更新于： 2020-03-23 20:46:00

　　css演进的一个主要变化就是W3C决定将css3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。

　　1.关于浮动

　　浮动的元素会脱离标准文档流（float）,从而不占据空间，实现了一行排列多个元素的效果，但是又导致上级元素height消失，处理这种情况的方法就是有两种：

　　1.第一种在css里写个伪类，哪些地方需要清除浮动，直接调用类名。

　　.clearfix::after

　　{

　　display:block;

　　clear:both;

　　height:0;

　　content:'';

　　}

　　.clearfix

　　{

　　zoom:1;

　　}

　　2.第二种情况就是溢出隐藏。

　　overflow:hidden;

　　zoom:1;

　　2.静态定位，相对定位，绝对定位，固定定位

　　1.静态定位：是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性。

　　2.相对定位：就是相对于当前的位置进行的left,top,right,bottom。

　　3.绝对定位：脱离文档流，不占据空间，用position:absolute;这条语句。进行left,right,top,bottom进行相对于具有定位属性得父级元素进行定位，如果未找到就会依次向上寻找，直到找到body停止相对于浏览器窗口进行绝对定位。

　　4.固定定位：设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

　　3.css3响应式

　　1.总体来说css3的响应式满足了所有分辨率的需求，@media媒体查询进行主流分辨率的响应式调节。

　　2.切记代码中不可写固定高度！

　　CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。