CSS教程

CSS_11——布局(简单记录)

本文主要是介绍CSS_11——布局(简单记录),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. 布局

1.1 float属性

清除浮动:clear属性

1.2 position属性(定位

position

可实现双列、三列布局

absolute

粘滞定位

positon:sticky

1.float

float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。
如下图:

image.png

这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。

<style>
    .content{
        margin: 100px auto;
        width: 300px;
    }
    .box{
        float: left;
    }
</style>

    <div class="content">
        <div class="box"><img src="./imgs/authority-employee.png" alt=""></div>
        <div class="text">CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表:外部样式表、内部样式表和内联样式。</div>
    </div>
 

‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。
网页中最常见的布局如下:

网页常见布局.png

用float做

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
   }
   .nav li{
       float: left;
       width: 100px;
       height: 100px;
       margin-left: 20px;
       background-color: yellowgreen;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
       float: left;
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
       float: left;
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>


    
    <div class="header">
        
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        
    </div>
    

    
    <div class="main">
        
        <div class="article"></div>
        

        
        <div class="aside"></div>
        

    </div>
    

    
    <div class="footer"></div>
    
 

比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:
如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;
引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。

2.position

position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
        /*父元素用相对定位*/
        position: relative;
   }
   .nav li{
       /*子元素用绝对定位*/
       position: absolute;
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
   }
   .nav li:nth-child(1){
       left: 20px;
   }
   .nav li:nth-child(2){
       left: 140px;
   }
   .nav li:nth-child(3){
       left: 260px;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
       position: relative;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
       position: absolute;
       top: 0;
       right: 0;
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>


    
    <div class="header">
        
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        
    </div>
    

    
    <div class="main">
        
        <div class="article"></div>
        

        
        <div class="aside"></div>
        

    </div>
    

    
    <div class="footer"></div>
    
 

同样的效果

image.png

不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。

3.flex(推荐)

flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。
使用方法:
在父元素使用 display:flex;确定弹性作用的范围。
然后
justify-content:center(space-around,space-between等);水平方向布局;
align-items:center(flex-start,flex-end等);垂直方向布局;

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
        display: flex;
   }
   .nav li{
       /*子元素用绝对定位*/
       width: 100px;
       height: 100px;
       margin-left: 20px;
       background-color: yellowgreen;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
       display: flex;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>


    
    <div class="header">
        
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        
    </div>
    

    
    <div class="main">
        
        <div class="article"></div>
        

        
        <div class="aside"></div>
        

    </div>
    

    
    <div class="footer"></div>
    
 

2. z-index

一旦修改元素的定位方式,元素可能发生堆叠,可以使用z-index来控制有元素在框中出现的堆叠数值

Z-index:value 数值越大,级别越高,越显示在前

3. BFC

3.1 简介

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

注意:一个BFC的范围包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中,那么就意味着这个元素能与两个BFC中的元素发生作用,就违反了BFC的隔离作用。

3.2 BFC触发方式

  1. 根元素,即HTML标签
  2. 浮动元素:float值为leftright
  3. overflow值不为 visible,为 autoscrollhidden
  4. display值为 inline-blocktable-celltable-captiontableinline-tableflexinline-flexgridinline-grid
  5. 定位元素:position值为 absolutefixed

注意:display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC。

image-20210821174434004

BFC可以实现容纳浮动元素、组织文本环绕

4. 参考

转载CSS布局:float、position、flex

这篇关于CSS_11——布局(简单记录)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!