CSS布局

最新推荐文章于 2022-08-20 20:26:02 发布
最新推荐文章于 2022-08-20 20:26:02 发布
阅读量163 收藏 1
点赞数
文章标签： css html5 html
原文链接：https://blog.csdn.net/qq_42033567/article/details/112071451?spm=1001.2014.3001.5502
版权

一、单列布局

1. 等宽的单列布局

header,content 和 footer 等宽的单列布局

代码如下：
<!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值
           1个值：上 下 左 右均一样
           2个值：先上下  后左右
           3个值：上   左右   下
           4个值：上 右  下 左  顺时针   中间用空格 
        .header {
            margin: 0 auto;
            // width当屏幕小于 960px 时，会出现滚动条;而max-width不会出现
            width: 960px;
            height: 100px;
            background-color: red;
        }
        .content {
            margin: 0 auto;
            // width当屏幕小于 960px 时，会出现滚动条;而max-width不会出现
            width: 960px;
            height: 400px;
            background-color: pink;
        }
        .footer {
            margin: 0 auto;
            // width当屏幕小于 960px 时，会出现滚动条;而max-width不会出现
            width: 960px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

</html>

2. 不等宽的单列布局

header,content 和 footer 不等宽的单列布局

代码如下：
<!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>
        .header {
            margin: 0 auto;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .content {
            margin: 0 auto;
            width: 100px;
            height: 400px;
            background-color: pink;
        }
        .footer {
            margin: 0 auto;
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

</html>

二、两栏布局

一般指左边一栏宽度固定、右边一栏宽度随浏览器宽自适应

1. 利用浮动：父盒子一个高度+左边固定宽度左浮动+右边margi-left：左边宽度值

（1）一个父盒子里装两个小盒子；（2）左边盒子给一个固定宽度，再float：left 浮动，浮动脱标，不占据位置；（3）右边盒子给一个margin-left：左边盒子宽度值； 右边盒子宽度自适应；

代码如下：
<!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>
        .outer {
            height: 100px;
        }
        .left {
            float: left;
            height: 100px;
            width: 200px;
            background-color: pink;
        }
        .right {
            height: 100px;
            margin-left: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2. 利用浮动：左边固定宽度左浮动+右边overflow：hidden宽度自适应

（1）两个小盒子；（2）（2）左边盒子给一个固定宽度，再float：left 浮动，浮动脱标，不占据位置；（3）右边盒子设置overflow: hidden; 因为设置overflow: hidden;的盒子会触发BFC，BFC的区域会看到左边浮动的盒子；

<!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>
        .left {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
        .right {
            /* 高度可以不一样 */
            height: 200px;
            background: blue;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

3. 利用flex：父盒子flex+左边固定宽度+右边flex

flex布局：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
（1）父盒子flex，里面的子元素会变成inline-block元素；（2）左边给个固定宽度；（3）右边 flex：1； === flex：1 1 auto；

<!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>
        .outer {
            display: flex;
            height: 100px;
        }
        .left {
            width: 200px;
            background-color: red;
        }
        .right {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

4. 利用定位：父盒子relative相对定位+左盒子absolute绝对定位并固定宽度+右盒子margin-left：左盒子宽度值；

<!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>
        .outer {
            position: relative;
            height: 100px;
        }
        .left {
            position: absolute;
            width: 200px;
            height: 100px;
            background: red;
        }
        .right {
            margin-left: 200px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

5. 利用定位：父盒子relative相对定位+左盒子固定宽度+右盒子绝对定位：left值为左盒子宽度，其余值为0

<!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>
        .outer {
            position: relative;
            height: 100px;
        }
        .left {
            width: 200px;
            height: 100px;
            background: red;
        }
        .right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 200px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

6. 利用浮动: 左右都浮动，左固定宽度+右width：calc（）宽度

<!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>
        .outer {
            position: absolute;
            width: 100%;
            height: 100px;
        }
        .left {
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .right {
            float: left;
            width: calc(100% - 200px);
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>


calc（）函数详解：http://caibaojian.com/css3-calc.html

三、三栏布局

一般指左右两栏宽度固定、中间宽度随浏览器宽自适应

1. 利用浮动：左盒子固定宽度且左浮动+右盒子固定宽度且右浮动+中间盒子margin-left:左盒子宽度值；margin-right:右盒子宽度值；

<!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>
        .outer {
            height: 100px;
        }
        
        .left {
            float: left;
            width: 100px;
            
            height: 100px;
            background: tomato;
        }
        
        .right {
            float: right;
            width: 200px;
            
            height: 100px;
            background: gold;
        }
        
        .center {
            margin-left: 100px;
            margin-right: 200px;
            
            height: 100px;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        // 中间盒子必须放最后
        <div class="center"></div>
    </div>
</body>

</html>

2. 利用flex：父盒子flex+左边固定宽度+右边固定宽度+中间flex：1；

<!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>
        .outer {
            display: flex;
            height: 100px;
        }
        
        .left {
            width: 100px;
            background: tomato;
        }
        
        .right {
            width: 100px;
            background: gold;
        }
        
        .center {
            flex: 1;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3. 利用定位： 父盒子relative相对定位+左盒子绝对定位+右盒子绝对定位+中间盒子margin-left:左盒子宽度值；margin-right:右盒子宽度值；

<!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>
        .outer {
            position: relative;
            height: 100px;
        }
        .left {
            position: absolute;
            width: 100px;
            height: 100px;
            background: tomato;
        }
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100px;
            background: gold;
        }
        
        .center {
            margin-left: 100px;
            margin-right: 200px;
            height: 100px;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

4. 圣杯布局

<!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>
        .container {
            padding-left: 220px;
            padding-right: 220px;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 400px;
            background: red;
            margin-left: -100%;
            position: relative;
            left: -220px;
        }
        
        .center {
            float: left;
            width: 100%;
            height: 500px;
            background: yellow;
        }
        
        .right {
            float: left;
            width: 200px;
            height: 400px;
            background: blue;
            margin-left: -200px;
            position: relative;
            right: -220px;
        }
    </style>
</head>

<body>
    <article class="container">
        <div class="center">
            <h2>圣杯布局</h2>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>
</body>

</html>

小琪大琦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS单列布局
weixin_45752307的博客
03-09 136
CSS单列布局 好久没更新博客了，一直都在写一些小demo，还有在弄一些小项目，这次就放个单列布局吧 <!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
html-单列布局
qq_44657026的博客
10-23 382
单列布局练习 <!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"> &l...
CSS布局——单列布局
Ace_Arm的博客
07-13 1851
单列布局有以下两种形式： 第一种：一栏布局实现方法： 代码 效果： 第二种：一栏布局（通栏）实现方法： 代码 效果： 其实单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，大家可自由发挥，找到更多的方法来实现。...
【代码】单用float 实现三列布局
dancing_burry的博客
12-08 933
三列自适应             *{             margin: 0;             padding: 0;         }         header,         footer {             height: 50px;             background: #00ffff;         }
单列布局
weixin_33769207的博客
10-28 87
这是一个最简单的一种布局形式，通过本例希望读者能够顺利复习之前的圆角框的制作方法。把他们居中是把margin值设为0，auto就可以实现了。 实现效果如图： 以下是代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
css布局
04-22
NULL 博文链接：https://ruanqiangbeyond201208043532.iteye.com/blog/1946903
css布局样例源代码
11-04
结合CSS和HTML设计并布局了简单的网页，适合初学者参考。（有logo，横向导航栏，图片加文字的布局。给图片设置纯色遮罩层，并在遮罩层上显示字母或者按钮等。）
Bootstrap CSS布局之图像
08-31
主要介为大家详细绍了Bootstrap CSS布局之图像的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap CSS布局之表格
08-31
主要为大家详细介绍了Bootstrap CSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML+CSS实现单列布局水平居中布局
09-27
主要介绍了HTML+CSS实现单列布局水平居中布局的相关资料,需要的朋友可以参考下
单列布局、两列布局、三列布局
weixin_30888027的博客
07-26 300
一、 单列布局 HTML 代码： 1 <div id="header"> 2 <h2>Page Header</h2> 3 <p>头部内容</p> 4 </div> 5 <div id="content"> ...
前端新手上路之css布局篇(单列布局)
linglingzi001的博客
12-05 226
单列布局1 头部和底部占满浏览窗口，内容限定宽度并居中 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ...
html + css 布局技巧总结 ——单列布局（3）
weixin_44433499的博客
04-22 717
单列布局 1.水平居中 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素） 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-b...
CSS布局整理（单列布局、几种常见的双列布局&三列布局）
weixin_42479421的博客
08-20 1957
整理了CSS中的单列、双列、三列布局。 从浮动、绝对定位、Flex、Grid等角度讲解双列布局和三列布局。另外，三列布局还有圣杯布局、双飞翼布局。
CSS的单列布局与二&三列布局
Just for funnnnnnnnnnnn
10-31 2353
这里介绍CSS常用的单列布局与二&三列布局，作为记录，希望自己的基本功能够更扎实。单列布局常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 对于前者： 通过对header,content,footer统一设置width（max-width）即可得到。<div class="header">
多列布局和单列布局的练习
m0_63122857的博客
12-08 203
今天是单列布局和多列布局的简单练习多的不说上代码 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="div.css"> </head> <body> <hr color="#000"> <div class="a1"&g
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
panghu_bupang的博客
12-28 2822
十分钟学会正则表达式 (一)限定符 1、?:它前面的字符需要出现0次或1次 例如：used?可以匹配到use和used 2、*:它会匹配0个或多个字符 例如：ab*c可以匹配到ac,abc,abbbbbbc 3、+:它会匹配一次及以上的字符 例如：ab+c可以匹配abc,abbbc,而不会匹配ac 4、{}:可以限定匹配的数量 例如：ab{6}c,则匹配到abbbbbbc,而要限定b的数量在2到6之间，则是ab{2,6}c，如果只是两次以上，则省略括号里的6，写成ab{2,}c (二)"或"运算符 例如：a
bootstrap 右自适应 左_css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度?...
weixin_39713335的博客
12-19 434
一共5种： [1]float [2]inline-block [3]table [4]absolute [5]flex- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -思路一: float说起两列布局，最常见的就是使用float来实现。float浮动布局的...
html css布局
最新发布
08-25
HTML和CSS布局是用来定义和排列网页元素的方式。根据引用，HTML和CSS布局方式可以分为以下几种：浮动布局、定位布局、flex布局、table-cell表格布局、网格布局。 浮动布局是通过设置元素的浮动属性来实现元素的排列。通过设置元素的float属性为left或right，可以使元素脱离文档流并浮动在其他元素的周围。 定位布局是通过设置元素的position属性来实现元素的精确定位。通过设置元素的position属性为absolute或relative，再结合top、right、bottom、left属性，可以将元素放置在指定的位置。 flex布局是一种弹性盒模型布局，通过设置容器和其中的元素的flex属性来实现自适应和自动调整布局。通过设置容器的display属性为flex，可以将容器内的元素以一定的规则进行排列。 table-cell表格布局是通过将元素的display属性设置为table-cell，使元素像表格单元格一样排列。这种布局方式适合于需要等高的列布局。 网格布局是一种二维布局系统，通过设置容器的display属性为grid，然后使用grid-template-columns和grid-template-rows属性来定义行和列的大小和数量，可以实现复杂的网格布局。 根据引用中的代码示例，可以看到通过设置元素的position属性为relative和absolute，以及使用精灵图和定位的方式，可以实现元素的精确定位和布局。 根据引用中的代码示例，可以看到通过设置元素的display属性为grid，以及使用grid-template-columns和grid-template-rows属性，可以实现网格布局。 综上所述，HTML和CSS布局提供了多种方式来实现网页元素的排列和布局，开发者可以根据需求选择合适的布局方式来实现自己的设计。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [html+css布局](https://blog.csdn.net/sh2001824/article/details/125998713)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [html+css页面布局](https://blog.csdn.net/qq_42108313/article/details/119954472)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值