CSS3起步 05-------盒模型新增样式和其他相应扩展【元素居中等...】

本文链接：https://blog.csdn.net/h1234561234561/article/details/89140550

问题一，img用什莫方法，在不调动它的层级的前提下，使其居中定位
vertical-align属性
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>img水平居中</title>
		<style>
			*{
				color: red;
			}
			html,body {
				height: 100%;
				//水平居中
				text-align: center;
			}
			body::after {
				content: '';
				height: 100%;
				//必须为行内元素，不然无法影响img的基线定位
				display: inline-block;
				vertical-align: middle; 
			}
			img {
			//如果存在同级的行内元素，则以同级行内元素的中部为基线与img基线【中部】对齐
			//高度居中【前提：伪元素也存在vertical-align: middle;声明】
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<img src="img/4.png" />
	</body>
</html>

问题二，怎末使div居中
margin属性
先进行定位，在利用margin:auto特性居中
01，position=absolute，lrtb=0，margin=auto，定位对应的是其父元素容器。
02，position=absolute，lt=50%，margin-lt= -自身的一半

问题三，怎末使文字居中
line-height:父级容器高度;【若只是一行】

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div水平居中以及文字居中</title>
		<style>
			*{
				color: red;
			}
			html,body {
				height: 100%;
				text-align: center;
			}
			#test {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				font: 40px "宋体";
				line-height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="test">
			燃情雪
		</div>
	</body>
</html>

问题四，怎末在不知道元素高宽的情况下居中？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>未知高宽，元素居中</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div {
				display: inline-block;
				background-color: pink;
				padding: 50px;
				text-align: center;
				font-size: 2em;
				font: bold;
				color: #888888;
				position: absolute;
				//先绝对定位元素左上角位置为初始包含块的width50%，height50%
				left: 50%;
				top: 50%;
				//因为translate百分比是自身为参照
				//所以将元素中心基点移动到包含块的width50%，height50%的位置
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div>
			燃情雪
		</div>
	</body>
</html>

问题五，怎末配合UI人员的设计图纸中的框框如图
在这里插入图片描述
高度改为：30px;
box-sizing属性【用处极大】
示例：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>box-sizing</title>
		<style>
			*{
				color: red;
			}
			html,body {
				height: 100%;
				text-align: center;
			}
			#test {
				margin: 20px auto;
				width: 200px;
				height: 30px;
				padding: 0px 30px;
				//整个所设width，height包裹padding，border
				box-sizing: border-box;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="test" value="" placeholder="输入所想" />
	</body>
</html>

问题六，border-radius的具体用法和相关注意点是什莫呢？
注意点：在移动端，因为浏览器是随着操作系统升级而升级的，所以可能比较老版，不支持百分比，所以最好用px值。
用法：左上角【上】，右上角【右】，右下角【下】，左下角【左】
UI图形表示：
在这里插入图片描述
图形错了，但是意思是这个，不改了。
示例：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>border-radius</title>
		<style>
			*{
				color: red;
			}
			html,body {
				height: 100%;
				text-align: center;
			}
			#test {
				margin: 20px auto;
				width: 200px;
				height: 200px;
				border-radius: 30px 10px 20px 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

问题七，怎末禁止系统默认滚动条

html,body {height:100%;overflow:hidden;}

扩展：
滚动条是不可能存在html上，如果html上有overflow:srcoll;则滚动条出现在document上，如果body上同时也存在overflow:auto;则出现在body上

问题八，什么是初始包含块
简单来说，为什么DOM树的根节点是document而不是html？所以咯，在html的外部肯定存在一个父节点，那就是初始包含块，大小为viewport【窗口】的尺寸。

问题九，在html和body还未定位时，body中的绝对定位是相对于谁的呢？这又可以产生什么作用呢？
当然，是相对于初始包含块的定位。那想想既然html是不可能存在滚动条的，那我们可不可以利用层级的不同来解决有些移动端fixed不支持的情况。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解决移动端fixed不支持【绝对定位代替固定定位】</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body {
				height: 100%;
				text-align: center;
				//若body没有overflow属性，则将会在初始包含块中生成滚动条而不是html
				//若body存在overflow属性，则会继承给body
				overflow: auto;
			}
			#test {
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			#wrap{
				height: 1000px;
				width: 200px; 
				background-color: #0000FF;
				line-height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
		<div id="wrap">
			sssssssssssssss
		</div>
	</body>
</html>