宽高自适应

本文主要是介绍宽高自适应，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

宽度自适应

width（宽度自适应应用于块级元素）

在网页布局中，给块级元素设置宽度为100%的时候，会自适应到浏览器全屏宽度（通栏效果）

块级元素不设置宽度的情况下，默认宽度为100%

块级不去设置宽度的时候，会和父级等宽

重要：如果当前元素脱离了文档流，元素的宽高大小由自身的内容决定

用到了定位（固定和绝对定位）或者浮动属性一定要给元素添加宽高大小

高度自适应 height

如果不设置容器高度，那么容器就不会显示在浏览器上

如果容器没有设置高度或者设置成auto的时候，高度会根据内容撑开，做到高度自适应

重点：子级元素自适应父级元素的高度

自适应浏览器高度：浏览器宽度默认为100%，高度默认为0 html，body{height：100%}

图片自适应到父级容器：img{width：100%；height：100%} 图片会被拉伸变形

重要的属性：**最小高度 min-height 网站的留言模块

作用：

当盒子没有内容的时候保持一个固定高度（height）

当盒子由内容的时候会根据内容的多少自动撑开盒子的高度（height：auto）

越好用的属性问题越多（兼容问题）

最小高度的兼容问题：只能在高版本浏览器中使用，低版本浏览器不兼容

下划线过滤器 写法：_属性：属性值 表示当前这个属性只能在低版本中使用

！important 最高权重

内联/行内样式表>id>class>标签

写法：属性：属性值 ！important

高度塌陷/高度坍塌

造成高度塌陷的原因：父级没有设置高度，子级元素含有浮动属性

父级没有设置高度的原因：父级容器做到自适应

子级元素含有浮动属性：布局需求 脱离文档流 初始位置不存在 父级高度就不会被子级撑开

1.给父级添加高度 height：固定值

优点：从根本上解决了高度塌陷

缺点：不能做到自适应

2.给父级添加overflow：hidden

原理：使用了文本溢出属性，可以触发BFC（块级格式化上下文）在BFC中有一条布局规则（浮动元素也参与高度计算）

优点：好理解 ，可以解决高度坍塌

缺点：如果子级元素有超出父级区域的部分，会被隐藏起来

3.在当前最后一个子级元素后面添加一个任意标签，给这个标签设置clear：both属性

属性的解释：clear清除 left right both

优点：需要解决高度塌陷的时候，写标签和类名就可以

缺点：代码冗余，造成不必要的错误结构

4.万能清除法（只要求会用，不要理解）

用法：在父级上添加一个类名 clear-fix

再给这个类名添加声明

clear-fix：：after{

content：‘’；

width：100%；

height：0；

display：block；

overflow：hidden；

clear：both；

visibility: hidden;

}

伪对象/伪元素

1.选择器：after{content：''} 表示在xx之后，必须要和content一起使用

2.选择器：before{content：''}表示在xx之前

3.first-letter 定义第一个文本样式

4.first-line 定义第一行文本样式

隐藏元素的方法

display：none 删除结构

visibility：hidden 删除了在页面中的显示文本 结构还是存在的

overflow：hidden 超出才可以隐藏元素

opacity：0（0~1） 背景颜色

面试题：伪类和伪对象（伪元素）的区别是什么？

伪类选择器：hover ，：link，：visited， ：active

伪对象/伪元素选择器 ：：before， ：：after， ：：first-letter， ：：first-line

总结：两者的区别

1.写法上的区别

伪类：只有一个冒号

伪对象：两个冒号 在css2中两者都是一个冒号，后来为了区分伪类和伪对象的区别，在css3中规定了伪对象书写的时候要用两个冒号

2.功能作用

伪类：只能通过伪类改变元素的样式

伪对象：伪对象可以新增html结构（dom元素）dom元素是虚拟的

这篇关于宽高自适应的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！