css常见布局

1.两列布局左侧固定右侧自适应

T)1$QK0(ISM97P(89V%EQUI.png

1.float布局实现

        <style>
       .left{
            width: 200px;
            float: left;
            background-color: skyblue;
        }
        .right{
           background-color: red;
        }
      </style>
     <div class="left">左右浮动</div>
    <div class="right">右边自适应</div>

2.float布局实现

     
        .left1{
            width: 200px;
            float: left;
            background-color: skyblue;
        }
        .right1{
            width: calc(100%-200px);
            background-color: red;
        }
        
         <div class="left1"></div>
          <div class="right1"></div>

3. flex盒子实现两栏布局

<style>
       .flex{
           display: flex;
       }
       .left2{
           width: 200px;
          
           background-color: skyblue;
       }
       .right2{
           
           background-color: red;
       }
       
       </style>
    <div class="flex">
       <div class="left2"></div>
       <div class="right2" style="flex:1"></div>
   </div>

2.三栏布局两边固定中间自适应

缺点：主要内容模块无法最先加载，当页面中内容较多时会影响用户体验

Z@XAZ9435N4IP(_%3IG}X.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
         margin: 0;
         padding: 0;
     }
     /* 浮动实现三栏布局 */
     .divBox {
         height: 500px;
         background-color: pink;
     }
     .left {
         float: left;
         width: 200px;
         height: 100%;
         background-color: royalblue;
     }
     .content {
         float: left;
         width: calc(100% - 200px - 200px);
         height: 100%;
         background-color: green;
     }
     .right {
         float: left;
         width: 200px;
         height: 100%;
         background-color: skyblue;
     }
   
     /* flex */
     .flexBox{
        height: 500px;
        display: flex;
     }
     .left1{
        width: 200px;
         height: 100%;
         background-color: royalblue; 
     }
     .right1{
        width: 200px;
         height: 100%;
         background-color: royalblue; 
     }
     .content1{
        flex:1;
        height: 100%;
        background-color: skyblue;
     }
     /* BFC实现 */
     .bfcBox{
        
        height: 300px;
     }
     .left2{
        float: left;
        height: 100%;
        width: 200px;
        background-color: green;
     }
     .content2{
        height: 100%;
        overflow: hidden;
        background-color: red;
     }

     .right2{
        float: right;
        height: 100%;
        width: 200px;
        background-color: green;
     }

    </style>
</head>
<body>
    <div class="divBox">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
    <br>
    <div class="flexBox">
        <div class="left1"></div>
        <div class="content1"></div>
        <div class="right1"></div>
    </div>
    <br>
    <div class="bfcBox">
        <div class="left2"></div>
        
        <div class="right2"></div>
        <div class="content2"></div>
    </div>
</body>
</html>

3.圣杯布局

解决：content要第一个渲染的问题
缺点：有一个最小宽度，当页面小于最小宽度时布局就会乱掉。所以最好给body设置一个min- width。这个min-width肯定不能是试出来的，怎么计算呢？就是left-width * 2 + right-width，至于为什么，简单的说就是：“由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行”。所以布局就被打乱了

4.双飞翼布局

优点：解决了圣杯布局的问题
缺点：多加一层 dom 树节点，增加渲染树生成的计算量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 双飞翼布局 */
        .container {
            /* 确保中间内容可以显示出来，两倍left宽+right宽 */
            /* min-width: 600px; */
            height: 300px;
            background: pink;
        }
        .middle {
            float: left;
            width: 100%;
            height: 300px;
            background-color: turquoise;
           
        }
       .middle .inner{
        margin: 0 200px;
       }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -100%;
            background-color: teal;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -200px;
            background-color: seagreen;
        }
        /* 圣杯布局 */
        .box{
            height: 200px;
            padding: 0 200px;
        }
        .middle1{
            height: 100%;
            width: 100%;
            background-color: skyblue;
            float: left;
        }
        .left1{
            position: relative;
            left: -200px;
            height: 100%;
            width: 200px;
            float: left;
            margin-left: -100%;
            background-color: red;

        }
        .right1{
            position: relative;
            right: -200px;
            height: 100%;
            width: 200px;
            float: left;
            margin-left: -200px;
            background-color: red;

        }
    </style>
</head>
<body>
<!-- 双飞翼布局 -->
<div class="container">
    <div class="middle">
        <div class="inner">双飞翼布局</div>
    </div>
    <div class="left">左边固定宽度200px</div>
    <div class="right">右边固定宽度200px</div>
</div>
<br>
<div class="box">
    <div class="middle1">圣杯布局</div>
    <div class="left1"></div>
    <div class="right1"></div>
</div>

5.清除浮动

      .floatBox{
            background-color: red;
        }
        .float,.float1{
            float: left;
            height: 200px;
            width: 200px;
            background-color: skyblue;
        }
        .float1{
            background-color: green;
        }
        /* 额外标签移除 */
        .clearBox{
            clear: both;
        }
        /* Bfc清除浮动 */
        /* .floatBox{
            overflow: hidden;
        } */
        /* 伪元素清除法 推荐使用 */
        .clearfix::after{
            content: '';
            display: block; 
          height: 0; 
            clear: both;
            visibility: hidden; 
        }
        /* 双伪元素清除法  推荐使用*/
        .clearfix::after,.clearfix::before{
            content: '';
            display: block;
            /* height: 0; */
            clear: both;
            /* visibility: hidden; */
        }
    </style>
</head>
<body>

<div class="floatBox clearfix">
    <div class="float "></div>
    <div class="float1 "></div>
    <!-- <div class="clearBox"></div> -->
</div>

6.BFC `Block Formatting Context`， “块级格式化上下文”

BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

触发条件

float 不为 none
position 为 absolute 或 fixed
overflow 不为 visible
display 为 inline-block 或 table 或 flow-root flex

布局规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

实际案例

清除浮动
解决margin-top塌陷
解决margin重叠
两栏布局自适应其实css最初设计浮动就是为了实现文字绕图的效果，虽然浮动会覆盖别的元素，但不会覆盖住文字，利用BFC规则解决float布局会影响其他元素的特性

7.box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box
context-box:W3C的标准盒子模型，设置元素的height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

8.css选择器

基本选择器

id选择器(#myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
通配符选择器（*）
权重就近原则：!important >style内联> id > class/伪类/属性 > tag >组合选择器/*
复合选择器会叠加权重

组合选择器

相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height

前端面试复习