自动调度,这便是pc自适应。
自适应的优点:
元素自适应在网页布局中非常主要,它能够使网页显示更灵巧,可以适应在不同设备、不同窗口和不同分辨率下显示。
元素宽度设置为100%。(块元素宽度默认为100%)
或者不设置宽度(width);(宽度是父元素的宽度)
高度自适应1)自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度)
2)元素高度自适应窗口高度
设置方法:html,body{height:100%;}
注:如果设置子元素的高度跟随父元素的高度变革而变革,那么父元素必须有高度。
最小高度的自适应min-height属性:最小高度;(IE6浏览器不识别该属性)
hack1:min-height:value;_height:value;
hack2:min-height:value; height:auto!important;height:value;
浮动元素父元素高度自适应(高度塌陷)当子元素有浮动并且父元素没有高度的情形下父元素会涌现高度塌陷
高度塌陷的办理方法hack1:给父元素添加声明overflow:hidden;(触发一个BFC)
hack2: 在浮动元素下方添加空div,并给该元素添加 声明:div{clear:both; height:0; overflow:hidden;}
hack3:万能打消浮动法
选择符:after {content: "";clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;}
visibility:hidden/隐蔽visibility:hidden;和display:none;的差异:
visibility:hidden;属性会使工具不可见,但该工具在网页所占的空间没有改变,即是留出了一块空缺区域,而 display:none属性会使这个工具彻底消逝不显示,也不再占用位置。
伪工具选择符1)、::after : 与content属性一起利用,定义在工具后的内容。
语法:选择符::after{content:”笔墨”;}
选择符::after{content:url(图片路径);}
如:div::after{content:url(logo.jpg);}
div::after{content:"文本内容";}
2)、::before: 与content属性一起利用,定义在工具前 的内容。
div::before{content:"在其前放内容";}
3)、::first-letter 定义工具内第一个字符的样式。
解释:
(该伪元素只能用于块级元素)
4)、::first-line:定义工具内第一行的样式。
(该伪元素只能用于块级元素。)
全屏页面本文转自知乎号:千锋HTML5学院