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

发布时间:2021-10-15 14:20:23 作者:小新
来源:亿速云 阅读:423

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

宽度自适应

元素宽度设置为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如何实现宽高自适应”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. html如何实现自适应字号
  2. 文本宽高如何实现自适应div

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css

上一篇:win10系统开机后就死机该怎么办

下一篇:怎么用Java也实现微信和支付宝支付功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》