HTML和CSS如何实现宽高自适应

小编给大家分享一下HTML和CSS如何实现宽高自适应,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联主营兰溪网站建设的网络公司,主营网站建设方案,成都app软件开发公司,兰溪h5小程序开发搭建,兰溪网站营销推广欢迎兰溪等地区企业咨询

宽度自适应

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

以上是“HTML和CSS如何实现宽高自适应”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!

网页标题:HTML和CSS如何实现宽高自适应
网站路径:https://www.cdcxhl.com/article10/gpsogo.html

成都网站建设公司_创新互联,为您提供云服务器软件开发品牌网站设计App开发网站内链网站排名

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设