CSS布局技巧|青训营

zerototen
128 阅读5分钟

CSS布局技巧|青训营

汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。|

有序列表

<ol>
   <li>有序列表</li>
   <li>按钮</li>
   <li>初始值：在CSS中，每个属性都有一个初始值，background-color的初始值为transparent，margin-left的初始值为0</li>
   <li>练习1：在页面中有一个容器，给ont-size设置为1.2em,h1设置成比较大的字体,看h1的实际字体是什么</li>
   <li>布局（Layout）是什么？1、确定内容的大小和位置的算法；2、依据元素、容器、兄弟节点和内容等信息来计算</li>
   <li>border的应用练习？通过设置border得到一个三角形</li>
   <li>使用margin:auto水平居中</li>
   <li>overflow</li>
</ol>
<style>
    li{
        list-style-position:none;
        border-bottom:1px solid;
        padding:0.5em;
    }
    li:first-child{
        color:coral;
    }
    li:last-child{
        border-bottom:none;
    }
</style>

image.png

按钮

<button class="btn secondary">普通按钮</button>
<button class="btn primary">主要按钮</button>
<button class="btn secondary">普通按钮</button>

<style>
.btn{
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
    }
.btn.primary{
    color: #fff;
    background-color: #218de6;
    }
</style>

image.png

初始值

在CSS中，每个属性都有一个初始值，background-color的初始值为transparent，margin-left的初始值为0

课后练习1

  • 在页面中有一个容器，font-size设置为1.2em,h1设置成比较大的字体,看h1的实际字体是什么？

    • 练习结果，如果说容器内的font-size设置为1.2em,p字体大小设置为2em，则p的实际字体大小为2em，因为对于p标签内的字体来说，p标签的样式更靠近它。

  • 案例展示：

image.png

布局

  • 常规流5个：行级、块级、表格布局、FlexBox、Grid布局
  • 还有浮动和绝对定位，再回顾浮动和绝对定位前，先回顾一下“CSS边距属性”

前情提要：CSS边距属性

image.png

  • 练习：border的应用练习，通过设置border得到一个三角形
<div>
    <title>三角形</title>
    <div class="triangle"></div>
</div>
<style>
.triangle{
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: white lightcoral white white;
}
</style>
  • 案例展示 image.png

image.png

  • display属性：
    • block 块级盒子
    • inline 行级盒子
    • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
    • none 排版时完全被忽略
  • Flexibility
    • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩；
    • flex-grow有剩余空间时的伸展能力
    • flex-shrink容器空间不足时收缩的能立
    • flex-basis没有伸展或收缩时的基础长度

1 行级

  • inline Formatting Context(IFC)：行内格式化上下文
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素
  • 练习
<div>
        <h1>1、CSS 盒模型 - 行级</h1>
        <p>IFC: Inline Formatting Context（行内格式化上下文）</p>
        <p>行级是可以和其他行级盒子一起放在一行或拆开成多行</p>
        <p>盒模型中的width、height不适用</p>
        <P>触发条件: 块级元素中仅包含内联级别元素</P>
    </div>  
    <h2>1.1 IFC中垂直间距不生效</h2>
    <div class="IFC-wrap">
        <span class="text">文本一</span>
        <span class="text">文本二</span>
    </div>
    <hr>
    <h2>1.2 元素垂直居中：在垂直方向上，子元素会以不同形式来对齐vertical-align</h2>
    <div class="IFC-wrap2">
        <img src="./imgs/block&inline.png" alt="" class="IFC-wrap2-pic">
        <span class="IFC-wrap2-name">name: Mexico</span>
    </div>
    <h2>1.3 多个元素水平居中</h2>
    <div class="IFC-wrap3">
        <span class="IFC-wrap3-text">文本一</span>
        <span class="IFC-wrap3-text">文本二</span>
    </div>
    <h2>1.4 浮动元素优先排列</h2>
    <div class="IFC-wrap4">
        <img src="./imgs/block&inline.png" alt="">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum ratione consequuntur, dignissimos necessitatibus vitae repellat sequi quam omnis consectetur placeat, eaque beatae earum atque tempore nam modi ab excepturi? Totam!
    </div>
<style>
.IFC-wrap{
    border: 1px solid black;
    display: inline-block;
}
.text{
    background-color: coral;
}

.IFC-wrap2{
    border: 1px solid red;
    display: inline-block;

}
.IFC-wrap2-pic{
    height: 100px;
    vertical-align: middle; /*可以使文字水平居中*/
}

.IFC-wrap3{
    border: 1px solid black;
    width: 200px;
    text-align: center;
}
.IFC-wrap3-text{
    background-color:coral;
}

.IFC-wrap4{
    width: 400px;
    border: 1px solid black;
}
.IFC-wrap4 > img{
    float: left;
    height: 100px;
}
</style>
  • 练习展示 image.png

2 块级

  • Block Formatting Context(BFC):块级排版上下文
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display:flow-root
  • BFC内的排版规则
    • 盒子从上到下拜访
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠
  • 练习
<div>
        <h1>2、CSS 盒模型 - 块级</h1>
        <p>BFC：Block Formatting Context（块级排版上下文）</p>
        <p>块级的盒子不会和其他盒子并排排放</p>
        <p>触发条件：当元素属性为float、position:absolute、display:inline-block、overflow非visible(默认值)、flex盒子、grid盒子等属性时，会创建格式上下文。</p>
        <p>应用：1、父盒子塌陷问题；2、外边距合并问题；3、避免浮动元素覆盖；4、父子盒子margin折叠问题</p>
    </div>
    <hr>
    <h2>2.1 父盒子塌陷问题</h2>
    <div class="BFC-box">
        <div class="BFC-box1"></div>
    </div>
    <h2>2.2 外边距合并问题</h2>
    <div>
        <div class="BFC-box2"></div>
        <div class="BFC-format">
            <div class="BFC-box3"></div>
        </div>
    </div>
    <h2>2.3 避免被浮动元素覆盖</h2>
    <div>
        <div class="BFC-box4"></div>
        <div class="BFC-box5"></div>
    </div>
    <h2>2.4 父子盒子margin折叠问题</h2>
    <div>
        <div class="BFC-father-box">
            <div class="BFC-son-box"></div>
        </div>
    </div>
    
<style>
.BFC-box{
    border: 1px solid black;
    overflow: hidden;
}
.BFC-box1{
    height: 100px;
    width: 100px;
    border: 1px solid red;
    float: left;
}

.BFC-box2{
    border: 1px solid black;
    height: 50px;
    width: 50px;
    margin-bottom: 50px;
}
.BFC-format{
    display: flex;
}
.BFC-box3{
    height:50px;
    width:50px;
    border:1px solid red;
    margin-top:50px;    
}

.BFC-box4{
    height: 50px;
    width: 50px;
    background-color: blueviolet;
    float: left;
}
.BFC-box5{
    height: 100px;
    width: 100px;
    background-color: greenyellow;
    overflow: hidden;
}

.BFC-father-box{
    height: 100px;
    width: 100px;
    background-color: darkgreen;
    overflow: hidden;
}
.BFC-son-box{
    height: 50px;
    width: 50px;
    background-color: rgb(120, 161, 175);
    margin-top: 20px;
}
</style>

image.png image.png

3 表格布局

4 FlexBox

image.png

  • Flex Formatting Context(FFC):自适应格式上下文
  • 一种新的排版上下文
  • 可以控制子级盒子
    • 摆放的流向（上下左右）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行
  • 练习
<div>
    <h1>3、FlexBox</h1>
    <div class="flex-box">
        <ul class="flex-box-ul">
            <li>首页</li>
            <li>我的淘宝</li>
            <li>购物车</li>
            <li>收藏夹</li>
            <li>商品分类</li>
            <li>卖家中心</li>
            <li>联系客服</li>
            <li>网站导航</li>
        </ul>
    </div>
</div>
<style>
.flex-box .flex-box-ul{
    /* width: 100%;
    height: 100px; */
    display: flex;
    flex: left;
    /* border: 2px solid #966; */
    list-style: none;
}
.flex-box-ul > li{
    text-align: left;
    padding-right: 2em;
}
</style>

image.png

  • flex-grow image.png

5 Grid布局

image.png

  • Grid Formatting Context(GFC):网格布局格式化上下文
  • display:grid使元素生成一个块级的Grid容器
    • display:grid;容器为一个块级元素
    • display:inline-grid;容器是一个行内元素
  • 使用grid-template相关属性将容器化分为网格
    • grid-template-columns属性设置列宽 
      .grid-box{
    display:grid;
    /* 声明了三列：宽度分别为200px 100px 200px */
    grid-template-columns: 200px 100px 200px;
    grid-gap: 5px;
    /* 声明了两行，行高分别为50px 50px */
    grid-template-rows: 50px 50px;
}
      repeat()函数：可以简化重复的值，该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是相同的，可以使用repeat() 
      .grid-box{
    display: grid;
    grid-template-columns: 200px 100px 200px;
    grid-gap:5px;
    /* 两行，而且行高都为50px */
    grid-template-rows: repeat(2, 50px);
}
    • grid-template-rows属性设置行高
    • justify-content
      • justify-items属性设置单元格内容的水平位置(左中右) image.png
    • align-items
      • align-items属性设置单元格的垂直位置(上中下) image.png
  • 设置每一个子项占哪些行/列

6 浮动

7 绝对定位

image.png

  • position:relative

    • 在常规流里面布局
    • 相对于自己本应该在的位置进行偏移
    • 使用top、left、bottom、right设置偏移长度
    • 流内其他元素当它没有偏移一样布局

  • position:absolute

    • 脱离常规流
    • 相对于最近的非 static 祖先定位
    • 不会对瘤内元素布局造成影响
avatar
文章
阅读
粉丝