css中盒子模型的布局

最新推荐文章于 2024-03-08 12:52:23 发布

超级马里澳

最新推荐文章于 2024-03-08 12:52:23 发布

阅读量237

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_48802281/article/details/125489825

版权

一水平布局

二垂直布局

css中的盒子模型布局分为两种：水平布局和垂直布局

一水平布局

盒子模型中水平方向影响因素有7个，分别是：margin-left border-left padding-left width padding-right border-right margin-right

浏览器规定：水平方向的七个值相加必须等于其父元素内容区的宽度，如果不等于，浏览器就会过度约束。

那么浏览器进行过度约束时如何调整呢？

1:设置值中没有auto，默认情况，浏览器是调整margin-right

2:可以设置auto值的有三个属性：margin-left width margin-right

当只有1个auto：浏览器就会调整auto的值，让其等式满足

当有2个auto值时：

margin-left width 为auto margin-right为固定值调整width

width margin-right 为auto margin-left为固定值调整width

margin-left margin-right为auto width为固定值同时调整margin-left/right

当有3个auto值时：margin-left width margin-right都为auto 调整width

所以可以得出：auto调整的优先级为width>margin-right/left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   .outer{
			   width: 600px;
			   height: 200px;
			   border: 10px solid yellow;
		   }
		   .inner{
			   width: 100px;
			   height: 100px;
			   background-color: aqua;
			   border: 5px solid red;
			   margin-right: auto;
			   margin-left: auto;
		   }
		   
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>

二垂直布局

垂直布局中默认情况下，父元素的高度是被子元素撑开的，若父元素设置了，设置多少就是多少

若是有多余部分可以用overflow进行处理

overflow: ; 处理子元素溢出的部分

可选值

visible 默认值正常显示

hidden 裁剪多余内容

auto 根据内容生成滚动条

scroll 生成双向滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		      .box1 {
		        width: 200px;
		        /* background-color: #bfa; */
		        height: 100px;
				/* border: 1.25rem solid #0000FF; */
				padding: 30px ;
		        overflow: auto;
		      }
		      
        </style>  
	</head>
	<body>
		<div class="box1">
			爱神的箭哈打开拉萨DHL卡企鹅回去，安居客大概是得到啊萨松，暗示拉萨更多选择哪家才能，啊速度去饿请问九年
			为哦企业去哦i饿我去有，按时间客观地啊速度控制下吧，安监部打算离开Z看上了卡死了，u短期借款仙剑大会的
			为哦企业去哦i饿我去有，按时间客观地啊速度控制下吧，安监部打算离开Z看上了卡死了，u短期借款仙剑大会的
		</div>
	</body>
</html>