CSS传统布局的入门总结

最新推荐文章于 2022-08-03 18:51:39 发布
最新推荐文章于 2022-08-03 18:51:39 发布
阅读量337 收藏
点赞数
分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/120952219
版权

目录

双飞之图文混排

代码已经放置在gitee仓库:git clone https://gitee.com/TD1900s-88-keys/front-end-learning.git

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"></style>
</head>
<body>
 <section>
   <article>
           <img src="./img/美国队长.png" alt="drumsticl_1">
           <h1>美国队长</h1>
           <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
   </article>
   <article>
           <img src="./img/钢铁侠.png" alt="drumsticl_2">
           <h1>钢铁侠</h1>
           <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
   </article>
 </section>
</body>
</html>

初始效果：

在这里插入图片描述

给上面代码添加css属性：

        /*初始化外边距、内边距*/
        * {
            margin: 0;
            padding: 0;
        }

        img {
            max-width: 100px;
        }

        /*添加背景色，用box-shadow属性来做出一种边框的感觉*/
        section {
            width: 980px;
            background: #f5f5f5;
            box-shadow: 0 0 1px rgba(0, 0, 0, .4) inset;
            /* overflow: hidden;
            在父元素里设置这个属性同样可以触发BFC达到清除盒子塌陷的效果 */
        }

        /*通过浮动来达到两列布局的效果*/
        article {
            width: 50%;
            float: left;
        }

        /*通过添加伪类来清除浮动和外部盒子塌陷的效果*/
        section::after {
            content: "";
            display: table;
            clear: both;
        }

第一阶段效果为：
在这里插入图片描述
接下来升华一下代码

        /*初始化外边距、内边距*/
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            font-size: 33px;
            margin-bottom: 13px;
            font-family: "NSimSun";
        }

        p {
            font-size: 22px;
            color: #F08;
            font-family: "KaiTi"

        }

        h1,
        p {
            width: 66%;
            margin-left: 33%;
        }

        img {
            position: absolute;
            top: 0;
            left: 80px;
            max-width: 60px;
        }

        /*添加背景色，用box-shadow属性来做出一种边框的感觉*/
        section {
            width: 980px;
            background: #f5f5f5;
            box-shadow: 0 0 1px rgba(0, 0, 0, .4) inset;
            /* overflow: hidden;
            在父元素里设置这个属性同样可以触发BFC达到清除盒子塌陷的效果 */

            box-sizing: border-box;
            padding: 33px;
        }

        /*通过浮动来达到两列布局的效果*/
        article {
            width: 49%;
            float: left;
            position: relative;
        }

        /*通过添加伪类来清除浮动和外部盒子塌陷的效果*/
        section::after {
            content: "";
            display: table;
            clear: both;
        }

        article:first-child {
            margin-right: 2%;
        }

最终效果为：
在这里插入图片描述

格子布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        img {
            width: 250px;
        }
    </style>
</head>

<body>
    <section>
        <article>
            <h1>壁纸一</h1>
            <p>招财进宝，日入斗金</p>
            <img src="./images/wallhaven-39pdov_1920x1080.png" alt="#">
        </article>
        <article>
            <h1>壁纸二</h1>
            <p>敛福生财，兴隆大业</p>
            <img src="./images/wallhaven-yj163l_3840x2160.png" alt="#">
        </article>
        <article>
            <h1>壁纸三</h1>
            <p>心想事成,吉祥如意</p>
            <img src="./images/wallhaven-9m95rd_3840x2160.png" alt="#">
        </article>
        <article>
            <h1>壁纸四</h1>
            <p>日转千阶,源源不断</p>
            <img src="./images/wallhaven-6om2qq_3840x2160.png" alt="#">
        </article>
    </section>
</body>

</html>

初始效果为
在这里插入图片描述

添加css代码

        section {
            width: 666px;
        }
        /*让图片两列排序*/
        article {
            box-sizing: border-box;
            width: 333px;
            height: 333px;
            padding: 20px;
            text-align: center;
            float: left;
        }

效果为：
在这里插入图片描述

增加边框线代码：

 /*添加边框线*/
        article {
            border-bottom: 1px solid rgba(0, 0, 0, .3);
            border-left: 1px solid rgba(0, 0, 0, .3);
        }

        article:nth-child(even) {
            border-right: 1px solid rgba(0, 0, 0, .3);

        }

        article:nth-child(1) {
            border-top: 1px solid rgba(0, 0, 0, .3);
        }

        article:nth-child(2) {
            border-top: 1px solid rgba(0, 0, 0, .3);
        }

效果为：
在这里插入图片描述

进阶版：
先删除掉第三个壁纸。
在这里插入图片描述

添加代码：

        /*补齐边框*/
        article:nth-child(3) {
            width: 100%;
            border-right: 1px solid rgba(0, 0, 0, .3);
        }

效果为：

在这里插入图片描述

跨行结束，接下来就是跨列：
修改代码：

        img {
            width: 250px;
        }

        section {
            width: 666px;
        }

        article {
            box-sizing: border-box;
            width: 333px;
            height: 333px;
            padding: 20px;
            text-align: center;
            float: left;
            border-bottom: 1px solid rgba(0, 0, 0, .3);
            border-left: 1px solid rgba(0, 0, 0, .3);
            border-top: 1px solid rgba(0, 0, 0, .3);
        }

        /*设置第二个盒子的高度*/
        article:nth-child(2) {
            height: 666px;
            padding-top: 200px;
            border-right: 1px solid rgba(0,0,0,.3);
        }

效果为：

在这里插入图片描述

由于第二个格子高度太高，直接将section撑大。第三个盒子就被推向远方。

        /*设置第三个盒子，让盒子往上面移动*/
        article:nth-child(3) {
            margin-top: -333px;
        }

最终效果为：
在这里插入图片描述

多列布局（多项等高布局）

通过我人为的设置下面图片相同的宽度，不同的高度

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>等高多列布局</title>
    <style type="text/css">
        img{
            width: 300px;
        }
        /*设置不同高度的图片*/
        div:nth-child(1) img
        {
            height: 200px;
        }
        div:nth-child(2) img
        {
            height: 300px;
        }
        div:nth-child(3) img
        {
            height: 100px;
        }
    </style>
</head>
</head>

<body>
    <div id="container">
        <div class="sanchaji">
            <img src="./images/wallhaven-m9d7v8.jpg">
            <h1>HTML</h1>
            <p>主流网页的文件后缀名</p>
        </div>
        <div class="sanchaji">
            <img src="./images/wallhaven-3kmpxv_3840x2160.png">
            <h1>CSS</h1>
            <p>基于CSS的常用文件后缀</p>
        </div>
        <div class="sanchaji">
            <img src="./images/wallhaven-eyj8dk_3840x2160.png">
            <h1>JavaScript</h1>
            <p>JavaScript，当下前端最火的语言</p>
        </div>
    </div>
</body>

</html>

效果为
在这里插入图片描述

        /*多列布局*/
        .sanchaji {
            width: 33.33%;
            float: left;
            text-align: center;
            box-sizing: border-box;
            padding: 22px;
            color: #FFF;
            background: #99BBFF;
        }

        .sanchaji img {
            width: 33%;
            margin-top: 33px;
        }

        /*设置不同的色彩*/
        .sanchaji:nth-child(1) {
            background: lightblue;
        }

        .sanchaji:nth-child(3) {
            background: lightskyblue;
        }

效果为：
在这里插入图片描述
三列布局中每一列文字或者图片等原因内容长度都不同，导致布局后的高度也不同。
因为不能提前预知这个不确定性的文本高度，所以会带来很多的麻烦。
解决方法：如果预期是300px的列高度，先设置一个超级大的padding-bottom:540px,然后通过负外边距减去多余的240px。然后通过overflow:hidden才会裁剪掉多余的像素。

.sanchaji {
	padding-bottom: 540px;
	margin-bottom:-240px;
	}

效果为：
在这里插入图片描述
表面看上去好像没有改变，但当给外部盒子设置这个属性后:

 #container {
            overflow: hidden;
        }

效果为：
在这里插入图片描述

自适应两列布局

浮动法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>两列自适应布局演示</title>
    <style type="text/css">
        aside {
            width: 20%;
            height: 500px;
            background-color: pink;
            float: left;
        }
    
        main {
            width: 80%;
            height: 500px;
            margin-left: 20%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <aside></aside>
    <main></main>
</body>
</html>

效果为：
在这里插入图片描述

postion定位法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>postion两列布局演示</title>
    <style type="text/css">
        aside {
            width: 20%;
            height: 500px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
        }

        main {
            width: 80%;
            height: 500px;
            margin-left: 20%;
            background-color: lightblue;
        }

        /* 新增外层 */
        .container {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="container">
        <aside></aside>
        <main></main>
    </div>
</body>

</html>

在这里插入图片描述

三列布局

float实现三列布局

<!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>float实现双飞翼布局</title>
    <style>
        body {
            text-align: center;
            min-width: 500px;
        }

        header,
        footer {
            background-color: lightgray;
            height: 70px;
        }

        .left {
            width: 20%;
            height: 500px;
            float: left;
            background-color: pink;
        }

        .right {
            width: 20%;
            height: 500px;
            float: right;
            background-color: lightblue;
        }

        .center {
            height: 500px;
            margin: 0 20%;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <header>#header</header>
    <div class="container">
        <div class="left">#left</div>
        <div class="right">#right</div>
        <div class="center">#center</div>
        <!-- 有两个点要注意：
        *   中间主内容的 HTML 代码必须放在最后，否则右边栏会掉到下一行
        *   中间主内容不能去指定它的宽度，因为我们需要中间列的宽度自适应，
        应该让它默认 auto 就可以了 -->
    </div>
    <footer>#footer</footer>
</body>

</html>

效果为：
在这里插入图片描述

postion实现三列布局

<!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>postion实现双飞翼布局</title>
    <style>
        body {
            text-align: center;
            min-width: 500px;
        }

        header,
        footer {
            background-color: lightgray;
            height: 70px;
        }
        .container
        {
            position: relative;
        }
        .left{
            width: 20%;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: pink;
        }
        .right
        {
            width: 20%;
            height: 500px;
            position: absolute;
            top:0;
            right: 0;
            background-color: lightblue;
        }
        .center{
            height: 500px;
            margin:0 20%;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <header>#header</header>
    <div class="container">
        <div class="left">#left</div>
        <div class="center">#center</div>
        <div class="right">#right</div>
    </div>
    <footer>#footer</footer>
</body>

</html>

效果：
在这里插入图片描述

margin负值法

关于一份关于负外边距使用的权威指南原文：https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

双飞翼布局

布局逻辑：先中间，再两边。中间分成内外两层，外层嵌套的div宽度是以100%撑满整个body元素来显示的向左浮动。

<!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>
        body {
            text-align: center;
            min-width: 500px;
        }

        header,
        footer {
            background-color: lightgray;
            height: 70px;
        }
        /*外层嵌套的div宽度是以100%撑满整个body元素来显示向左浮动的*/
        .container {
            width: 100%;
            float: left;
        }

        .center {
            height: 500px;
            margin: 0 200px;
            background-color: lightskyblue;
        }
        /*让左边的浮动起来，并且margin-left: -100%;即为上移一行*/
        .left {
            width: 200px;
            height: 500px;
            background-color: pink;
            float: left;
            margin-left: -100%;
        }
        /*让右边的浮动起来*/
        .right {
            width: 200px;
            height: 500px;
            background-color: lightblue;
            float: left;
            margin-left: -200px;
        }
        /*清除浮动*/
        footer{
            clear:both;
        }
    </style>
</head>

<body>
    <header></header>
    <main>
        <div class="container">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </main>
    <footer></footer>
</body>

</html>

在这里插入图片描述

圣杯布局

注释：更详细的请看，探讨圣杯布局的构成和实现原理的文章，原文：https://alistapart.com/article/holygrail/

<!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>
        body {
            text-align: center;
            min-width: 500px;
        }

        header,
        footer {
            background-color: lightgray;
            height: 70px;
        }

        main {
            padding: 0 200px;
        }

        .center {
            width: 100%;
            height: 500px;
            background-color: lightskyblue;
            float: left;
        }

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

        .right {
            width: 200px;
            height: 500px;
            background-color: lightblue;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
        footer{
            clear:both;
        }
    </style>
</head>

<body>
    <header>#header</header>
    <main>
        <div class="center">#center</div>
        <div class="left">#left</div>
        <div class="right">#right</div>
    </main>
    <footer>#footer</footer>
</body>

</html>

效果为：
在这里插入图片描述

1900's 88 keys
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
传统布局： 标准流、浮动与定位
devJan的博客
05-23 203
传统布局三种方式 标准流（盒模型） 浮动 定位 一、标准流 元素的划分 行内元素 块级元素 1. 元素的划分 行内元素 - inline 块级元素 - block 特殊的行内块元素 - inline-block - 关键 - 行内元素负责页面的横向排版 - 块级元素负责页面的纵向排版 - 行内元素 - 1. 不能设置宽高 - 2. 默认在一行排列显示 - 3. 当一行显示不下时，会自动换行显示 - 4. 不能设置垂直方向的外边距 - 5. 可以设置padding与水平方向的margin与
CSS网页布局入门教程3：一列固定宽度居中
10-30
CSS网页布局入门教程3：一列固定宽度居中 在本教程中，我们将学习如何使用CSS实现一列固定宽度的网页布局，并将其居中显示。在传统的表格布局中，我们通常使用表格的align="center"属性来实现居中，但是这种方法...
css传统布局
努力的zhiyi
04-20 1123
1、position.        1)position:relative;      相对定位.    以自己所在位置为参考点.                                                                     自己所在位置为 top:0; left:0;                                        
CSS传统布局
lql_h的博客
04-14 385
布局模型在早期没有平板和智能手机等移动设备大行其道的时期，Web页面的设计主要是面向PC端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有4:3、16:10、16:9这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率1024*768设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去28，最终固定长度设置为996即可。当...
前端布局之传统布局
喵酱的笔记本
01-08 477
一、传统布局的相关CSS属性（红色为默认属性） 1、display: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-col...
css入门教程之学习网页布局(1)
12-11
在CSS入门教程中，学习网页布局是至关重要的一步。网页布局指的是通过CSS控制网页中各个元素的显示位置，使得整个页面结构清晰、美观且易于阅读。对于初学者来说，可能会误以为布局是创建网页的第一步，实际上，一个...
推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页
10-30
传统的表格布局方式虽然简单易用，但存在诸多局限性，如代码冗余、不易维护、跨浏览器兼容性差等问题。而CSS布局以其代码简洁、维护方便、兼容性强等特点逐渐成为网页设计的标准方法之一。其中，CSS盒子模型作为CSS...
详解CSS3 弹性布局快速入门
12-09
它解决了传统布局模式，如浮动布局（float）和定位（position）带来的诸多问题，使得CSS代码更加独立于HTML结构。在本文中，我们将深入探讨弹性布局的基本概念和主要属性。 ### 1. 容器属性 #### 1.1 display `...
CSS样式布局入门指南
CSS样式布局简介 CSS（层叠样式表）是用来描述网页的展示效果的样式表语言，其中的布局样式对于网页设计至关重要。本章将介绍CSS样式布局的基础知识，包括其概念、重要性以及基本原则。 ## 1.1 什么是CSS样式布局...
web开发布局---传统布局
qianduanshuo的博客
05-05 784
1、传统布局 盒状模型结合 display 属性、float 浮动以及 position 定位属性设计的各式传统布局形式。 2、说再多不如动手实践，下面举三个例子 html 部分代码： 1 <section> 2 <!-- 传统布局-例1结构：盒子模型 --> 3 <div class="layout-one"> ...
CSS布局之传统布局解决方案
GothaM24的博客
11-25 192
本章主要记录前端css布局，在不考虑细节、转场动画的情况下对页面整个框架构建 一、盒模型 一个web页面由许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。 CSS盒模型有四条边：外边距边、边框边、内填充边、内容边（Content edge、Padding edge、Border edge和Margin edge），四条边由内到外把它划分...
CSS传统布局基础
王中博的博客
03-27 488
摘自 https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA传统布局方案：浮动、定位等手段flex布局方案grid布局方案传统布局方案来源于CSS2，兼容性好flex方案通过父元素单方面配置相关的CSS属性来决定子元素的布局规则，且大多数情况下无需子元素的参与，学习成本低，代码更加简练。但是要到IE10才开始支持，且需要使用-ms-前缀（IE11无需）。...
传统网页布局的三种方式
qq_46405281的博客
08-03 1588
标准流、浮动、定位
viewer图片查看器JQ版
weixin_48058348的博客
11-19 1273
viewer图片查看器JS版 html <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="utf-8"> <title>JS/jQuery图片查看器viewer.js</title> <link rel="stylesheet" href="./css/viewer.css"> <style>
css+html 扁平化博客
weixin_33841722的博客
12-12 263
效果图 代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
简单爬取wallpaper heaven高清壁纸（福利满满~）
热门推荐
菠萝盖饭的博客
04-27 13万+
简单爬取wallpaper heaven高清壁纸 前言：wallpaper heaven是一个拥有百万高清壁纸的网站，其壁纸质量极佳，像我这种懒得用壁纸软件的人，便决定从该网站爬些图片，用来动态切换当作壁纸 文章目录简单爬取wallpaper heaven高清壁纸URL分析程序设计代码实现 URL分析 首先看页面 我们随意点击后查看网址 https://alpha.wallhaven.cc/...
前端布局基础概述
m0_63188530的博客
05-17 880
一 布局方案： 传统布局（浮动、定位），flex布局，grid布局 1.传统布局： 掌握元素的分类和布局特性、浮动原理和定位原理。 2. flex布局： 通过父元素（flex box）单方面配置相关的CSS属性来决定子元素的布局规则，且在大多数情况下不需要子元素（flex item）的参与，就能完成子元素间地布局问题。 3. grid布局： 二维布局，在IE10才支持，需要使用-ms-后缀（IE11不需要） 二. 布局基础要点： 1. CSS基础盒模型（W3C盒模型） Content
CSS学习（六）
weixin_45463877的博客
02-29 613
定位 为什么需要定位？ 提问: 以下情况使用标准流或者浮动能实现吗? 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以: 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值