CSS4

博主： Xherlock
发布时间：2021 年 10 月 24 日
517 次浏览
暂无评论
5719字数
分类： Web前端

# CSS（四）

## 页面布局

**display**: 用来控制盒子模型的显示方式；

**block**:块级元素显示方式；

**inline**:内联元素显示方式；

**inline-block**:同时具备内联和块级元素的特点；

**table**：块级table元素的显示特点；

**table-cell**: tr,td的显示特点（分栏，弹性，等高）；

**flex**:设置为弹性盒子布局；

**grid**:设置为网格布局；

两大布局方式：

* table+CSS布局
* div+CSS布局

### 三栏-固定宽度布局

首先全部装在一个wrapper盒子下，并确定盒子初始宽度960px，并为之后分栏做准备

将整个盒子划分为header、nav、aside、article、footer五个部分

~~~html
<!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>布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrapper{
            width: 960px;
            margin: 0 auto;
            border: 1px solid;
        }
        header{
            background-color: #f00;
        }
        nav{
            float: left;
            width: 160px;
            background: rgb(38, 204, 140);
        }
        nav ul li{
            list-style-type: none;
        }
        article{
            float: left;
            width: 500px;
            background-color: aqua;
        }
        aside{
           float: left;
           width: 300px;
           background: #3f7ccf;
        }
        footer{
            clear: both;
            color: white;
            text-align: center;
            background: rgb(75, 29, 201);
        } 
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>Hello Xherlock!</h1>
        </header>
        <nav>
            <ul>
                <li>主页</li>
                <li>博客</li>
                <li>主页</li>
            </ul>
        </nav>
        <article>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam voluptatum sit quasi quaerat quis amet quam sed similique est consequatur rem architecto ipsa tempora, labore, accusantium at nostrum provident ex!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquam, quasi ab modi labore, repellat asperiores dicta sapiente repudiandae fuga reprehenderit amet veritatis quia obcaecati reiciendis aut dolor officiis illo.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, sunt! Ipsa odio ipsam fugit ex id, quaerat iste velit sint nesciunt debitis, vitae minus animi tempora! Nostrum, eligendi. Aliquam, quisquam?
        </article> 
        <aside>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam voluptatum sit quasi quaerat quis amet quam sed similique est consequatur rem architecto ipsa tempora, labore, accusantium at nostrum provident ex!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquam, quasi ab modi labore, repellat asperiores dicta sapiente repudiandae fuga reprehenderit amet veritatis quia
        </aside> 
        
        <footer>
            ©2021 Copyright
        </footer>
    </div>
</body>
</html>
~~~

将nav、article、aside三个盒子的宽度加起来应小于等于wrapper的宽度，否则会由于float左浮动的原因下移

显示三栏效果

![image-20211011182938817.png](http://120.78.215.15/usr/uploads/2021/10/2546773425.png)

若在article中增加padding，这个在css中初始化时所有元素设置的padding均为0

此时出现下面这样

![image-20211011183430479.png](http://120.78.215.15/usr/uploads/2021/10/1662784786.png)

最右栏滑移到下一行最左侧

解决办法有

* 设定的article元素减去相应宽度

~~~html
  article{
      float: left;
      width: 480px;
      background-color: aqua;
      padding: 10px;
  }
  ~~~
* 在容器内部的元素添加内边距或外边距

~~~html
  article{
      float: left;
      width: 500px;
      background-color: aqua;
      /* padding: 10px; */
  }
  article p{
  	padding: 10px;
  }
  ~~~
* 使用box-sizing切换盒子缩放方式，加个box-sizing: border-box;

第一种方法比较麻烦，很容易调错，还得进行计算

第二种方法可行，但前提是内容元素没有设定宽度，但是出现多个元素时就很麻烦了

这时可以采用给该栏中所有元素一块添加个div来调整（div属于中性元素：如果不给它应用样式表，啥作用也没）

eg：

~~~html
article .inner{
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
}
<article>
    <div class="inner">
		
    </div>
</article>
~~~

![image-20211011185311676.png](http://120.78.215.15/usr/uploads/2021/10/1898327050.png)

效果还不错

第三种方法最简单，只需要一个box-sizing声明就可(避免内部div为内容添加边距导致浮动变化)，简洁！

### 三栏-中栏流动布局

#### 负外边距法

原理：设置两个容器，一个包装所有三栏，另一个只包装左栏和中栏

主体部分（body）

~~~html
<div id="wrapper">
    <header></header>
      
    <div class="threewrap">
         
        <div class="twowrap">
            <nav></nav>
            <article></article> 
        </div>
        <aside></aside> 
    </div>
    <footer></footer>
</div>
~~~

css主要部分

~~~CSS
*{
    margin: 0;
    padding: 0;
}
#wrapper{
    margin: 0 auto;
}
nav{
    float: left;
    width: 160px;
    background: rgb(38, 204, 140);
}
article{
    width: auto;
    margin-left: 160px;		/* 左栏宽度 */
    margin-right: 300px;	/* 右栏宽度 */
    background-color: aqua;
    padding: 10px 0;
}
aside{
    float: left;
    width: 300px;
    background: #3f7ccf;
    padding: 20px 0;
} 
.threewrap{
    float: left;
    width: 100%;
}
.twowrap{
    float: left;
    width: 100%;
    margin-right: -300px;	// 负的右栏宽度
}
~~~

实现效果

全屏下

![image-20211024101401493.png](http://120.78.215.15/usr/uploads/2021/10/4081998000.png)

缩小页面

左栏和右栏宽度保持不变

#### 单元格法

优点：单元格不需要浮动就可并排显示，应用内边距也不会破坏布局，任何没有明确设定宽度的栏都是流动的

主体部分除去所有div，只保留header、nav、article、aside、footer等

css部分

给nav、article、aside加上display: table-cell;	去除浮动等即可实现

~~~CSS
*{
    margin: 0;
    padding: 0;
}
header{
    background-color: #f00;
}
nav{
    display: table-cell;
    width: 160px;
    background: rgb(38, 204, 140);
}
nav ul li{
    list-style-type: none;
}
article{
    display: table-cell;
    width: auto;
    background-color: aqua;
    padding: 10px 0;
}
article .inner{
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
}
aside{
    display: table-cell;
    width: 300px;
    background: #3f7ccf;
    padding: 20px 0;
}
footer{
    color: white;
    text-align: center;
    background: rgb(75, 29, 201);
}
~~~

实现效果

全屏下

![image-20211024102452067.png](http://120.78.215.15/usr/uploads/2021/10/1497933899.png)

缩小页面

当出现多个article之类的时可以使用nth-child(n)分别为这些元素设置css格式

最后修改：2021 年 11 月 13 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Reverse（十一）
浏览次数: 2629
Win11新机鼓捣记录
浏览次数: 2382
栈~数制转换
浏览次数: 1604
C++学习
浏览次数: 1603
Python实现文件管理系统（重命名和删除）
浏览次数: 1575

顶点软件
你写得非常清晰明了，让我很容易理解你的观点。
mars
博主你好，请问怎么知道的alloc函数属于Buffer下的方法...
lj
该评论仅登录用户及评论双方可见
Mr.Guan
:@(赞一个)
Typecho
欢迎加入 Typecho 大家族

实训第七天
浏览次数: 426
pytorch学习3
浏览次数: 425
网络层（三）
浏览次数: 373
Reverse（八）
浏览次数: 403
JavaScript1
浏览次数: 531

CSS4

Xherlock • 2021 年 10 月 24 日

# CSS（四）

## 页面布局

**display**: 用来控制盒子模型的显示方式；

**block**:块级元素显示方式；

**inline**:内联元素显示方式；

**inline-block**:同时具备内联和块级元素的特点；

**table**：块级table元素的显示特点；

**table-cell**: tr,td的显示特点（分栏，弹性，等高）；

**flex**:设置为弹性盒子布局；

**grid**:设置为网格布局；

两大布局方式：

* table+CSS布局
* div+CSS布局

### 三栏-固定宽度布局

首先全部装在一个wrapper盒子下，并确定盒子初始宽度960px，并为之后分栏做准备

将整个盒子划分为header、nav、aside、article、footer五个部分

将nav、article、aside三个盒子的宽度加起来应小于等于wrapper的宽度，否则会由于float左浮动的原因下移

显示三栏效果

![image-20211011182938817.png](http://120.78.215.15/usr/uploads/2021/10/2546773425.png)

若在article中增加padding，这个在css中初始化时所有元素设置的padding均为0

此时出现下面这样

![image-20211011183430479.png](http://120.78.215.15/usr/uploads/2021/10/1662784786.png)

最右栏滑移到下一行最左侧

解决办法有

* 设定的article元素减去相应宽度

~~~html
  article{
      float: left;
      width: 480px;
      background-color: aqua;
      padding: 10px;
  }
  ~~~
* 在容器内部的元素添加内边距或外边距

第一种方法比较麻烦，很容易调错，还得进行计算

第二种方法可行，但前提是内容元素没有设定宽度，但是出现多个元素时就很麻烦了

这时可以采用给该栏中所有元素一块添加个div来调整（div属于中性元素：如果不给它应用样式表，啥作用也没）

eg：

~~~html
article .inner{
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
}
<article>
    <div class="inner">
		
    </div>
</article>
~~~

![image-20211011185311676.png](http://120.78.215.15/usr/uploads/2021/10/1898327050.png)

效果还不错

第三种方法最简单，只需要一个box-sizing声明就可(避免内部div为内容添加边距导致浮动变化)，简洁！

### 三栏-中栏流动布局

#### 负外边距法

原理：设置两个容器，一个包装所有三栏，另一个只包装左栏和中栏

主体部分（body）

css主要部分

实现效果

全屏下

![image-20211024101401493.png](http://120.78.215.15/usr/uploads/2021/10/4081998000.png)

缩小页面

左栏和右栏宽度保持不变

#### 单元格法

优点：单元格不需要浮动就可并排显示，应用内边距也不会破坏布局，任何没有明确设定宽度的栏都是流动的

主体部分除去所有div，只保留header、nav、article、aside、footer等

css部分

给nav、article、aside加上display: table-cell;	去除浮动等即可实现

实现效果

全屏下

![image-20211024102452067.png](http://120.78.215.15/usr/uploads/2021/10/1497933899.png)

缩小页面

当出现多个article之类的时可以使用nth-child(n)分别为这些元素设置css格式

发表评论 取消回复

CSS4

发表评论取消回复