文章目录
1，定位
1. margin 与 padding 区别：
1. padding【行内间距】，可以设置在一个块里边
2. margin【两个块的外间距】，必须是两个块之间
3. 注意：一般margin 设置上面块的下边距margin-bottom，左面块的右边距margin-right
2. 定位：
-
不脱标的
定位
：static静态定位，relative 相对定位
2. 脱标（脱离文档流）的定位：absolute 绝对定位，fixed 固定定位
3.
static
设置 left/top/right/bottom 没有作用，对margin/padding敏感。
4.
relative
不脱标，【定位占据原来位置】根据 left/top/right/bottom 位置做偏移
5.
absolate
脱标，不占位置，根据父元素【否则窗口】定位，
6.
fixed
脱标，不会局限于父级元素，一直浮在窗口
7.
sticky
是 relative 和 fixed 结合，不脱标，仅在父级内粘性定位【设置了top等值】，
2，元素分类，浮动，BFC
1.1 常见块级元素：
1. 举例
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
2. 特征： 宽高可控，
无宽度时默认100%，
块级元素内可包含块级元素以及行内元素，
块级元素内不能放入其他块级元素，
大多为结构性标记。
3.转为块级元素：
display : block
1.2 常见行内元素：
- 举例：
<b>...</b> 加粗
<strong>...</strong> 加粗
<sup>...</sup> 上标
<sub>...</sub> 下标
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
2. 特征：和其他元素在一行；
宽高以及内边距不可控；
宽高依靠自身字体大小和图形支撑，不可改变；
行内只能包括行内不能包含块级；
padding值可以设置
margin 值只能设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效
大多数为结构性标记
-
转为行内元素：
display:inline
1.3 行内块级元素
- 举例：
<span>...</span>
<a>...</a>
<img/>
<textarea>...</textarea>
<button>..</button>
<input>
<br>
<label>...</label>
<select>...</select>
<canvas>...</canvas>
<progress>...</progress>
<cite>...</cite>
<code>...</code>
<strong>...</strong>
<em>...</em>
<audio>...</audio>
<video>...</video>
-
特征：
可以设置宽高
可以设置内外边距 - 转为行内块元素： display : inline-block
2. 浮动：元素脱离文档流【在父级内飘着】，空间释放
- 行内元素不能设置宽高，但设置浮动后脱标就可以设置宽高了，更像行内块元素，默认宽度为内容宽度
-
为什么需要清除浮动：
- 【浮动导致塌陷】：父盒子不设置高度，子盒子设置高度，父盒子高度取决于子盒子，若子盒子浮动【脱标】，导致父盒子高度为 0 ，此时 需要清除浮动，让父盒子重新获得高度。
-
清除浮动的5种方式
-
clear
: 包含三个值：
left
, right, both- 用 left : 当前两兄弟都 左 浮动时；
- 用 right : 当前两兄弟都 右 浮动时；
- 用 both : 当前两兄弟 任意 浮动时；
- 若是浮动导致塌陷，让最后一个兄弟采用clear:both。解决父盒子高度为零的问题。
-
<style>
#child1 {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
#child2 {
width: 50px;
height: 50px;
background-color: green;
float: right;
}
#clear {
clear: both;
}
</style>
</head>
<body>
<div id="main">
<div id="child1"></div>
<div id="child2"></div>
<div id="clear"></div>
</div>
</body>
3. 浮动导致塌陷：给 父级 元素设置 单伪元素清除 `clearfix::after` 属性：
#child1 {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
#child2 {
width: 50px;
height: 50px;
background-color: green;
float: right;
}
/* #clear {
clear: both;
} */
.clearfix::after {
content: "";
display: block;
clear: both;
}
<div id="main" class="clearfix">
<div id="child1"></div>
<div id="child2"></div>
</div>
<div id="main2" class="clearfix">
<div id="child1"></div>
<div id="child2"></div>
</div>
4. 溢出隐藏：解决浮动塌陷问题 overflow: hidden;
#main3 {
background-color: green;
overflow: hidden;
}
<div id="main3">
<div id="child1"></div>
<div id="child2"></div>
</div>
5. 双伪元素清除浮动
<style>
部分代码：
/* 双伪元素清除法 */
.box::before,
.box::after {
/* 这里用display:block也可以,用table是可以解决盒子塌陷问题 */
display: table;
/* content必须要有 不然伪元素无法生效 */
content: '';
}
.box::after {
/* 这里是清除浮动的关键代码 */
clear: both;
}
/* 双伪元素清除法 */
/* 单伪元素清除法
.box::after {
伪元素默认是行内元素,需要转成行内块元素才能撑起父盒子的高度
display: block;
需要注意的是,伪元素必须加content属性才能生效
content: '';
clear: both;
}
单伪元素清除法 */
/* 额外标签法 */
/* .clear {
clear: both;
} */
/* 额外标签法 */
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
3. BFC 块级格式化上下文
-
作用：给盒子形成
独立的渲染区域
，使内部元素的渲染不会影响外界 -
触发 BFC 条件：
- 浮动元素： float 不是 none
- 绝对定位元素： position 是 absolate 或 fixed
- 块级元素： overflow 不是 viisible
- flex 元素
- inline – block 元素
-
应用场景：
- 清除浮动，【浮动导致父级塌陷】
#child3 {
width: 100px;
height: 100px;
background-color: #ccc;
float: left;
}
.bfc {
/* 解决父级盒子高度塌陷问题 */
overflow: hidden;
}
<div id="main3" class="bfc">
<div id="child3"></div>
<i class="bfc">我是行内元素</i>
</div>
版权声明：本文为bug_caicai原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。