re:从0开始的CSS学习之路 9. 盒子水平布局

0. 写在前面

过年也不能停止学习,一停下就难以为继,实属不应
re:从0开始的CSS学习之路 9. 盒子水平布局_第1张图片

1. 盒子的水平宽度

当一个盒子出现在另一个盒子的内容区时,该盒子的水平宽度“必须”等于父元素内容区的宽度
盒子水平宽度:
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

若强行设置盒子的水平宽度不等于父元素内容区的宽度时,这种情况称为“过度约束
若发生过度约束时,浏览器会按照从左到右的顺序尽可能的满足条件,若不满足则自动调整margin-right使等式成立
(注:现在好像不能在浏览器中通过F12选元素查看到浏览器的自动调整,不知道是为啥)

margin-leftmargin-rightauto属性:让浏览器自动设置左右外边距
margin-leftmargin-right的值设置为auto后,浏览器会根据上述公式平均分配左右外边距

盒子的水平居中
width: 100px;
margin: 0 auto;
注意:必须指明宽度width,否则默认值为auto,浏览器会默认使用width进行内容区的填充

示例如下:

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	
	<title>Box horizontal layouttitle>

	.father {
		width: 1200px;
		height: 200px;
		border: 5px solid red;
	}
	
	.son {
		width: 200px;
		height: 200px;
		background-color: #c7decc;
	
		margin: 0 auto;
	}
head>

<body>
	<div class="father">
		<div class="son">div>
	div>
body>

html>

你可能感兴趣的:(从0开始的CSS之旅,css,学习,前端)