当前位置: 首页 / 技术分享 / 正文
好程序员web前端培训分享HTML CSS之宽高自适应

2020-06-30

web前端培训 HTML css

  好程序员web前端培训分享HTML CSS之宽高自适应,宽高自适应,网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应。
自适应的优点:
元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。

web前端三要素

宽度自适应

元素宽度设置为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: "";

clearboth;

displayblock;

height: 0;

overflowhidden;

visibilityhidden;}

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 定义对象内diyi个字符的样式。
说明:
*(该伪元素只能用于块级元素)
4)、::first-line:定义对象内diyi行的样式。
*(该伪元素只能用于块级元素。)

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-02-17(北京)

    开班盛况

    开班时间:2020-03-02(深圳)

    开班盛况
  • 大数据+人工智能 <好程序员严选班>

    开班时间:2019-12-23(北京)

    开班盛况
  • 大数据+人工智能 <好程序员班>

    开班时间:2020-02-24(杭州)

    开班盛况

    开班时间:2020-02-17(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2020-03-09(北京)

    开班盛况
  • Python全栈+人工智能 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2020-02-24(北京)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号