HTML5之过度约束

阅读：评论：0

HTML5之过度约束

过度约束是网页布局中的一个概念，指的是子元素在水平方向或竖直方向上的内外边距、边框及内容等之和必须等于父元素的宽度或高度，若不满足等式，浏览器会自动进行相应调整。主要分为两种情形：未设定位时和设置定位时。以下通过代码进行实际展示。

1.未设定位时的过度约束

源代码如下：

<!DOCTYPE html>
<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>过度约束</title><style>* {margin: 0;padding: 0;}.one {height: 400px;background-color: rgb(155, 152, 151);}.two {height: 100px;background-color: skyblue;}</style>
</head><body><div class="one"><div class="two"></div></div>
</body></html>

水平布局上，元素需满足的等式是

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素宽度

浏览器是通过给属性值设置auto来进行调整的

（1）都未设置，自动调整width使等式满足

初始时代码效果如图：

此时相当于设置了width:auto

(2)当给width设置固定宽度100px后，浏览器会自动调整margin-right使等式满足

效果如图：

此时相当于设置了margin-right:auto

(3)当给width设置固定宽度后，再设置margin-left:auto

效果如图：

（4）width的宽度固定时，同时设置左右外边距为auto

效果如图：

注意：当width与margin同时设置为auto时，以width为准。宽度固定时，默认调整margin-right的值为auto。

2.设置定位时的过度约束

源代码如下：

<!DOCTYPE html>
<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>过度约束</title><style>* {margin: 0;padding: 0;}.one {height: 400px;background-color: rgb(155, 152, 151);position: relative;}.two {position: absolute;height: 100px;background-color: skyblue;}</style>
</head><body><div class="one"><div class="two">123</div></div>
</body></html>

水平布局上，元素需满足的等式是

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素宽度

垂直布局也需满足等式

（1）这种情形下，元素的宽度默认是被内容撑开的。没有内容的情况下不设置宽度，是显示不出来的。这里给子元素添加“123”为内容进行演示。设置宽度为auto不再起作用，默认会调整right的值。相当于设置了right：auto

效果如图：

（2）给right设为固定值0，设置left:auto

效果如图：

（3）当给right和left设置固定值0时，之后的规则同未设置定位时一致。其中的优先级为right>left>width>margin。这里重点介绍一下如何利用定位的过度约束实现元素垂直水平居中的效果。

样式设置如下：

效果图：

总结：浏览器的过度约束，重点需要关注不同设置的优先级大小：right>left>width>margin

本文发布于:2024-02-01 06:50:04，感谢您对本站的认可！