CSS:宽高自适应详解
2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小!-浏览器的高度默认是0,html,body{height10
宽度自适应的应用
1.属性:width
2.属性值:px/%
3.宽度自适应的特点
- HTML,BODY表示浏览器,默认是块级元素,宽度是100%
- 当块级元素不设置宽度或者设置100%的时候,宽度会沾满全屏(通栏效果)
- 子级是块级元素,不设置宽度的时候会和父级等宽
- 宽度是没有继承性,只是块级元素的布局规范而已
- 【重要】当块级元素脱离文档流的时候,宽度由内容决定 => 设置浮动和定位的盒子一定记得要加宽高大小!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100%;
height: 62px;
background: #232323;
}
p{
height: 30px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div>
<p>logo</p>
</div>
</body>
</html>
效果图:
高度自适应的应用
1.属性:height
2.属性值:px/%
3.高度自适应的特点
- 浏览器的高度默认是0,html,body{height:100%}
- 设置元素高度为0,盒子的高度就不会显示,添加文本会超出容器范围不会撑大盒子
- 设置好元素高度为auto或者不写的时候可以做到自适应(高度自适应)
- 高度设置为100的常见情况
- html,body{height:100%} 浏览器的默认宽高设置为100% 沾满全屏
- img{width:100%;height:100%} 百分比是相对单位,相对于父级元素进行计算
4.需求:有三个盒子
- 第一个盒子宽度100%,高度100px
- 第二个盒子
- 当盒子中无内容的时候保持一个最小高度
- 当盒子中内容较多的时候可以撑开盒子的高度做到适应
- 第三个盒子宽度100%,高度100px
5.最小高度的概念:min-height
- 第一个作用:height:value作用一样 可以有固定高度
- 第二个作用:height:auto作用一样 可以做到自适应
6.最小高度的兼容问题(浏览器历史)
- 第一款浏览器网景公司(网景领航者NN)
- 第二次浏览器大战 IE9(及以后)
- 最小高度不可以在低版本中使用
- 解决低版本属性解析:_属性:属性值表示只能在低版本中解析
- height高度在低版本浏览器中是有两个作用 和最小高度的效果是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
/* height: 0; */
background: pink
}
</style>
</head>
<body>
<div>
文本 <br>
文本
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.box1{
height: 100px;
background: pink
}
.box3{
height: 100px;
background: skyblue
}
.box2{
min-height: 300px;/* 高版本 */
_height: 300px; /* 低版本 */
background: yellowgreen
}
/* 公司的新闻列表 */
</style>
</head>
<body>
<div class="box1">第一个盒子</div>
<div class="box2">
<p>000000001</p>
<p>000000002</p>
<p>000000003</p>
<p>000000004</p>
<p>000000005</p>
<p>000000006</p>
<p>000000007</p>
<p>000000008</p>
<p>000000009</p>
<p>000000010</p>
<p>000000011</p>
<p>000000012</p>
<p>000000013</p>
<p>000000014</p>
<p>000000015</p>
<p>000000016</p>
<p>000000017</p>
<p>000000018</p>
</div>
<div class="box3">第三个盒子</div>
</body>
</html>
最大值最小值的拓展
最大值
- 最大宽度 max-width:1920px 约束用户屏幕自适应的最大值
- 最大高度 max-height 判断用户的评论达到一定的高度时候可以实现翻页功能
最小值
- 最小宽度 min-width 约束盒子不会往下掉
- 最小高度 min-height 自适应
重点:最小宽度和最大宽度(响应式布局-媒体查询)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../03-reset.css">
<style>
#header{
height: 100px;
background: pink;
/* 最小宽度 屏幕变化的时候最小值是? */
min-width: 800px
}
.box1{
width: 300px;
height: 100px;
background: green;
float: left;
}
.box2{
width: 500px;
height: 100px;
background: blue;
float: right;
}
</style>
</head>
<body>
<div id="header">
<div class="box1">logo</div>
<div class="box2">导航</div>
</div>
</body>
</html>
高度塌陷/高度坍塌
一.造成原因:父级没有设置高度,子级元素脱离了文档流
二.解决方法(10多种)
1.解决方法:给父级元素添加overflow:hidden
- 原理:设置overflow:hidden触发BFC,BFC中有一条布局规则:浮动元素也会参与高度计算
2.解决方法:在最后一个子级元素下面添加任意标签(div) 设置样式clear:both
- 解释:clear清除浮动 left/right/both
- 原理:清除上方预留出来的所有浮动
- 优缺点:优点比较方便、缺点增加了无用的标签、代码冗余
3.万能清除法(不要求理解要求会用)
- 代码
.clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../03-reset.css">
<style>
.box{
width: 1000px;
/* height: 500px; */
border: 10px solid #000;
margin: 100px auto;
}
.box1{
width: 300px;
height: 300px;
background: skyblue;
float: left;
margin: 10px
}
.box2{
width: 300px;
height: 300px;
background: yellowgreen;
float: left;
margin: 10px
}
.box3{
width: 300px;
height: 300px;
background: purple;
float: left;
margin: 10px
}
/* 不成文的规定 */
/* .clear-fix{
clear: both
} */
/* .clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
} */
</style>
</head>
<body>
<div class="box clear-fix"><!-- BFC区域 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
万能清除法的解释
一:伪对象选择器/伪元素选择器(伪类选择器进行区别)
1.选择器::after{content:''} 表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容
2.选择器::before{content:''} 表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容
二:关于隐藏的几种用法
1.display:none 删除元素的显示和结构
2.visibility:hidden 删除显示方式但是位置还存在
三:伪对象和伪类之间的区别是什么?
1.写法上区别:在css2中伪类和伪对象都是一个冒号,在css3中为了区分规定伪对象需要写两个冒号
2.作用上区别:伪类改变是元素的状态,伪对象不仅可以改变元素状态还可以添加结构(虚拟)
更多推荐
所有评论(0)