CSS布局和float布局

最新推荐文章于 2022-03-04 16:32:22 发布

xiaobangsky

最新推荐文章于 2022-03-04 16:32:22 发布

阅读量122

点赞数

分类专栏：前端体系构建文章标签： css

本文链接：https://blog.csdn.net/xiaobangsky/article/details/109844820

版权

前端体系构建专栏收录该内容

71 篇文章 2 订阅

订阅专栏

布局的概念

将页面分成多个部分，按上中下、左中右、上下、左右等结构进行排列。

布局分类

固定宽度布局，有960/1000/1024px常用宽度。
不固定宽度布局，主要是文档流的原理来布局。
响应式布局：

PC上固定宽度，手机上不固定宽度。
属于混合布局。

布局的思路

从大到小

先定大局
完善每个部分的小布局

从小到大

先小布局
组合完成大布局

图片解析（来自添加链接描述）[来自写代码啦]

在这里插入图片描述

注意下面的介绍float布局

float布局

步骤

子元素加上float:left和width
父元素加上

.clearfix::after{content: '';display: block;clear:both;}`

理解

留空间或者最后一个不设置宽度
手机无IE,float布局专为IE准备，无需响应式布局

举例说明
做个顶部条，如图：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>nav</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            ul,ol{
                list-style: none;
            }
            header{
                display: block;
            }
            .clearfix::after{
                content: '';
                display: block;
                clear:both;
            }
            .logo{
                background: grey;
                display: inline-block;
                float:left;
                margin-top: 8px;
                margin-left: 10px;
            }
            .logo > span{
                height: 26px;
                vertical-align: middle;
            }
            .nav{
                float: right;
                margin-left: 20px;
            }
            ul > li{
                float: left;
                padding: 4px 0.5em;
                line-height: 32px;
            }
            ul{
                display: inline-block;
            }
            header{
                background: grey;
                color:white;
            }
        </style>
    </head>
    <body>
        <header class="clearfix">
            <div class="logo">
                <span>测试</span>
            </div>
            <ul class="clearfix nav">
                <li>测试1</li>
                <li>测试2</li>
                <li>测试3</li>
                <li>测试4</li>
            </ul>
        </header>
    </body>
</html>

xiaobangsky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS布局和float布局

布局的概念将页面分成多个部分，按上中下、左中右、上下、左右等结构进行排列。布局分类固定宽度布局，有960/1000/1024px常用宽度。不固定宽度布局，主要是文档流的原理来布局。响应式布局：PC上固定宽度，手机上不固定宽度。属于混合布局。布局的思路从大到小先定大局完善每个部分的小布局从小到大先小布局组合完成大布局图片解析（来自添加链接描述）[来自写代码啦]注意下面的介绍float布局float布局步骤子元素加上float:left和wi
复制链接

扫一扫