HTMLCSS学习笔记(八)——宽高自适应

liuian 2025-01-02 17:47 40 浏览

宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素
自动调整，这就是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学院

css 图片自适应

上一篇：两栏布局、左边定宽200px、右边自适应如何实现?
下一篇：使用CSS的resize属性实现div拉伸

HTMLCSS学习笔记(八)——宽高自适应

宽高自适应

宽度自适应

高度自适应

最小高度的自适应

浮动元素父元素高度自适应（高度塌陷）

高度塌陷的解决方法

visibility:hidden/隐藏

伪对象选择符

全屏页面

相关推荐

飞牛OS入门安装遇到问题，如何解决?

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

大模型手册: 保姆级用CherryStudio知识库

Boost高性能并发无锁队列指南:boost::lockfree::queue

西门子博途中如何输入读取和编辑date and time变量

我的Excel打开后是一堆乱码，如何解决?

用什么工具在Win中查看8G大的log文件?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse