CSS布局实战

其他 2021-03-09 00:49:24 阅读次数: 0

CSS布局实战

1. 布局方式

1.1 表格布局

  • 结构自适应
  • 维护不便，性能差，不支持搜索引擎

1.2 DIV+CSS布局

  • 符合W3C标准，兼容性好
  • 结构和外观分离，便于团队开发和维护
  • 对搜索引擎更加友好

1.3 单列布局

在这里插入图片描述

1.4 两列布局

在这里插入图片描述

1.5 三列布局

在这里插入图片描述

1.6 多列布局

在这里插入图片描述

2. 常见布局技术

2.1 单列布局

  • 水平和垂直对齐
2.1.1 通栏与版心

在这里插入图片描述

<style>
    *{
     
     margin:0;padding:0;}
    header{
     
     
        background-color: #666;
    }
    .container{
     
     
        width: 1190px;
        height: 50px;
        background-color: #ff0;
        margin:0 auto;
    }
    .logo{
     
     float:left;}
    .search{
     
     float:right;}
    section{
     
     
        width: 1190px;
        height: 1000px;
        margin:0 auto;
        background-color: #ff0;
    }
</style>
<body>
	<header>
        <div class="container">
            <div class="logo">Logo</div>
            <div class="search">搜索</div>
        </div>
    </header>
    <section>
        版心区域
    </section>
</body>
2.1.2 单列布局的水平对齐
  • 行级元素
    • 设置父元素的text-align属性
  • 非定位的块元素
    • 设置width和margin（水平方向auto）
<style>
   .container{
     
     
        width: 800px;
        height: 500px;
        background-color: #ff0;
        margin:0 auto;
    }
    p{
     
     
        width: 100px;
        height: 100px;
        background-color: #f00;
        margin:0 auto;
    }
</style>
<body>
    <div class="container">
        <p></p>
    </div>
</body>
  • 绝对定位的块级元素
    • 设置left（50%）+margin-left（负的一半width）
    • 让left、right都为0，左右的margin为auto
<style>
	// 方法一
   .container{
     
     
        width: 800px;
        height: 500px;
        background-color: #ff0;
        margin:0 auto;
        position: relative;
    }
    p{
     
     
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 50%;
        margin-left: -50px;
    }

	// 方法二
	.container{
     
     
        width: 800px;
        height: 500px;
        background-color: #ff0;
        margin:0 auto;
        position: relative;
    }
    p{
     
     
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
</style>
<body>
    <div class="container">
        <p></p>
    </div>
</body>
2.1.3 单列布局的垂直对齐
  • 行级元素和未定位块级元素
    • 设置父级容器display和verticle-align样式
    • 设置父级容器的高度=行高(针对行元素)
<style>
	.container {
     
     
        width: 800px;
        height: 500px;
        background-color: #ff0;
        display:table-cell;
        vertical-align: middle;
    }

    p {
     
     
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

<table border="1" width="300">
    <tr style="height: 50px;">
        <td>hello</td>
    </tr>
</table>
  • 绝对定位的块级元素
    • 使用top（50%）+margin-top（负的一半height）
    • 设置top、bottom、left和right都为0，上下的margin为auto
<style>
	// 方法一
	.container {
     
     
        width: 800px;
        height: 500px;
        background-color: #ff0;
        position: relative;
    }

    p {
     
     
        width: 100px;
        height: 100px;
        background-color: #f00;
        position:absolute;
        top:50%;
        margin-top:-50px; 
    }

	// 方法二
	.container {
     
     
        width: 800px;
        height: 500px;
        background-color: #ff0;
        position: relative;
    }

    p {
     
     
        width: 100px;
        height: 100px;
        background-color: #f00;
        position:absolute;
        top:0;
        bottom:0;
        margin:auto 0;
    }
</style>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

2.2 多列布局类型

2.2.1 固定布局
  • W3C盒子模型的计算方式
  • 注意不要超出固定宽度
2.2.2 左定宽右自适应布局

在这里插入图片描述

  • 方案一
    • 左侧定宽浮动，右侧全宽
      • 缺点：高度不一致时，字围绕现象导致布局错误
<style>
    #d1 {
     
     
        width: 200px;
        height: 100px;
        background-color: #f00;
        float:left;
    }
    #d2 {
     
     
        height: 400px;
        background-color: #ff0;
    }    
</style>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>

在这里插入图片描述

  • 方案二
    • 左侧定宽浮动，右侧全宽+子元素Margin-left
      • 克服字围绕现象
      • 缺点：主要区域HTML结构后置
<style>
    #d3{
     
     
        width: 200px;
        height: 100px;
        background-color: #f00;
        float:left;
    }
    #d4{
     
     
        height: 400px;
        background-color: #ff0;
    }
    .content{
     
     
        margin-left:200px;
        height: 400px;
        background-color: #f0f;
    }
</style>
<body>
    <div id="d3"></div>
    <div id="d4">
        <div class="content"></div>
    </div>
</body>

在这里插入图片描述

  • 方案三（推荐）
    • 全部浮动，右侧宽度100%，并设置负margin-left
<style>
        .main {
     
     
            width: 100%;
            height: 400px;
            background-color: #ff0;
            float: left;
        }
        .content{
     
     
            margin-left:200px;
            height: 400px;
            background-color: #0ff;
        }
        .aside {
     
     
            float: left;
            width: 200px;
            height: 200px;
            background-color: #f0f;
            margin-left:-100%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="aside"></div>
</body>

在这里插入图片描述

2.2.3 左自适应右定宽布局

在这里插入图片描述

  • 方案一
    • 固定在前（右浮动），自适应在后（全宽），内部margin-right
<style>
    .d1{
     
     
        width: 100%;
        height: 500px;
        background-color: #ff0;
    }
    .content{
     
     
        height: 500px;
        margin-right:200px;
        background-color: #0ff;
    }
   .d2{
     
     
        width: 200px;
        height: 200px;
        background-color: #0f0;
        float:right;
    }
</style>
<body>
    <div class="d2">固定区域</div>
    <div class="d1">
        <div class="content">自适应区域</div>
    </div>

</body>
  • 方案二
    • 固定在后（浮动+负margin-left），自适应在前（浮动）
<style>
    .d1{
     
     
        width: 100%;
        height: 500px;
        background-color: #ff0;
        float:left;
    }
    .content{
     
     
        height: 500px;
        margin-right:200px;
        background-color: #0ff;
    }
   .d2{
     
     
        width: 200px;
        height: 200px;
        background-color: #0f0;
        float:left;
        margin-left:-200px;
    }
</style>
<body>
    <div class="d1">
        <div class="content">自适应区域</div>
    </div>
    <div class="d2">固定区域</div>
</body>

在这里插入图片描述

2.2.4 两列定宽右自适应布局
  • 左侧两列定宽可以按一列处理
    • 参考左侧定宽右侧自适应解决方案
      在这里插入图片描述
2.2.5 多列等分布局
  • 采用百分比设置宽度
    在这里插入图片描述
<style media="screen">
    *{
     
     margin: 0;padding: 0;}
    div{
     
     
      width: 25%;
      height: 200px;
      background-color: red;
      float: left;
    }
  </style>
</head>
<body>
  <div style="background-color: red">1</div>
  <div style="background-color: blue">2</div>
  <div style="background-color: yellow">3</div>
  <div style="background-color: green">4</div>
</body>
2.2.6 两端固定中间自适应布局
  • 简单实现方法
    • 两端定宽分别左右浮动，中间设置左右margin，不设置宽度
    • 三个标签按顺序排列
      在这里插入图片描述
<style media="screen">
	 *{
     
     margin: 0;padding: 0;}
	 .left {
     
     
	   width: 200px;
	   height: 400px;
	   float: left;
	   background-color: red;
	 }
	 .content {
     
     
	   height: 400px;
	   background-color: blue;
	   margin-left: 0;
	   margin-right: 0;
	 }
	 .right {
     
     
	   width: 200px;
	   height: 400px;
	   float: right;
	   background-color: green;
	 }
</style>

<body>
  <div class="left">1</div>
  <div class="right">3</div>
  <div class="content">2</div>
</body>
2.2.7 双飞翼布局
  • 自适应标签放在第一位，三个标签全部浮动
  • 自适应标签内部嵌套一个子容器，设置左右margin，留出两端固定区域
  • 左侧固定标签margin-left为负的100%
  • 右侧固定标签margin-left为负的右侧固定区块宽度
<style>
   .center,.left,.right{
     
     float:left;}
   .center{
     
     
       width: 100%;
       height: 500px;
       background-color: #ff0;
   }
   .content{
     
     
       margin:0 200px;
       height: 500px;
       background-color: #0ff;
   }
   .left{
     
     
       width: 200px;
       height: 200px;
       background-color: #0f0;
       margin-left:-100%;
   }
   .right{
     
     
       width: 200px;
       height: 200px;
       background-color: #00f;
       margin-left:-200px;
   }
</style>
<body>
    <div class="center">
        <div class="content">自适应区域</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

在这里插入图片描述

2.2.8 圣杯布局
  • 自适应标签放在第一位，三个标签全部浮动，外部增加一个容器
  • 外部容器标签设置左右的padding，留出两端固定区域
  • 自适应标签宽度为100%
  • 左侧固定标签，margin-left为负的100%，相对定位+left（负数）
  • 右侧固定标签，margin-left为负的右侧固定区块宽度，相对定位+right（负数）
<style>
    .container{
     
     
        padding:0 200px;
    }
    .center,.left,.right{
     
     float:left;}
    .center{
     
     
        width: 100%;
        height: 500px;
        background-color: #ff0;
    }
    .left{
     
     
        width: 200px;
        height: 200px;
        background-color: #0f0;
        margin-left:-100%;
        position:relative;
        left:-200px;
    }
    .right{
     
     
        width: 200px;
        height: 200px;
        background-color: #00f;
        margin-left:-200px;
        position:relative;
        right:-200px;
    }
</style>

<body>
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

在这里插入图片描述

3. Flex 布局方式

3.1 增强盒子属性

  • box-sizing 样式用于设置盒子模型的解析方式

    • content-box
      • W3C标准盒子模型，盒子实际尺寸包含内容width/height、border和padding累加
    • border-box
      • 盒子尺寸还是由内容、border和padding累加而成，但实际尺寸就是width

  • 增强盒子样式属性

<style media="screen">
  *{
     
     margin: 0;padding: 0;}
  div{
     
     
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: #ff0;
    border: 5px solid #ccc;
    box-sizing: border-box;    /* 元素的实际尺寸就是 width 和 height */
    /* box-sizing: content-box;  元素的实际尺寸就是 width 和 height，加上 border 和 padding */
  }
</style>
<body>
  <div></div>
</body>

在这里插入图片描述

  • 使用calc函数设置元素宽度
    • 注意空格不能省略
width: calc(100% - 100px)
  • max-尺寸
    • 最大显示宽度
  • min-尺寸
    • 最小显示宽度

3.2 弹性布局

  • Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性
  • 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
3.2.1 flex 布局原理

在这里插入图片描述

  • 交叉轴方向多项目对齐属性align-content
    在这里插入图片描述
3.2.2 flex 语法
  • 设置父级容器的样式属性
样式 说明
display: flex 设置容器为块级弹性布局
display: inline-flex 设置容器为内联级弹性布局
flex-direction 设置容器内部元素的排列顺序，正序或逆序
flex-wrap 设置容器内部元素是否自动换行
flex-flow 集成了 direction 和 wrap 设置
justify-content 设置内部元素的主轴对齐方式
align-items 设置内部元素的交叉轴对齐方式
  • 设置子元素的样式属性
样式 说明
align-self 设置元素相对自身交叉轴对齐方式
flex 设置每个内部元素占用的空间比例
order 设置内部元素在容器中显示的位置
属性值 描述
flex-start 默认值，项目位于容器开头
flex-end 项目位于容器结尾
center 项目位于容器中心
space-between 项目位于各行之间留有空白的容器内
space-around 项目位于各行之前，之间，之后都留有空白的容器内
initial 设置该属性为它的默认值
inherit 从父元素继承该属性
属性值 描述
stretch 默认值，元素被拉伸以适应容器
center 项目位于容器中心
flex-start 项目位于容器开头
flex-end 项目位于容器结尾
space-between 项目位于各行之间留有空白的容器内
space-around 项目位于各行之前，之间，之后都留有空白的容器内
initial 设置该属性为它的默认值
inherit 从父元素继承该属性
3.2.3 flex 练习
<style>
    *{
     
     margin: 0;padding: 0;}

    .container {
     
     
        width: 400px;
        margin: 10px auto;
        border: 1px solid #f00;
        display: flex;
        flex-wrap: wrap;  /* 允许子元素换行 */
        justify-content: center;
        align-items: center;
    }

    .item {
     
     
        width: 100px;
        height: 100px;
        display: flex;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin: 10px;
    }

    span {
     
     
        display: block;
        width: 15px;
        height: 15px;
        background-color: #000;
        border-radius: 50%;
        margin: 8px;
    }

    .container>div:nth-child(1) {
     
     
        justify-content: flex-start;
    }

    .container>div:nth-child(2) {
     
     
        justify-content: center;
    }

    .container>div:nth-child(3) {
     
     
        justify-content: flex-end;
    }

    .container>div:nth-child(4) {
     
     
        flex-direction: column;
        justify-content: center;
    }

    .container>div:nth-child(5) {
     
     
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container>div:nth-child(6) {
     
     
        justify-content: flex-end;
        align-items: flex-end;
    }

    .container>div:nth-child(7) {
     
     
        justify-content: space-between;
    }

    .container>div:nth-child(8) {
     
     
        justify-content: space-between;
        flex-direction: column;
    }

    .container>div:nth-child(9) {
     
     
        flex-direction: column;
        justify-content: flex-start;
    }

    .container>div:nth-child(9) span:nth-child(2){
     
     
        align-self: center;
    }

    .container>div:nth-child(10) {
     
     
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: space-between;
    }

</style>

<body>
    <div class="container">
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span></div>
        <div class="item"><span></span><span></span></div>
        <div class="item"><span></span><span></span></div>
        <div class="item"><span></span><span></span></div>
        <div class="item"><span></span><span></span><span></span><span></span></div>
    </div>
</body>

在这里插入图片描述

4. HTML5 网站布局

  • HTML5 语义元素
元素 描述
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
  • 传统布局
    在这里插入图片描述
  • HTML5 布局
    在这里插入图片描述

4. 总结

  • 布局一直是页面最重要的部分之一，优秀的界面布局会提升用户体验，非常重要

猜你喜欢

转载自blog.csdn.net/qq_43645678/article/details/107826620
今日推荐
周排行
jasperreport 开发问题总结
eclipse最最最常用的快捷键
2.Kotlin-扩展函数
PHP中创建和编辑Excel表格的方法
远程办公的复盘 未完待续
mac与windows共享键盘鼠标(synergy)
DOCKER使用 FLANNEL（ETCD+FLANNEL）网络
剑指offer：（二）替换空格
javaScript之Location,Navigator,History
Python 模块的加载顺序
每日归档
更多
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)
2025-03-07(0)
2025-03-06(0)
2025-03-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022