CSS常见布局

最新推荐文章于 2022-04-05 19:39:55 发布
最新推荐文章于 2022-04-05 19:39:55 发布
阅读量214 收藏
点赞数 1
分类专栏： CSS 文章标签： css布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40995162/article/details/83692745
版权

一、圣杯布局/双飞翼布局
布局特点：左右两栏固定宽度，中间部分自适应 三列等高
实现一个左边100px右边150px中间自适应的布局
先来看看效果图：
在这里插入图片描述
代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
        <title>圣杯布局/双飞翼布局</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                text-Align: center;
            }
            #parents {
                width: 1000px;
                border: 2px solid;
                margin: 0 auto;    
            }
            #top {        
                background: #666; 
                height: 50px;            
            }
            #main {
                padding-left: 100px;
                padding-right: 150px;
                overflow: hidden;
            }
            #left,#content,#right {
                padding-bottom: 2000px;
                margin-bottom: -2000px;            
            }
            #left {
                background: #E79F6D;
                float: left;
                width: 100px;
                position: relative;
                left: -100px;
            }
            #content {
                background: #D6D6D6; 
                float: left;
                width: 100%;
                margin-left: -100px;
                position: relative;
            }
            #right {    
                background: #77BBDD;
                float: left;
                width: 150px;
                margin-left: -150px;
                position: relative;
                left: 150px;
            }
            #foot {
                background: #666;
                clear: both;
                height: 50px;
            }
        </style>            
    </head>
    <body>
        <div id="parents">
           <div id="top">这是Top!</div>
           <div id="main">
               <div id="left">这是Left!</div>
               <div id="content">这是Content!<br><br><br><br>这是多行高度！<br></div>
               <div id="right">这是Right!</div>
             </div>
           <div id="foot">这是Foot!</div>
        </div>
    </body>
</html>

过程说明：
1.先写一个基本布局
2.将中间left、content和right向左浮动，并设置left和right的宽度分别设置为100px和150px，将三者的父元素的左右内边距设置为100px和150px，与left和right的宽度相同。
3.由于content宽度设置了100%，为content和right设置一个margin-left属性
4.用相对定位把left向左移，right向右移
5.接着处理三列等高的问题：采用padding补偿法：
　　首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，这样就成功的使得三者列等高了

优点:

  • 实现了内容与布局的分离，即Eric提到的Any-Order Columns.
  • content部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
  • 任何一栏都可以是最高栏，不会出问题。
  • 需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
  • 在浏览器上的兼容性非常好，IE5.5以上都支持。

二、两栏布局
一栏定宽，一栏自适应
先来看看效果图
在这里插入图片描述
代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
        <title>圣杯布局/双飞翼布局</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                text-Align: center;
            }
            #parents {
                width: 1000px;
                border: 2px solid;
                margin: 0 auto;    
            }
            #top {        
                background: #666; 
                height: 50px;            
            }
            #main {
                padding-left: 200px;
                overflow: hidden;
            }
            .left,.right {
                padding-bottom: 2000px;
                margin-bottom: -2000px;            
            }
            .left{
		width: 200px;
		background: red;
		float: left;
		position: relative;
		left: -200px;
		text-align: center;
		color: #fff;
		}

	    .right{
		float :left;
		width:100%;
		position: relative;
		margin-left: -200px;
		background: yellow;
		text-align: center;
		}
            #foot {
                background: #666;
                clear: both;
                height: 50px;
            }
			
        </style>            
    </head>
    <body>
        <div id="parents">
           <div id="top">这是Top!</div>
           <div id="main">
                <div class="left">定宽<br><br><br></div>
				<div class="right">自适应</div>
             </div>
           <div id="foot">这是Foot!</div>
        </div>
    </body>
</html>

说明：
如果会了圣杯布局，那么两栏布局就很简单了

李青伟
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css三种布局方式
weixin_45272209的博客
03-04 1156
css几种布局方式 流体布局 left和right都是浮动元素(脱离文档流)，漂浮于普通文档流上方，使其盖住main设置的margin main(普通文档流)左右两边设置margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流体布局</title> </head> <body> <div c
HTML+CSS常见布局面试题总结
10-31
...`<header>`、`<nav>`、`<main>`、`<article>`、`...以上是HTML+CSS常见布局面试题的主要知识点，熟练掌握这些概念和技术，有助于提升前端开发的效率和质量。在实践中不断探索和应用，才能真正成为布局设计的专家。
CSS布局
qq_43539854的博客
04-05 2149
CSS布局 table布局 table的特性决定了它非常适合用来做布局，表格中的内容可以自动居中。但table局部有很多缺点： 比其他HTML标签占更多的字节，造成下载时间延迟，占用服务器更多资源 阻挡浏览器渲染引擎的渲染顺序，延迟页面的加载速度 flex布局 1. 盒模型 标准盒子模型：width = 2 * border + 2 * padding + content IE盒子模型：width = 2 * border + 2 * padding > content ? border * 2
css布局
hangview的博客
04-25 398
css布局css中有三种基本的定位机制，普通流，浮动和绝对定位。 display属性每个元素都有一个默认的display值，这与元素的类型有关。大多数元素的默认值是inline和block。即块级元素和行内元素。block块级元素会新开始一行并尽可能撑满容器，它会占据一行。常见块级元素如 p 、form. …. inline行内元素会在一条直线上排列，同一行排列。常见如a、span…关于行内元素和块
CSS网页布局全精通
12-10
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版...
常见的CSS布局
11-14
本文将深入探讨“常见的CSS布局”这一主题，涵盖基本布局概念、常见布局模式以及实现这些布局的技术。 首先，我们需要了解CSS布局的基本原理。CSS布局的核心在于盒模型，它包括内容（content）、内边距（padding）...
CSS网页布局实例 常见的12种网页布局
12-08
This site contains free css templates for your website – Just copy and paste and there you have a stunning website ! Menu und contentdynamic Menu fixed, contentdynamic Menu und contentdynamic 3 ...
CSS两列布局实现方式总结
01-21
两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式...
css经典布局
11-26
自己不断更新 的css经典布局 下载就能用
css网页布局
.....
08-17 291
css样式： 1.margin:0 padding:0清空为0 2.float:left;左浮动float:right;右浮动(两列) 3.position:absolute;绝对位置(这样在三列布局中就可以把文字显示在同一行上了) 4.三列布局 .left{width:200px;height:500px;background:#ccc;position:a
CSS布局方案大全【整理】
qq_43067585的博客
08-21 559
我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！ 居中布局 以下居中布局均以不定宽为前提，定宽情况包含其中 1、水平居中 a) inline-block + text-align .parent{ text-align: center; } .child{ display: inline-block; } 提示：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用css hack进行兼容 b) ..
CSS布局模型/网页布局基础
Code_浅蓝
02-26 1149
CSS布局模型清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Flo
常见 css 布局整理
欢迎来到Gorit的博客
02-11 2514
常用 css 布局学习整理一、垂直居中二、等分布局三、等高布局四、多列布局五、局中布局（垂直居中）六、全屏布局七、三列布局八、圣杯布局九、双飞翼布局十、水平居中十一、css 布局特别整理 注意： 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github，两个仓库我会同步更新 码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end...
四种css布局方式
weixin_44273311的博客
04-21 1969
一、静态布局(Static Layout) 布局概念 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 优点 采用的是css2之前的写法,不存在浏览器兼容性。布局简单。 缺点 但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使...
css蜂巢布局
最新发布
05-26
CSS蜂巢布局是一种常见的网格布局，可以用于创建六边形网格。下面是一个基本的CSS蜂巢布局示例： HTML代码： ```html <div class="hexagon"></div> ``` CSS代码： ```css .hexagon-wrapper { display: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值