Day07

不万能的小李.

已于 2023-08-10 20:03:58 修改

阅读量40

点赞数

分类专栏： HTML5 和 css 文章标签：前端

于 2023-07-13 08:11:36 首次发布

本文链接：https://blog.csdn.net/Li1023055421/article/details/131693956

版权

HTML5 和 css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

01、水平居中

margin 左右方向可以设置自适应 auto，这样他所修饰的块属性标签就会在左右方向上自动居中

注意：auto 只能控制水平方向的自动居中，不能控制垂直方向上的自动居中

margin:0 auto;

auto的原理

auto的值 = （父元素的宽度-当前元素的宽度）/2；

02、浮动

浮动的原理：设置浮动的元素超出文档流

文档流：就是元素从上到下从左到右的布局顺序

浮动的作用：从整体出发，把标签元素进行横向布局

使用 inline-block 横向布局的弊端：

1.元素之间有缝隙，需要解决

2.低版本浏览器不支持 inline-block

浮动的特点：

1.浮动的元素超出文档流

2.块属性标签浮动之后，不再独自占据一行空间，如果不设置宽高，则他的宽高由内容撑开

3.块属性标签浮动之后，他的margin 属性的auto值失效

4.行属性标签浮动之后，可以设置宽和高，并且支持上下padding和上下margin

03、清浮动

当子级元素产生浮动的时候，他的父级元素会因此产生影响，由于浮动元素脱离文档流，父元素没有被子元素撑开，导致父元素没有高度，这样在布局的时候，会产生混乱

清除浮动产生的影响（清浮动）

1.给浮动元素的父级，添加 overflow：hidden

2.给父元素设置指定高度，确保布局正确

3.给父级元素添加 display:inline-block,该方法兼容性差

4.给父元素添加浮动,可能会影响布局

5.设置一个空标签，在空标签中设置属性

.clear {

clear:both;

/* 防止ie低版本具有默认高度 */

height:0;

overflow:hidden;

}

6.通过after伪元素清浮动

.clearfix::after {

content: '';

display: block;

height: 0;

overflow: hidden;

clear: both;

}

04、浮动练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习</title>
    <style>
        * {
            margin: 0;
            padding:0;
        }
        .wp {
            border: 1px #f00 solid;
            width: 800px;
            margin: 0 auto;
        }

        .wp img {
            width: 200px;
            height: 150px;
            border: 1px #f00 solid;
            float: left;
        }
        .clearfix::after {
            content: '';
            clear: both;
            height: 0;
            overflow: hidden;
            display: block;
        }
        .top-bar {
            height: 100px;
            background-color: #4a4a4a;
        }
        .nav {
            width: 1100px;
            margin: 0 auto;
            height: 100px; 
            /* background-color: rgba(255, 255, 255, 0.5); */
        }
        .logo,.logo a,.logo img {
            float: left;
            width: 100px;
            height: 80;
        }
        .nav-list {
            float: right;
        }
        .nav-list a {
            float: left;
            line-height: 100px;
            text-decoration: none;
            color: #fff;
            margin-left: 20px;
        }
        .layout {
            width: 1100px;
            height: 1000px;
            margin: 20px auto;
        }
        .l {
            float: left;
            width: 880px;
            height: 100%;
            background: #04be02;
        }
        .r {
            float: right;
            width: 200px;
            height: 50%;
            background: #00f;
        }
    </style>
</head>
<body>
    <div class="wp clearfix">
        <img src="/Day03/image/a.jpg" alt="">
        <img src="/Day03/image/a.jpg" alt="">
        <img src="/Day03/image/a.jpg" alt="">
    </div>
    <!-- 布局 -->
    <div class="top-bar">
        <div class="nav clearfix">
            <!-- 设置logo -->
            <h1 class="logo">
                <a href="###">
                    <img src="/Day03/image/wlop1.jpg" alt="">
                </a>
            </h1>
            <div class="nav-list">
                <a href="###">首页</a>
                <a href="###">列表页</a>
                <a href="###">关于我们</a>
            </div>
        </div>
    </div>
    
    <div class="layout clearfix">
        <div class="l"></div>
        <div class="r"></div>
    </div>
</body>
</html>

不万能的小李.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Day07

当子级元素产生浮动的时候，他的父级元素会因此产生影响，由于浮动元素脱离文档流，父元素没有被子元素撑开，导致父元素没有高度，这样在布局的时候，会产生混乱。2.块属性标签浮动之后，不再独自占据一行空间，如果不设置宽高，则他的宽高由内容撑开。margin 左右方向可以设置自适应 auto，这样他所修饰的块属性标签就会在左右方向上自动居中。3.块属性标签浮动之后，他的margin 属性的auto值失效。auto的值 = （父元素的宽度-当前元素的宽度）/2；浮动的作用：从整体出发，把标签元素进行横向布局。
复制链接

扫一扫