CSS特殊布局

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量127 收藏
点赞数
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jwz934738949/article/details/108580946
版权

BFC两栏布局

  • 页面实现两栏布局，左边区域设置为左浮动，右边区域不设置浮动效果
  • 当右边区域高度超过左边区域高度时，会出现右边区域来到左边区域的下方
  • 原因是右边区域不是BFC（块格式化上下文），把右边区域设置为BFC之后，即使右边区域高度高于左边区域，右边区域也不会到左边去
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC两栏布局</title>
  <style>
    .left {
      width: 300px;
      height: 400px;
      float: left;
      background-color: red;
    }

    .main {
      height: 600px;
      background: yellow;
      /*将main设置为BFC格式*/
      overflow: auto;
    }
  </style>
</head>
<body>
<div class="left"></div>
<div class="main"></div>
</body>
</html>

三栏表格布局

  • 对父元素设置宽度为100%，设置display: table。子元素有三个元素，每个元素都设置display: tabel-cell
  • 设置左右两个元素固定的宽度，则中间的会自动适应宽度，自动的缩小或者扩大，始终保持与其他两个元素相邻
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏表格布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      display: table;
      width: 100%;

    }

    .left, .main, .right {
      display: table-cell;
    }

    .left {
      width: 250px;
      background-color: aquamarine;
    }

    .right {
      width: 300px;
      background-color: bisque;
    }

    .main {
      background-color: orange;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <aside class="left">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </aside>
  <aside class="main"></aside>
  <aside class="right"></aside>
</div>
</body>
</html>

三栏浮动布局

  • 对左右两个元素分别设置左浮动与右浮动，中间元素宽度设置为100%，则中间的元素会自动适应宽度置于中间
  • 但是，中间元素宽度高于左右两边的浮动元素，则中间元素的内容会向两边溢出
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏浮动布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .left, .main, .right {
      min-height: 200px;
    }

    .left {
      width: 250px;
      float: left;
      background-color: aquamarine;
    }

    .right {
      width: 300px;
      float: right;
      background-color: bisque;
    }

    .main {
      width: 100%;
      background-color: orange;
    }
  </style>
</head>
<body>
  <aside class="left"></aside>
  <aside class="right"></aside>
  <aside class="main"></aside>
</body>
</html>

三栏绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏绝对定位布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    aside {
      min-height: 100px;
      position: absolute;
    }

    aside.left {
      width: 250px;
      left: 0;
      background-color: aquamarine;
    }

    aside.right {
      width: 300px;
      right: 0;
      background-color: bisque;
    }

    .main {
      min-width: 50px;
      position: absolute;
      left: 250px;
      right: 300px;
      background-color: orange;
    }
  </style>
</head>
<body>
<aside class="left"></aside>
<aside class="right"></aside>
<main class="main">
  <h2>标题111</h2>
  <h2>标题111</h2>
  <h2>标题111</h2>
  <h2>标题111</h2>
</main>
</body>
</html>

三栏网格布局

  • 父元素使用grid布局，并且对列的宽度进行设置。页面共三栏，左右两栏固定宽度，中间的宽度根据两端的宽度自动调整
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏网格布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      width: 100%;
      display: grid;
      grid-template-columns: 300px 1fr 300px;
    }

    .left {
      background-color: orange;
    }

    .right {
      background-color: aquamarine;
    }

    .main {
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <aside class="left"></aside>
  <main class="main">
    <h1>表格布局</h1>
    <h1>表格布局</h1>
    <h1>表格布局</h1>
    <h1>表格布局</h1>
  </main>
  <aside class="right"></aside>
</div>
</body>
</html>

三栏flex布局

  • 父元素使用flex布局，对于三个子元素来说，左右两端的子元素固定宽度，中间的元素使用flex: 1属性，来进行弹性布局，根据左右宽度调整自身宽度
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏flex布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      width: 100%;
      display: flex;
    }

    .left, .main, .right {
      min-height: 250px;
    }

    .left {
      background-color: orange;
      width: 300px;
    }

    .right {
      background-color: aquamarine;
      width: 300px;
    }

    .main {
      background-color: antiquewhite;
      flex: 1;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <aside class="left"></aside>
  <main class="main">
    <h1>表格布局</h1>
    <h1>表格布局</h1>
    <h1>表格布局</h1>
    <h1>表格布局</h1>
  </main>
  <aside class="right"></aside>
</div>
</body>
</html>

圣杯布局

  • 圣杯布局首先有三个div元素，分别是main，left，right，这三个元素依次放在wrapper中
  • 首先对三个子元素设置相对定位于左浮动，对left与right设置宽度，main宽度为100%，这样的话main元素会占满整个wrapper元素，而left与right会被挤到下一行
  • 为了让left与right能与main显示在同一行，对wrapper设置左右内边距，分别为left与right的宽度
  • 但是设置内边距之后，wrapper整个宽度变小，left与right仍然在下一行。对left进行设置，设置left的左外边距为100%，这样left移动到与main的起点对齐，但是这样盖住了main的部分内容，于是需要将left向左移动，移动距离为之前设置的左内边距，使用left属性向左移动相对应的距离
  • right也是同样的道理，设置左外边距为right本身的宽度，再向右移动相应的距离，使用属性right
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style>
    .left, .main, .right {
      min-height: 300px;
      /*圣杯布局代码*/
      float: left;
      position: relative;
    }

    .left {
      width: 200px;
      background-color: antiquewhite;
      /*圣杯布局代码*/
      margin-left: -100%;
      left: -200px;
    }

    .main {
      background-color: aquamarine;
      /*圣杯布局代码*/
      width: 100%;
    }

    .right {
      width: 300px;
      background-color: aqua;
      /*圣杯布局代码*/
      margin-left: -300px;
      right: -300px;
    }

    .wrapper {
      padding-left: 200px;
      padding-right: 300px;
    }

  </style>
</head>
<body>
<div class="wrapper">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

双飞翼布局

  • 双飞翼布局与圣杯布局很相似，都是三个元素main，left，right。不同的是不使用相对布局，并且main元素中多了一个子元素main_inner元素用来存放中心的内容
  • 其余不变，只需要增加对main_inner添加左右外边距，分别为left与right的宽度
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双飞翼布局</title>
  <style>
    .left, .main, .right {
      min-height: 300px;
      /*双飞翼布局代码*/
      float: left;
    }

    .left {
      width: 200px;
      background-color: antiquewhite;
      /*双飞翼布局代码*/
      margin-left: -100%;
    }

    .main {
      background-color: aquamarine;
      /*双飞翼布局代码*/
      width: 100%;
    }

    .right {
      width: 300px;
      background-color: aqua;
      /*双飞翼布局代码*/
      margin-left: -300px;
    }

    .main_inner {
      /*双飞翼布局代码*/
      margin-left: 200px;
      margin-right: 300px;
    }

  </style>
</head>
<body>
<div class="main">
  <div class="main_inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
jwz934738949
关注
专栏目录
css 上下布局 flex,Css Flex布局
weixin_36398921的博客
08-03 3129
Flex布局是Css3中新加入的额外布局系统。传统布局基于盒模型，依赖“display”、“position”、“float”属性，对于特殊布局非常不便。因此2009年，W3C提出新的布局方案-Flex布局，但由于浏览器兼容问题，Flex布局并没有大范围铺开。实现Flex布局的条件1.必须有一个父级容器作为Flex容器(作为容器)·定义一个Flex容器.box{ display: flex; }2...
CSS几种特殊布局
yiyueqinghui的博客
07-27 157
圣杯布局 1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。 2、.left， .right的margin-left是为了让.main .left .right在同一行。 3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。 <!DOCTYPE html> <html> <head> &lt
CSS特殊布局方式
YanLingGe的博客
11-21 228
一.左边固定，右边自适应 （1）通过浮动和定位 通过设置padding值空出左边位置，左边定位，右边浮动 <body> <header> <div></div> <div></div> </header> </body> <style> header{ margin: 0; padd
工作中遇到的特殊CSS布局
张飞鹏的博客
07-15 181
日常开发中，设计师总会提出各种奇思妙想的需求，为我们的UI还原工作带来很多挑战。虽然有时确实会让我们花蛮多时间去实现，但从一方面想这也是个机会，让我们更深入了解的浏览器布局方式。本文主要记录之前工作中遇到的特殊布局，都是通过CSS方式去实现。 多条件留白布局 图中有两个内容块A和B，他们宽度取决于内容宽度，左右侧留白有max-width: 200px限制，中间留白有min-width: 150p...
CSS中各种布局方式！！！
weixin_69810721的博客
09-06 311
三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器。
css多种布局方式
最新发布
博哥的二进制世界
05-14 3012
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
CSS的flex布局.ppt
06-12
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很...
css布局九决 学css不再难
09-25
《CSS布局九决》是学习CSS布局技巧的一种总结和提炼，旨在帮助初学者快速掌握CSS布局的核心要点，让布局工作变得简单易懂。以下将详细解释这九个诀窍： 一、IE边框若显若无，须注意，定是高度设置已忘记 在Internet...
CSS网页布局教程：CSS伪类定义3种方法
09-27
在CSS（层叠样式表）中，伪类是一种特殊的选择器，用于选择元素在特定状态下的样式。在网页布局中，伪类对于创建交互性和动态效果至关重要。本教程将介绍CSS伪类定义的三种方法，帮助你更好地理解和应用它们。 **1....
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
CSS div布局需要注意的两点
09-25
这种溢出处理方法常用于隐藏多余的内容，或在布局中创造一种特殊的视觉效果。 第二个关键点是关于浮动布局的。CSS中的float属性可以使得元素脱离正常的文档流，并使文本或其他元素环绕在浮动元素的周围。然而，浮动...
几种常见的 CSS 布局
热门推荐
前端大全
11-14 3万+
（给前端大全加星标，提升前端技能）作者：浪里行舟 （本文来自作者投稿，简介见末尾）本文概要本文将介绍如下几种常见的布局：单列布局两列自适应布局圣飞布局和双飞翼布局伪等高布...
CSS页面布局及排版
Ranchonono的博客
03-29 3万+
一、CSS盒子模型 CSS将每个元素看成是一个矩形盒子，占据一定空间。 盒子模型两方面理解：1.独立的盒子内部结构；2.多个盒子之间的香菇关系。 1.盒子模型概念 独立盒子模型由：内容、border、padding、margin四部分组成。详见之前的文章内容。 盒子的实际宽（高）= 内容（width/height）+padding（两边）+border（两边）+margin（两边）
编写add()函数
jwz934738949的博客
06-27 4296
编写一个add()函数，能正常执行下面的代码，并且能在控制台输出注释中的数字 console.log(add(1, 2)) //3 console.log(add(1, 2, 3)) //6 console.log(add(1)(2)) //3 console.log(add(1)(2)(3)) //6 add()函数具有多个实参数量，实参数量不定；并且使用了柯里化 柯里化是一种部分求值的技术，能把一个完整的函数调用分解成多次函数调.
使用flex布局实现九宫格
jwz934738949的博客
09-24 3281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局设置九宫格</title> <style> .content { width: 600px; height: 600px; margin: 0 auto; display: flex; /*设置排
HTTP
jwz934738949的博客
09-26 1157
文章目录定义HTTP协议HTTP报文缓存缓存处理过程新鲜度检测no-cache与no-store日期比对法进行再验证实体标记法进行再验证在浏览器中，一个页面从输入URL到加载完成，都有哪些步骤？GET和POST的区别 定义 HTTP是超文本传输协议，是获取网络资源的应用层协议，由请求和响应构成 客户端发起HTTP请求，用传输层的TCP协议建立连接，服务器响应请求，做出应答，回传数据报文 URI：统一资源标识符，用于标识某个互联网资源，由URL和URN构成 URL：统一资源定位符，俗称网址。URL语法为
求字符串的字节长度
jwz934738949的博客
09-21 973
假设一般字符为1个字节长度，而汉字为2个字节长度，求字符串的字节长度 function getBytes(str) { const len = str.length let bytes = len for (let i = 0; i < len; i++) { if (str.charCodeAt(i) > 255) { bytes++ } } return bytes .
用Array的reduce方法实现map方法
jwz934738949的博客
09-21 696
Array的reduce方法适用于对数组中的每两项进行累加处理，最后得到唯一的值 map方法是用于对数组中的每一项都分别进行处理，得到一个新的数组 const map = function (arr, fn) { return arr.reduce((mappeedArr, ele) => { return [...mappeedArr, fn(ele)] }, []) } const arr = [2,4,5,6] cons.
HTTPS
jwz934738949的博客
09-26 577
文章目录定义HTTP不安全加密对称加密非对称加密数字签名数字证书安全通信机制HTTPS有哪些缺点 定义 HTTPS是一种构建在SSL或TLS上的HTTP协议。HTTPS协议的URL都以“https://”开头，在访问某个Web页面时，客户端会打开一条到服务器443端口的连接 HTTP不安全 数据以明文传递，有被窃听的风险 接收到的报文无法证明是发送时的报文，不能保障完整性，因此报文有被篡改的风险 不验证通信两端的身份，请求或响应有被伪造的风险 加密 对称加密 对称加密在加密和解密的过程中只使
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值