css的简史和css布局历史

最新推荐文章于 2023-11-01 00:26:43 发布

binmei1681

最新推荐文章于 2023-11-01 00:26:43 发布

阅读量677

点赞数

本文链接：https://blog.csdn.net/binmei1681/article/details/83064352

版权

css的简史和css布局历史

1.table布局，知道就好。
2.div+css布局，伴随着我们整个前端职业生涯，也是目前主流的布局方式，重点掌握。
3.flex布局，目前在移动端布局日渐成为主流，要会使用。
4.grid布局，这个关注就好，大家会在将来复杂布局中使用，目前兼容性不是很好，没有太多实际应用场景。

css布局的基石-浮动

重点掌握float

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>
        #wrap{
            width:1000px;
            margin: 0 auto;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;

        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>
<html>

一般平常pc端切图用标准盒模型很多，移动端切图经常会用到诡异盒模型的情况。
使用诡异盒模型方法，
box-sizing: border-box;

2.高度不够，工作中最常用。

<!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>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
            overflow: hidden;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>
<html>

黄色框线部分，支撑不开，这里就要用
overflow:hidden;
就撑开了。

清除浮动除了我文中说的是最经典常用的方式
常用的还有两种，这里我们把最常用的三种总结下：
1.添加新的元素、应用 clear：both；
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

2.父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
<div class="outer over-flow">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>
3.:after 方法：（注意：作用于浮动元素的父亲）
这种方法是面试的最佳答法，也是工作最常用方式。

css布局的基石-定位

1.四种定位。
static 默认 relative相对 absolute 绝对 fixed固定

binmei1681

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css的简史和css布局历史

css的简史和css布局历史1.table布局，知道就好。2.div+css布局，伴随着我们整个前端职业生涯，也是目前主流的布局方式，重点掌握。3.flex布局，目前在移动端布局日渐成为主流，要会使用。4.grid布局，这个关注就好，大家会在将来复杂布局中使用，目前兼容性不是很好，没有太多实际应用场景。css布局的基石-浮动重点掌握float1.挤下去了的问题，&l...
复制链接

扫一扫