常用布局

爱吃蟹黄堡的蟹老板

于 2020-03-05 17:15:18 发布

阅读量125

点赞数

分类专栏： HTML_CSS

本文链接：https://blog.csdn.net/weixin_42362211/article/details/102731578

版权

HTML_CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

经典布局

双飞翼布局

布局要求基本要求

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。
中间栏要在浏览器优先渲染（html在代码结构上要先写中间栏）

双飞翼布局的实现

left、center、right三种都设置左浮动。
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度。
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度。
container 设置overflow：hidden；一.解决操出边界，overflow:hidden;可以让超出部分裁剪掉。二.解决子元素float浮动，父元素没有高度。三.解决外边距塌陷，就是子元素的margin-top不起作用。

效果展示

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
    overflow: hidden;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left, #right, #center {
    float: left;
  }
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }
  .content {
    margin: 0 150px 0 200px;
  }
</style>
 
<body>
  <div id="header">#header</div>
 
  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
 
  <div id="footer">#footer</div>
</body>
 
</html>

弹性布局

box-sizing：content-box 平时普通的盒子模型，padding，border，盒子会变大向外扩展。
box-sizing：border-box 盒子模型，padding，border，盒子模型不会变大向内扩展。
一旦调用了弹性布局，就不再需要float。

父级身上的其他属性

justify-content：//子元素水平排列方式
center 居中
space-between 两端对齐
space-around 子元素拉手分布
flex-start 居左
flex-end 居右
align-items：//子元素垂直排列方式
center 居中
flex-start 居上
flex-end 居下
stretch 默认方式
align-content：// 多行排列时
center 居中
flex-start 居顶
flex-end 居底
flex-direction：//排列方向
row 横向排列
row-reverse 横向反向顺序排列
column 纵向排列
column-reverse 纵向反向排列
flex-wrap：//子元素是否在一行显示
no-wrap 不换行
wrap 换行

子级身上的其他属性

flex：1//在子元素上分别设置flex 1，2，3最终将以此比例分布

纯 css 写瀑布流

<!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>
        .masonry { 
            column-count:4;
            column-gap: 2em;
            width:100%;
            margin:2em auto;
        }
        .item { 
            padding: 2em;
            margin-bottom: 2em;
            break-inside: avoid;
            background: #f60;
        }
        .content-mid{
            height: 370px;
        }
        .content-lar{
            height: 240px;
        }
        .content-sma{
            height: 450px;
        }
        @media screen and (max-width: 800px) { 
            .masonry { 
                column-count: 2; 
            } 
        } 
        @media screen and (max-width: 500px) { 
            .masonry { 
                column-count: 1; 
            } 
        }
</style>
</head>
<body>
    <div class="masonry"> 
        
        <div class="item"> 
            <div class="item_content content-lar"> 1
            </div> 
        </div> 

        <!-- more items --> 
    </div>
</body>
</html>

在这里插入图片描述

gird 布局

参考文献
 例子

爱吃蟹黄堡的蟹老板

关注

0
点赞
踩
0

收藏

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

CSS经典布局双飞翼布局布局要求基本描述header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。双飞翼布局的实现left、center、right三种都设置左浮动。设置center宽度为100%设置负边距，left设置负边距为100%，right...
复制链接

扫一扫