创建BFC
一、什么是BFC
BFC:全称 Block Formating Context (块级格式化上下文):
它是一个独立的渲染区域,这个区域与外部毫不相干
如何创建BFC
-
float 的值不是 none
-
position 的值不是 static 或者 relative
-
display 的值是 inline - block、table - cell 、flex 、table - caption 或者 inline - flex
-
overflow 的值不是 visible
BFC的作用:
利用BFC 避免margin 重叠
*{ margin: 0; padding: 0; } p { color: #f555; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } div{ /* 激活BFC */ overflow: hidden; } <p>看看我的 margin是多少</p> <div> <p>看看我的 margin是多少</p> </div>
清楚浮动,解决父元素高度坍塌问题
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
/* 激活BFC */
overflow: hidden;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
自适应两栏布局
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
/* 激活BFC */
overflow: hidden;
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
二、列表
有序列表:
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ol>
无序列表:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
定义列表:
<dl>
<dt></dt>
<!-- 会缩进 -->
<dd></dd>
</dl>
列表项样式:list-style
属性值 | 含义 |
---|---|
none | 取消列表样式 |
disc | 默认,标记是实心圆 |
circle | 标记是空心圆 |
square | 标记是实心方块 |
decimal | 标记是数字 |
lower-alpha、upper-alpha | 标记是大小写英文字母 |
<style>
ul{
list-style: upper-alpha;
}
</style>
<ul>
<li>我的</li>
<li>猫咪</li>
</ul>