本文深入探讨HTML盒子模型，包括水平布局的margin、border、padding和width的平衡，垂直布局的特性，以及如何使用overflow属性处理溢出内容。此外，还介绍了如何添加阴影效果和创建圆角边框，如box-shadow和border-radius的用法。
一.盒子的水平布局
在水平方向上margin-left bored-left padding-left width bored-right margin-right 浏览器规定 水平反向的七个值相加必须要等于父元素内容去的宽度
如果不等于父元素，浏览器就会自己调整这七个值，让我们的等式成立，这个过程叫过度约束浏览器调整：
1 .如果7个值中没有设置auto（自动），那浏览器就会调整margin-right；
2. 7个值中有3个值可以何止auto，margin-lef， width，margin-right
1个auto时，其他俩个值为固定值
浏览器就会调整这个auto
2个auto，其他的一个值为固定值
margin-lef width 调整width
margin-right width 调整width
margin-lef margin-right 同时调整，使他们的距离各占一半
3个auto
调整width
二.盒子的垂直布局
块元素 宽度默认是父元素的100%，高度是被内容撑开的
overflow属性可以设置溢处的内容
可选值
visible 默认值 内容正常显示
&nbs
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
