css-盒模型

news2025/4/5 23:27:26

巧妙运用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 */
}