css-盒模型

news/2025/2/11 21:55:27/

巧妙运用margin负值
盒模型和怪异盒模型(border padding 包含在内)
display: block 能让textarea input 水平尺寸自适应父容器? – 不能

* {box-sizing: border-box; // bs: bb
}

<textarea/> 是替换元素,尺寸由内部元素决定,不受display水平影响. 当然可以直接设置宽度100%

margin塌陷(合并/重叠)

标准流, 上面的盒子设置 margin-bottom, 下面的设置了margin-top, 这个两个会重叠, 变为较大的一个
但是, 如果脱标,比如浮动之后就不会重叠了; 或者两个元素在flex/grid 内,

<!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>Document</title><style>div{width: 100%;height: 200px;background-color: antiquewhite;margin-bottom: 100px;float: left;}.box2{background-color: aqua;margin-top: 100px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

margin

margin和padding 用百分比单位, 参照的是父级的宽度,设置width 也是参照父级的宽度…
xxx xxx xxx
xxx 2 xxx
xxx 2
如何让2 向下延伸, 又不会挤走第三行?

padding

inline 元素的padding 其实也影响布局.
有两点:
- 下面的a元素的padding 把上下的遮住了. 导致只能触发 alert(2)
- padding的出现使contianer产生了滚动条

 <style>.container {width: 200px;height: 100px;margin: 200px auto;overflow: auto;background-color: #f0f3f9;}a {font-size: 12px;padding: 100px 10px;background-color: red;opacity: .7;}
</style>
<div class="container"><div onclick="alert(1)">11</div><a href="#" onclick="alert(2)">yogaMiller</a><div onclick="alert(2)">22</div>
</div>

在这里插入图片描述

盒模型定位 flex/grid 是写页面的基础
最初是用来做文字环绕图片的效果的. 后面发展成了一种布局方式
可以轻松实现

ul li {float: left;float: right; 
}
// 元素浮动后,脱离文档流, 且有了行内块元素的特点. 可设置宽高等.

清除浮动

.clearfix::after{content: "";display: block;clear: both;height: 0;visibility: hidden;	
}
.clearfix{*zoom: 1; /* ie 6 7  感觉不太需要了*/
}
.box{overflow: hidden; /* overflow-x: auto scroll */
}