收藏
天蓬老师批改状态：合格
老师批语：
content-box :border、padding 的设置会破坏元素宽高，必须得重新计算；
实例演示
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>box-sizing属性</title><style type="text/css">.box {width: 200px;height: 200px;text-align: center;border: 10px solid black;padding: 15px;}</style></style></head><body><div class="box"></div></body></html>
border-box :border、padding 的设置不会影响元素的宽高；
实例演示
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>box-sizing属性</title><style type="text/css">.box {width: 200px;height: 200px;text-align: center;border: 10px solid black;padding: 15px;box-sizing: border-box;}</style></head><body><div class="box"></div></body></html>
1.行级元素：水平居中使用：text-align:center，垂直居中：line-height：父元素的高度
2.块级元素：水平居中：margin：0 auto；
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用元素居中方法</title><style>*{font-size: 16px;box-sizing: border-box;}.box {margin: 0 auto;height: 10em;width: 10em;background-color: violet;}.title {line-height: 10em;text-align: center;}</style></head><body><div class="box"><p class="title">我在中间</p></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
