文章目录
- 1，定位
- 1. margin 与 padding 区别：
- 2. 定位：
- 2，元素分类，浮动，BFC
- 1.1 常见块级元素：
- 1.2 常见行内元素：
- 1.3 行内块级元素
- 2. 浮动：元素脱离文档流【在父级内飘着】，空间释放
- 3. BFC 块级格式化上下文
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;
}
.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: table;
content: '';
}
.box::after {
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
