做拼团的网站seo人员培训
- 巧妙运用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 */
}