CSS-宽高自适应

一、宽高自适应

1、窗口自适应

（1）概念：元素的大小使用百分单位能根据屏幕窗口大小来改变大小

（2）前提：

 必须使用CSS代码为:
    html,body{
        height:100%;
    }
若不使用以上代码，则增加了百分比的高度会默认继承父元素高度的百分比，也就是body高度的百分比，即0px复制

2、宽度自适应

（1）概念：元素不设置宽度，宽度默认是被子元素或者是文本撑开：width默认值为:auto

（2）宽度自适应情况：

宽度自适应的第一种情况是自适应窗口的宽度：块级元素默认占浏览器的一整行
宽度自适应的第二种情况是继承父元素的宽度：父元素的自适应

注意：
width:auto; （宽度自适应）和 width:100%; （宽度百分百），以上两种书写实现效果是不是一致？
答：
（1）如果没有添加盒子模型时，二者实现效果一致；
（2）如果添加了盒子模型，auto+数值=auto，不会把盒子撑大；100%+数值>100% 会把盒子撑大

3、高度自适应

概念：元素不设置高度，高度默认是被子元素或者是文本撑开: height默认值为:auto

二、最大最小宽高

动态计算宽高

1、作用：calc() 函数是用来动态计算长度值的。

2、使用方法：用于动态的计算宽度和高度，里面有两个参数calc(参数1 - 参数2)

3、注意事项：

（1）任何长度值都可以使用calc()函数进行计算；

（2）calc()函数支持 “+”,“-”,“*”,“/” 运算；

（3）宽度和高度的应用案例。

三、应用场景

1、两栏布局

（1）方法1：使用calc函数来动态计算进行两栏布局

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 窗口的自适应 */
        html,body {
            height: 100%;
        }
        .top {
            height: 100px;
            background-color: red;
        }
        .bottom {
            height: calc(100% - 100px);
            background-color: green;
        }
        .lef {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        .rig {
            width: calc(100% - 200px);
            height: 100%;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 
        两栏布局：上下；下面：左右
     -->
    <div class="top"></div>
    <div class="bottom">
        <div class="lef"></div>
        <div class="rig"></div>
    </div>
</body>
</html>复制

（2）方法2：使用自适应的方法来完成两栏布局

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .top {
            height: 100px;
            background-color: red;
        }
        .bottom {
            height: calc(100% - 100px);
            background-color: green;
        }
        /* 设置左侧盒子和右侧盒子 */
        .lef {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        .rig {
            /* width: 300px; */
            /* 自适应宽度的盒子+盒子模型（外边距）仍然是自适应，不会被撑大 */
            height: 100%;
            margin-left: 200px;
            background-color: orange;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom">
        <!-- 自适应的方法完成两栏布局 -->
        <div class="lef"></div>
        <div class="rig"></div>
    </div>
</body>
</html>复制

2、三栏布局

（1）方法1：使用calc函数来动态计算进行两栏布局

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .top {
            height: 100px;
            background-color: red;
        }
        .bottom {
            height: calc(100% - 100px);
            background-color: green;
        }
        .lef {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        .cen {
            width: calc(100% - 400px);
            height: 100%;
            background-color: aqua;
            float: left;
        }
        .rig {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 
        三栏布局：使用calc函数动态计算
     -->
    <div class="top"></div>
    <div class="bottom">
        <div class="lef"></div>
        <div class="cen"></div>
        <div class="rig"></div>
    </div>
</body>
</html>复制

（2）方法2：使用自适应的方法来完成三栏布局

 ----------------自适应+定位完成----------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .top {
            height: 100px;
            background-color: red;
        }
        .bottom {
            height: calc(100% - 100px);
            background-color: green;
            position: relative;
        }
        .lef {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        .cen {
            height: 100%;
            margin: 0 200px;
            background-color: aqua;
        }
        .rig {
            width: 200px;
            height: 100%;
            background-color: yellow;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom">
        <div class="lef"></div>
        <div class="cen"></div>
        <div class="rig"></div>
    </div>
</body>
</html>
 
----------------自适应+浮动----------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .top {
            height: 100px;
            background-color: red;
        }
        .bottom {
            height: calc(100% - 100px);
            background-color: green;
        }
        /* 设置左中右 */
        .lef {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        .cen {
            height: 100%;
            background-color: aqua;
            margin: 0 200px;
        }
        .rig {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom">
        <div class="lef"></div>
        <div class="rig"></div>
        <div class="cen"></div>
    </div>
</body>
</html>复制

四、伪元素选择器

1、匹配元素内的第一行文本

（1）基本语法：

 .box::first-line {
    //CSS修饰语句
}复制

（2）实现：只影响第一行的文本

2、匹配元素内文本中的第一个字符

（1）基本语法：

 .box::first-letter {
    //CSS修饰语句
}复制

（2）实现：只影响第一个字符

3、向元素内正前方插入内容

（1）基本语法：

 选择器::before {
    content:"文本";
}复制

（2）实现：向元素的正前方追加一个内容，但无法选中该内容

4、向元素内正后方插入内容

（1）基本语法：

 选择器::after {
    content:"文本";
}复制

（2）实现：向元素的正后方追加一个内容，但无法选中该内容

追加进来的元素类型为行内元素，无法实现宽高

五、高度塌陷

引起高度塌陷的原因：

父元素不设置高度，默认的高度是被子元素撑开的，如果子元素添加浮动，父元素的高度会降低，这种降低的效果被称为高度塌陷—会影响布局

解决高度塌陷的方法

1、给父元素添加一个高度

 添加的元素：min-height
缺点：过于死板，若子元素内容较多，则会产生溢出复制

2、给补位的盒子添加一个不让补位的效果—即清除浮动

 添加的元素：clear:left/right/both复制

3、父元素底下只有一个子元素或者多个子元素都浮动导致高度塌陷解决办法

 前提：父元素里面只有一个子元素或者多个子元素都浮动
 
解决方法：
 
（1）自己手动补一个元素，给这个补位的元素清除浮动（补位元素必须为块级元素）
    如果是行内元素，则无法清除浮动，因此手动加的话，必须加块级元素
    
（2）给父元素添加overflow:hidden
    ---会触发BFC机制，会让浮动的元素继续参与高度计算，用于解决高度塌陷问题
 复制

4、解决高度塌陷的最优方法

 使用伪元素的方法来完成解决高度塌陷的问题
方法：给父元素追加一个行内元素，再将其转化为块级元素，最后给该元素清除浮动即可复制

 .wnqc:after {
    /*必须值，基本语法*/
    content: "";
    /*追加进来是行内元素*/
    display: block;
    /*清除浮动带来的影响*/
    clear: both;
    width: 0px;
    height: 0px;
    font-size: 0px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}复制

	必须使用CSS代码为:
	html,body{
	height:100%;
	}
	若不使用以上代码，则增加了百分比的高度会默认继承父元素高度的百分比，也就是body高度的百分比，即0px

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	/* 窗口的自适应 */
	html,body {
	height: 100%;
	}
	.top {
	height: 100px;
	background-color: red;
	}
	.bottom {
	height: calc(100% - 100px);
	background-color: green;
	}
	.lef {
	width: 200px;
	height: 100%;
	background-color: yellow;
	float: left;
	}
	.rig {
	width: calc(100% - 200px);
	height: 100%;
	background-color: orange;
	float: left;
	}
	</style>
	</head>
	<body>
	<!--
	两栏布局：上下；下面：左右
	-->
	<div class="top"></div>
	<div class="bottom">
	<div class="lef"></div>
	<div class="rig"></div>
	</div>
	</body>
	</html>

	----------------自适应+定位完成----------------------
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	html,body {
	height: 100%;
	}
	.top {
	height: 100px;
	background-color: red;
	}
	.bottom {
	height: calc(100% - 100px);
	background-color: green;
	position: relative;
	}
	.lef {
	width: 200px;
	height: 100%;
	background-color: yellow;
	float: left;
	}
	.cen {
	height: 100%;
	margin: 0 200px;
	background-color: aqua;
	}
	.rig {
	width: 200px;
	height: 100%;
	background-color: yellow;
	position: absolute;
	top: 0;
	right: 0;
	}
	</style>
	</head>
	<body>
	<div class="top"></div>
	<div class="bottom">
	<div class="lef"></div>
	<div class="cen"></div>
	<div class="rig"></div>
	</div>
	</body>
	</html>

	----------------自适应+浮动----------------------
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	html,body {
	height: 100%;
	}
	.top {
	height: 100px;
	background-color: red;
	}
	.bottom {
	height: calc(100% - 100px);
	background-color: green;
	}
	/* 设置左中右 */
	.lef {
	width: 200px;
	height: 100%;
	background-color: yellow;
	float: left;
	}
	.cen {
	height: 100%;
	background-color: aqua;
	margin: 0 200px;
	}
	.rig {
	width: 200px;
	height: 100%;
	background-color: yellow;
	float: right;
	}
	</style>
	</head>
	<body>
	<div class="top"></div>
	<div class="bottom">
	<div class="lef"></div>
	<div class="rig"></div>
	<div class="cen"></div>
	</div>
	</body>
	</html>

	添加的元素：min-height
	缺点：过于死板，若子元素内容较多，则会产生溢出

	前提：父元素里面只有一个子元素或者多个子元素都浮动

	解决方法：

	（1）自己手动补一个元素，给这个补位的元素清除浮动（补位元素必须为块级元素）
	如果是行内元素，则无法清除浮动，因此手动加的话，必须加块级元素

	（2）给父元素添加overflow:hidden
	---会触发BFC机制，会让浮动的元素继续参与高度计算，用于解决高度塌陷问题

	使用伪元素的方法来完成解决高度塌陷的问题
	方法：给父元素追加一个行内元素，再将其转化为块级元素，最后给该元素清除浮动即可

	.wnqc:after {
	/必须值，基本语法/
	content: "";
	/追加进来是行内元素/
	display: block;
	/清除浮动带来的影响/
	clear: both;
	width: 0px;
	height: 0px;
	font-size: 0px;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	}

CSS-宽高自适应