宽高自适应

宽高自适应

定义：
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

1. 宽度自适应
   子元素的宽度自动适应父元素的宽度
   子元素元素宽度设置为 100%。（块元素宽度默认为 auto）
2. 高度自适应 1)元素高度自适应窗口高度
   设置方法：html,body{height:100%;}（写一个满屏页面） 2)子元素自适应父元素高度：height:100%;
3. 元素具备最小高度的自适应
   属性：最小高度；(IE6 浏览器不识别该属性)
   min-height什么时候用？当元素内容的高度不确定的时候用min-height;
   最小高度兼容 IE6 的写法：
   方法 1:min-height:value; _height:value;
   方法 2:min-height:value; height:auto!important;
height:value; (属性顺序不能改变，建议使用)

!important关键字过滤器，写在属性值的后面，加上此单词,属性具有最高的优先级，但是 ie6 不能识别此关键字；

min-height（最小高度,设置此属性后，内容高度小于此高度,显示此高度；大于容器高度时，容器自适应高度；）

max-height(最大高度，设置此属性后，内容高度小于此高度时，显示内容高度；内容高度超过此高度时显示此高度)

min-width(最小宽度,设置此宽度后，浏览器宽度小于此宽度时显示滚动条，大于此宽度时，适应浏览器宽度；)

max-width(最大宽度，设置此属性后浏览器宽度小于此容器时，会适应内容宽度而不出现滚动条)

清除浮动

浮动元素父元素高度自适应（父元素不写高度时，所有子元素写了浮动后，父元素会发生高度塌陷）

hack1：给父元素添加声明overflow:hidden;
（缺点：当子元素有定位设置，定位到父元素外面时，不希望溢出父元素部分隐藏时，此方法就不行了）

hack2:在最后一个浮动元素下方添加空 div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
（缺点：在 HTML 结构文档中会形成很多冗余代码）

hack3:万能清除浮动法
父元素选择符:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

伪对象选择符

1. :after与 content 属性一起使用，定义在对象后的内容。
   如:

div:after {
  content: url(logo.jpg);
}
div:after {
  content: "文本内容";
}

2. :before与 content 属性一起使用，定义在对象前的内容。
   如:

div:before {
  content: "在其前放内容";
}

3. :first-letter定义对象内第一个字符的样式。
4. :first-line定义对象内第一行的样式。

说明：
该伪元素只能用于块级元素。
ie6 及以下版本浏览器不支持伪对象选择符。

控制元素隐藏/可见

visibility:hidden/visible;隐藏/可见

visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。

总结

1. 站点中的新闻详情页面和产品详情页面中的详细内容部分高度一般都是不固定的，这时需要用 min-height;
2. 这就导致详细内容部分的父元素高度也不能固定，如父元素中还有子元素发生了浮动，这时父元素就可能发生高度塌陷，如果高度塌陷的话就需要清除浮动；

一般新闻详情页面和产品详情页面都会出现这种情况

Fliter（过滤器）方法兼容浏览器

1. 下划线：IE6 浏览器的兼容符号； （只有 IE6 浏览器识别此符号，其他浏览器不识别）
   语法：选择器{属性:属性值;}
2. 或+：兼容所有 IE7 以下浏览器；（只有 IE7 及以下版本浏览器识别此符号，其他浏览器不识别）
   语法：选择器{属性:属性值; +属性:属性值;}
3. \0：IE8 及以上浏览器的兼容符号；
   语法：选择器{属性:属性值\0;}
4. \9：兼容所有 IE 浏览器；
   语法：选择器{属性:属性值\9}（只有 IE 浏览器识别此符号，其他浏览器不识别）

---

本文作者：人模人样的搬砖老段
本文链接：宽高自适应
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

---

最后更新于:2020/01/12

赏

谢谢你让我少搬一块砖

支付宝

微信