页面常用布局

最新推荐文章于 2024-04-26 17:20:09 发布

fancy不会写代码

最新推荐文章于 2024-04-26 17:20:09 发布

阅读量842

点赞数 4

分类专栏： html+css 文章标签： html 页面布局 css

本文链接：https://blog.csdn.net/qq_38118911/article/details/88123099

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.流式布局---- （又称百分比布局）

	页面元素的宽度会根据页面的尺寸随时调整，来达到适应当前页面的目的，但整体布局不变。
	代表作：栅栏系统（网格系统）

百分比是基于元素父级的大小计算得来的；
元素的水平或者竖直间距都是相对于父级的宽度计算的（margin&padding)
边框不能用百分比设置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .parent{
           width: 800px;
           height: 400px;
           border:1px solid;
           background-color: blue;
           margin:100px auto;
       }
       .parent>div{
           float:left;
           width: 33.3%;
           height: 100%;
           padding-right:10px;
           box-sizing: border-box;
       }
       .parent>div>div{
           width: 100%;
           height: 100%;
           background-color: orange;
           
       } 
   </style>
</head>
<body>
   <div class = "parent">
       <div><div></div></div>
       <div><div></div></div>
       <div><div></div></div>
   </div>
</body>
</html>

流式布局样式1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            width: 800px;
            height: 400px;
            border:1px solid;
            margin:100px auto;
        }
        .parent>div{
            float:left;
            width: 33.3%;
            height: 100%;
            box-sizing: border-box;
        }
        .parent>div:nth-child(1){
            padding-right:5px;
            background-color: blue;
        }
        .parent>div:nth-child(2){
            padding:0 5px;
            background-color: red;
        }
        .parent>div:nth-child(3){
            padding-left:5px;
            background-color: pink;
        }
        .parent>div>div{
            width: 100%;
            height: 100%;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class = "parent">
        <div><div></div></div>
        <div><div></div></div>
        <div><div></div></div>
    </div>
</body>
</html>

流式布局常见样式2

缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

2.弹性布局（又称 Flex布局）

2009年W3C老大哥推出的一种布局方式。可以简便、快速、响应式地实现各种页面布局。但是存在兼容性问题。目前已得到以下浏览器的支持：
在这里插入图片描述
Flex布局的使用：

容器：需要添加弹性布局的父元素；
项目：弹性布局容器中的每一个子元素，称为项目；

给父容器添加display: flex/inline-flex;属性，即可使容器内的元素采用弹性布局显示，而不遵循常规文档流的显示方式；
容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
display: flex;容器添加弹性布局后，显示为块级元素；
display: inline-flex;容器添加弹性布局后，显示为行级元素；
设为 Flex 布局以后，子元素的float、clear 和 vertical-align 属性将失效。但是position定位属性依然生效。

Flex属性：
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{display:flex; width: 800px;height: 400px;border:1px solid #ccc; }
        .box>div{ float:left; margin-right:10px;}
        .box>div:nth-child(1){ flex:4;background-color: pink;    }
        .box>div:nth-child(2){ flex:3;background-color: skyblue;   }
        .box>div:nth-child(3){ flex:2;background-color:aquamarine;   }
    </style>
</head>
<body>
    <div class = "box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

弹性布局样式

同时也可改变通过flex-direction改变主轴方向,实现垂直方向的布局。布局样式根据自己的需求设计，总之使用起来十分方便，快捷。
在这里插入图片描述
具体属性学习可参照该博主文章，写的很详细生动，且内容丰富；Flex入门

3.左侧固定右侧自适应

该页面布局在移动端中很常见，原理通过是左边元素脱标，剩下的兄弟元素继承父级的宽度，达到自适应的效果，还可以通过弹性布局实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width: 800px;height: 400px;border:1px solid #ccc;margin: 100px auto;}
        .left{float:left;width: 100px;height: 100%;background-color: pink;}
        .right{margin-left:110px;height: 100%;background-color:burlywood;}
    </style>
</head>
<body>
    <div class = "box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

使用Flex布局实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{display:flex;width: 800px;height: 400px;border:1px solid #ccc;}
        .left{width: 100px;height: 100%;background-color:cornflowerblue;}
        .right{flex:1; height: 100%;background-color:darksalmon; margin-left:10px;}
    </style>
</head>
<body>
    <div class = "box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

4.圣杯布局

圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进为双飞翼布局，两者效果相同实现思路有差异，圣杯布局样式是整体分为三块，左边和右边固定，中间部分自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left,
        .middle,
        .right{ 
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container{
            width: 800px;
            height: 400px;
            margin:100px auto;
            padding:0 220px 0 200px;
            overflow: hidden;
        }
        .left{
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: pink;
        }
        .right{
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background-color:steelblue;
        }
        .middle{ 
            width: 100%;
            background: skyblue;
        }
    
    </style>
</head>
<body>
    <div class="container">
        <div class="middle">
            middle
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
圣杯布局：

为了中间div内容不被遮挡，将中间div设置了左右 padding-left 和 padding-righ t后，将左右两个div用相对布局 position: relative 并分别配合 right 和 left 属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局：

为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

双飞翼和圣杯的主要目的都是既能先渲染自适应的中间栏，又可以实现两侧固定。先渲染自适应的中间栏优先级比三栏布局要高

fancy不会写代码

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
页面常用布局

1.流式布局---- （又称百分比布局）是页面元素的宽度会根据页面的尺寸随时调整，来达到适应当前页面的目的，但整体布局不变。代表作：栅栏系统（网格系统）百分比是基于元素父级的大小计算得来的；元素的水平或者竖直间距都是相对于父级的宽度计算的（margin&amp;amp;amp;padding)边框不能用百分比设置&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&
复制链接

扫一扫