阅读 55

BFC与列表

创建BFC

一、什么是BFC

BFC:全称 Block Formating Context (块级格式化上下文):

它是一个独立的渲染区域,这个区域与外部毫不相干

如何创建BFC

  1. float 的值不是 none

  2. position 的值不是 static 或者 relative

  3. display 的值是 inline - block、table - cell 、flex 、table - caption 或者 inline - flex

  4. 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>
复制代码
文章分类
前端
文章标签