慕课网CSS工作应用+面试（3）布局

「爱情、让人受尽委屈。」 2022-03-01 17:26 237阅读 0赞

**1.布局简介**

早期以table为主（简单）

后来以技巧性布局为主（难）

现在有flexbox/grid（偏简单）

响应式布局是必备知识

常用布局方法：table布局、float浮动+margin、inline-block布局、flexbox布局

**2.table布局**

table{
        width:800px;
        height:200px;
        border-collapse: collapse;
    }
    .table{
        margin-top:20px;
        display: table;
        width:800px;
        height:200px;
    }
    .table-row{
        display: table-row;
    }
    .table-cell{
        vertical-align: center;
        display: table-cell;
    }
    
    <table>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
    </table>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">
                左
            </div>
            <div class="right table-cell">
                右
            </div>
        </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**3.布局属性**

display（确定元素的显示类型）：block、inline、inline-block

position（确定元素的位置）：static、relative、absolute、fixed

z-index

**4.flexbox布局**

弹性盒子、盒子本来就是并列的、指定宽度即可

.container{
        width:800px;
        height:200px;
        display: flex;
        border:1px solid black;
    }
    .flex{
        background:red;
        margin:5px;
        flex:1
    }
    
    <div class="container">
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

.container{
        width:800px;
        height:200px;
        display: flex;
    }
    .left{
        background: red;
        display: flex;
        width:200px;
    }
    .right{
        background: blue;
        display: flex;
        flex:1;
    }
    
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
容器的属性：  
1.flex-direction  
2.flex-wrap  
3.flex-flow  
4.justify-content  
5.align-items  
6.align-content

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
      flex-direction: row | row-reverse | column | column-reverse;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }

justify-content属性定义了项目在主轴上的对齐方式。

.box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

align-items属性定义项目在交叉轴上如何对齐。

.box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]  
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

flex布局还可以参考：  
https://www.runoob.com/w3cnote/flex-grammar.html

**5.float布局**

float：元素浮动、脱离文档流但不会脱离文本流、  
float对自身的影响：形成块（BFC）、位置尽量靠上、位置尽量靠左（右）  
对兄弟的影响：上面贴非float元素、旁边贴float元素、不影响其它块级元素的位置、影响其它块级元素内部文本  
对父级元素的影响：从布局上消失、高度塌陷、

.container{
        background:red;
        width:400px;
        margin:20px;
    }
    .p1{
        background:green;
        float:left;
        width:200px;
        height:50px;
    }
    .container2::after{
        content: 'aaa';
        clear:both;
        display: block;
        visibility: hidden;
        height:0;
    }
    
    <div class="container">
        <span class="p1">
            float
        </span>
        <div class="p2">
            很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
        </div>
    </div>
    
    <div class="container container2">
        <span>写几个字</span>
        <span class="p1">
            float
        </span>
        <span class="p1">
            float
        </span>
    </div>
    <div class="container" style="height:200px;background:blue;">
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

脱离文档流，可以看下图，class='p2’直接是一个盒模型，包括float部分的，没有脱离文本流就是会影响p2的文本布局。

还有p1里面span本来是行内元素不能设置宽高，但是float：left之后变成了BFC，可以设置宽高了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]

**6.inline-block布局**

inline-block：像文本一样排block元素、没有清除浮动等问题、需要处理间隙

.container{
        width:800px;
        height:200px;
        font-size:0;
    }
    .left{
        font-size:14px;
        background:red;
        display: inline-block;
        width:200px;
        height:200px;
    }
    .right{
        font-size:14px;
        background:blue;
        display: inline-block;
        width:600px;
        height:200px;
    }
    
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]  
inline-block中每一块可以想象成文字，文字之间存在间隙，解决方法是设置父元素font-size:0，子元素font-size都设置成某个固定值。

或者子元素之间不留空白，如下：

<div class="container">
        <div class="left">
            左
        </div><div class="right">
            右
        </div>
    </div>
    
    //或者注释方式
    <div class="container">
        <div class="left">
            左
        </div><div class="right">
            右
        </div>
    </div>

**7.响应式布局**

在不同设备上正常使用、一般主要处理屏幕大小问题

主要方法：  
隐藏（那部分可以在移动端进行隐藏，直接隐藏不显示或者点击再显示）  
\+折行（）  
\+自适应空间

具体方法：  
1.rem（通过HTML字体大小来确认元素大小的办法，针对不同大小屏幕给出不同大小的字号，元素就会根据字体大小进行缩放）、  
2.viewport（手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中）、  
3.media query（根据不同设备特性匹配不同样式） 、

**rem**

rem（font size of the root element）是指相对于根元素的字体大小的单位。

参考文章：  
http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/  
http://caibaojian.com/web-app-rem.html

在讲rem屏幕适配之前，先说一下一般做移动端适配的方法，一般可以分为：  
1 简单一点的页面，一般高度直接设置成固定值，宽度一般撑满整个屏幕。  
2 稍复杂一些的是利用百分比设置元素的大小来进行适配，或者利用flex等css去设置一些需要定制的宽度。  
3 再复杂一些的响应式页面，需要利用css3的media query属性来进行适配，大致思路是根据屏幕不同大小，来设置对应的css样式。

上面的一些方法，其实也可以解决屏幕适配等问题，但是既然出来的rem这个新东西，也一定能兼顾到这些方面，下面具体使用rem：

**viewport**

**media query**

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
    
    
    <style>
    @media (max-width: 600px) {
      .facet_sidebar {
        display: none;
      }
    }
    </style>

当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false， 标签指向的样式表也将会被下载(但是它们不会被应用).

示例1：

.container{
        margin:0 auto;
        max-width:800px;
        display: flex;
        border:1px solid black;
    }
    .left{
        display: flex;
        width: 200px;
        background:red;
        margin:5px;
    }
    @media (max-width: 640px){
        .left{
            display: none;
        }
    }
    .right{
        display: flex;
        flex: 1;
        background:blue;
        margin:5px;
    }
    
    <div class="container">
        <div class="left">
            这里是一些不重要的内容，比如友情链接、广告
        </div>
        <div class="right">
            这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
        </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]  
示例2：

html{
        font-size: 20px;
    }
    .container{
        margin:0 auto;
        max-width:800px;
        border:1px solid black;
    }
    .intro{
        display: inline-block;
        width:9rem;
        height:9rem;
        line-height: 9rem;
        text-align: center;
        border-radius: 4.5rem;
        border:1px solid red;
        margin:.3rem;
    }
    @media (max-width: 375px){
        html{
            font-size:24px;
        }
    }
    @media (max-width: 320px){
        html{
            font-size:20px;
        }
    }
    @media (max-width: 640px){
        .intro{
            margin:.3rem auto;
            display: block;
        }
    }
    
    <div class="container">
        <div class="intro">
            介绍1
        </div>
        <div class="intro">
            介绍2
        </div>
        <div class="intro">
            介绍3
        </div>
        <div class="intro">
            介绍4
        </div>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 11]

**8.主流网站常用布局**

**9.CSS面试题**

1.实现两栏（三栏）布局的方法

表格布局  
float+margin布局（兼容性比较好）  
inline-block（间隙需要处理）  
flexbox布局（兼容性不是很好）

2.position：absolute/fixed有什么区别？

absolute相对上一级定位元素进行定位  
fixed相对于屏幕（viewport）定位

3.display:inline-block的间隙

原因：字符间距  
解决：消灭字符（HTML中两部分间空白）或者消灭间距（font-size:0）

4.如何清除浮动

原因是：浮动的元素不会占据父级布局空间，可能会超出父级元素空间，会对其他元素产生影响。

方式：  
1.让盒子负责自己的布局（overflow:auto）  
2. ::after\{clear:both\}

5.如何适配移动端页面？

viewport

rem/viewport/media query

设计上：隐藏/折行/自适应

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220301/8c81786b94be497383a89a9c76f8a8b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220301/a9f5a2bfc5b3467b8686704aeabedd3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220301/3a6b1febf3e7440482c3a1ec8fd8e537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220301/c29c54b51f8a477e913a64e0f479fcdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220301/db76a0710806463ea43e04afe876be39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220301/c0404450861c4973b3a9e5d4be1488e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220301/1c7aa305287042e4ae8aa1a50a80c800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220301/d00561e2881d4d038ea7841887d7a7ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]: /images/20220301/b6d892e35cc843cfb22a9b130ba78fb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]: /images/20220301/11d32401e79d49028f1a40156778e13b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 10]: /images/20220301/a6bede34592c4d29a488f5fd991ffa76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 11]: /images/20220301/7d634aa9ebe34532be757db583f402a1.png