css3布局

最新推荐文章于 2023-08-15 11:24:32 发布
最新推荐文章于 2023-08-15 11:24:32 发布
阅读量327 收藏 1
点赞数
文章标签： css3 html 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ll_0801xyz/article/details/77320137
版权

两栏布局

左侧固定宽高，右侧自适应 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>两栏布局</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
    }
    #left{
      width: 300px;
      height: 100%;
      background-color: red;
      float: left;
    }
    /*!  方法一
    #right{
      height: 100%;
      margin-left: 300px;
      background-color: indianred;
    }
    */
    /*方法二*/
    #right{
      height: 100%;
      overflow: hidden;
      background-color: indianred;
    }
  </style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

页面效果

这里写图片描述

方法三

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>两栏布局</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .container:after, .container:before {
      content: "";
      display: table;
    }
    .container:after {
      clear: both;
      overflow: hidden;
    }
    .main-wrap {
      float: left;/*很重要*/
      width: 100%;/*很重要*/
    }
    .main-content {
      margin-left: 240px;/*sidebar width + margin-right*/
      background-color: #F2F2E6;
      height: 350px;
    }
    .sidebar {
      width: 220px; /*左边栏宽度，可自行修改*/
      height: 350px;
      background-color: #E7DBD5;
      float: left; /*侧栏居左*/
      margin-left: -100%;/*容器container的宽度*/
      position: relative;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main-wrap">
      <div class="main-content"><h2>Main Content</h2></div>
    </div>
    <div class="sidebar"><h2>Sidebar Content</h2></div>
  </div>
</body>
</html>

页面效果

这里写图片描述

三栏布局

两边固定，中间自适应

1、流体布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流体布局</title>
  <style type="text/css">
    *{
      text-align: center;
    }
    .left{
      margin-right: 20px;
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right{
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: blue;
      float: right;
    }
    .main{
      height: 200px;
      background-color: rosybrown;
    }
    /**  BFC三栏布局
    .main{
      height: 200px;
      overflow: hidden;
      background-color: rosybrown;
    }
     */
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
  </div>
</body>
</html>

页面效果
这里写图片描述

2、BFC三栏布局

BFC区域不会与浮动元素重叠，所有左右部分设置的margin值有效，缺点是主体内容无法最先加载，当页面内容较多时影响用户体验
代码与流体布局大体相似
页面效果
这里写图片描述

3、双飞翼布局

利用浮动元素的margin负值的应用，主体内容可以优先加载 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双飞翼布局</title>
  <style type="text/css">
    *{
      text-align: center;
    }
    .container{
      float: left;
      width: 100%;
    }
    .main{
      height: 200px;
      margin-left: 110px;
      margin-right: 220px;
      background-color: rosybrown;
    }
    .left{
      float: left;
      height: 200px;
      width: 100px;
      margin-left: -100%;
      background-color: red;
    }
    .right{
      width: 200px;
      height: 200px;
      float: right;
      margin-left: -200px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main">main</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
</html>

页面效果
这里写图片描述

4、圣杯布局

优先加载主体内容
基本思路是：让中间部分在结构中位于最前面，先让中间层100%宽度，占满同一高度的空间，此时 左右两层被挤至下层，然后给左右盒子设置负边距，将左右栏拉回与主体部分同一水平高度 。这时主体部分有一部分被遮挡住了，给包含三个盒子的父盒子设置margin或padding，给左右边栏留出位置 ，再接着将左右边栏设置相对定位，将它们移到对应的空白位置。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style type="text/css">
    *{
      text-align: center;
    }
    .container{
      margin-left: 120px;
      margin-right: 220px;
    }
    .main{
      float: left;
      width:100%;
      height:200px;
      background-color: rosybrown;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%;
      position:relative;
      left:-120px;
      background-color: red;
    }
    .right{
      float:right;
      width:200px;
      height:200px;
      margin-left:-200px;
      position:relative;
      right:-220px;
      background-color: blue;
    }
  </style>
</head>
<body>
 <div class="container">
   <div class="main">main</div>
   <div class="left">left</div>
   <div class="right">right</div>
 </div>
</body>
</html>

页面效果
这里写图片描述

5、flex布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex</title>
  <style type="text/css">
    *{
      text-align: center;
    }
    .container{
      display: flex;
    }
    .main{
      flex-grow: 1;
      height: 300px;
      background-color:rosybrown;
    }
    .left{
      order: -1;
      flex:0 1 100px;
      margin-right: 20px;
      height: 300px;
      background-color: red;
    }
    .right{
      flex:0 1 200px;
      margin-left: 20px;
      height: 300px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

页面效果
这里写图片描述

6、Table布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table</title>
  <style type="text/css">
    /*设置margin无效*/
    *{
      text-align:center;
    }
    .container{
      display: table;
      width:100%;
    }
    .left,.main,.right{
      display: table-cell;
    }
    .left{
      width:100px;
      height:200px;
      background-color: red;
    }
    .right{
      width:200px;
      height:200px;
      background-color: blue;
    }
    .main{
      background-color: rosybrown;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
  </div>
</body>
</html>

页面效果
这里写图片描述

7、绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位</title>
  <style type="text/css">
    *{
      text-align: center;
    }
    .container{
      position: relative;
    }
    .main{
      height:200px;
      margin: 0 120px;
      background-color: rosybrown;
    }
    .left{
      position: absolute;
      width:100px;
      height:200px;
      left:0;
      top:0;
      background-color: red;
    }
    .right{
      position:absolute;
      width:100px;
      height:200px;
      background-color: blue;
      right:0;
      top:0;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

页面效果
这里写图片描述

想上天的蓝胖子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3布局
qq_45557130的博客
10-29 684
css
CSS3：布局
宁静致远
03-14 1563
定位内容用于定位内容的属性包括： 1）position：设置定位方法 2）left、right、top、bottom：为定位元素设置偏移量 3）z-index：设置定位元素的层叠顺序定位方法position属性设置元素的定位方法，可选值如下： 1）static：元素为普通布局，默认值； 2）relative：元素位置相对于普通位置（及static值）定位； 3）absolute：元素相对于posi
css3布局学习html5网站模板
04-02
1. **Flexbox（弹性盒布局）**：Flexbox是CSS3中的一种布局模型，专为处理一维布局（如行或列）而设计。它允许开发者轻松调整元素大小、顺序和对齐方式，以适应不同屏幕尺寸和设备方向。 2. **Grid布局**：CSS Grid...
css 3布局与技术 外国大牛写的
04-10
### CSS3布局与技术知识点详解 #### 一、前言 《ProCSS3Layout Techniques》是一本由国外知名作者Sam Hampton-Smith编写的关于CSS3布局技术的专业书籍。本书旨在帮助读者深入了解并掌握CSS3的强大功能，以便能够...
CSS网站布局实录
07-10
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
使用CSS3多列布局属性.ppt
07-02
使用CSS3多列布局属性.ppt
CSS3六边形图片网格布局
04-16
解压密码：RJ4587 上次介绍过一个图片的瀑布流布局方式，这次再来分享一个基于CSS3的六边形图片网格布局方式，利用CSS3特性将图片绘制成六边形，然后图片之间互相拼接起来，类似一个蜂巢。另外还有一个特点是，当...
css3布局样式
xiaoerjun的博客
11-28 678
css3布局
＜css3布局方式-浮动布局＞
weixin_45540964的博客
11-17 139
CSS3（三）布局样式
qq_25178609的博客
09-24 1821
一、多列布局——Columns：到目前为止大部分主流浏览器都对其支持： 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面 语法：columns：<column-width> || <column-count> //列宽和列数 columns: 2
玩转CSS3(一)----CSS3实现页面布局
weixin_30312659的博客
06-06 176
请珍惜小编劳动成果，该文章为小编原创，转载请注明出处。 摘要： CSS3相对CSS2增加了一些新的布局方式：多栏布局和盒子布局。在这篇文章中，将对CSS2的布局进行简单的回忆，并总结CSS3的布局方式。 DIV+CSS其实是错误的叫法 关于当前的页面布局，很多人都习惯于叫做DIV+CSS,其实这是一种错误的叫法，标准叫法应该叫做XHTML+CSS....
Css3布局
Summer_JX的博客
01-13 355
1、多列布局： columns： || 列宽和栏数 要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;2、column-width : 列宽 3、column-count:分栏 4、column-gap:用来设置列与列之间的间距。 column-gap: normal || column-gap: 2em; //列间距设为2em5、column-rul
css3-flex布局：基础使用 / Flexbox布局
最新发布
snowball的博客
08-15 1344
该属性的值决定了 Flex 项目的伸缩性，它能够让 Flex 项目在 Flex 容器中的尺寸发生变化，以适应不同的屏幕尺寸或者容器大小。4.2、Flex项目（Flex Item）：Flex 容器中的子元素称为 Flex 项目（Flex Item），每个 Flex 项目都具有弹性盒的属性。在该轴上，Flex 容器中的 Flex 项目会被依次排列。Flex容器是包含Flex项目的父级元素，通过设置该元素的display属性为flex或inline-flex，即可创建一个Flex容器。
css3之布局
m0_72936412的博客
04-08 561
css3之布局
css3基础4-布局
superjunjin的专栏
07-12 706
十，布局样式相关 1，多列布局——Columns 2，盒子模型 3，伸缩布局 （1）伸缩盒基本概念 （2）伸缩盒模型基本术语 十，布局样式相关 1，多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文...
HTML5与CSS3布局技术探索
1. **盒模型**：盒模型是CSS布局的基础，它定义了元素的内容、内边距、边框和外边距之间的关系。`box-sizing`属性允许我们改变元素的盒模型行为，可以设置为`content-box`（默认值，内容区域不包括边框和内边距）或`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值