CSS布局（持续更新）

最新推荐文章于 2022-06-28 21:48:49 发布

lakalu1999

最新推荐文章于 2022-06-28 21:48:49 发布

阅读量114

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45289501/article/details/109058060

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS布局概要

css是一个网页的外衣，网页好不好看取决于css样式，而布局是css中比较重要的部分，当产品把一个需求设计交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是html的结构，根据要兼容的浏览器，数据的拼接，代码的可维护性，扩展性来选择css的布局方法。有时候，一个好的布局可以减少很多代码，用css处理网页布局的时候有很多技巧性的东西。

布局相关元素

1.定位（position）
设定元素在文档中的位置，会将标签（元素）转换为块级。
2.定位属性：
1）static：静态定位
默认值，无定位，不能设置偏移值（left/top/bottom/right）
2）relative：相对定位
占用标准流，它会出现在标准流中它该出现的位置，可以设定偏移值改变其位置，它相对于自身位置作偏移
3）absolute：绝对定位
绝对定位一般与相对定位结合使用，它相对的父级是relative的元素作偏移，relative的元素必须是absolute的父级，在项目开发中，一般用relative+absolute结合使用
4）fixed：固定定位
脱离文档流，相对于body（浏览器左上角）作偏移，跟relative设定的对象没有关系，一般在开发中用来固定导航
3.z-index
当多个元素添加absolute定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次
文档流默认的z-index的值为0
用在static和relative元素上将无效
先有定位（position），才能设定偏移值：left,right

轮播图

作用：主要用于产品相关宣传
组成：
1）组图（至少两张以上，不能太多）
2）控制器
3）计数器

两栏布局

1.左固定，右自适应
2.左自适应，右固定
3.左右固定

    <style>

        .container{
            width: 1000px;
            overflow: hidden;
        }
        .left{
            float:left;
            width: 200px;
            height: 100px;
            background-color: red;



        }
        .right{
            float: right;
            width: 800px;
            height: 100px;
            font-size:30px;
            background-color: blueviolet;
            margin-left:-150px;


        }

    </style>
</head>
<body>
<div class="container">
    <div class="left">左固定</div>
    <div class="right">右固定</div>
</div>
var foo = 'bar';

在这里插入图片描述

三栏布局

1.左固定，中自适应，右固定
2.左自适应，中间右固定
3.左、中自适应，右固定

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
overflow:hidden;
        }
        .left{
            width: 200px;
            height: 100px;
            background-color: red;
            font-size: 30px;
            float:left;
        }
        .center{
            width: 200px;
            height: 100px;
            background-color: green;
            font-size: 30px;
            float:left;
        }

        .right{
            width: 100%;
            height: 100px;
            background-color: blue;
            font-size: 30px;
            float:left;margin-right:-400px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <div class="content">左自适应</div>
    </div>
        <div class="center">中间固定</div>
    <div class="right">
        <div class="content">右固定
        </div>
        </div>
</div>
</body>
var foo = 'bar';

右边是无线拓展的：
在这里插入图片描述

BFC&IFC规范

FC：fomatting context，格式上下文，是CSS2.1规范的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，决定了其子元素是如何定位的，以及和其他元素的关系和相互作用。分为BFC、IFC。
1）BFC：块级格式上下文
a）形成BFC的条件
1.浮动元素（float除了none除外）
2.定位元素（position（absolute/fixed））
3.display（inline-block/table-cell/table-caption）
4.overfllow（hidden、auto、scroll）
b）BFC特性规则：
1.内部盒子会在垂直方向一个接一个放置
2.垂直方向上的距离由margin最大值决定，如果不要最大值，需要将其变成独立的盒子
3.BFC的区域不会与float元素区域重叠
4.计算BFC高度时，浮动元素也参与计算
5.BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
IFC：内联（行级）格式上下文
1.形成IFC条件
font-size
line-height
Height
vertical-align
2.ICF特性规则
1.IFC元素会在一行从左至右排列
2.在一行的所有元素会在该区域形成一个行框
3.行宽的高度为包含框的高度，高度为行框中最高的元素
4.浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
5.行狂的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
6.行框的元素内遵循text-align和vertical-align

lakalu1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局（持续更新）

CSS布局概要css是一个网页的外衣，网页好不好看取决于css样式，而布局是css中比较重要的部分，当产品把一个需求设计交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是html的结构，根据要兼容的浏览器，数据的拼接，代码的可维护性，扩展性来选择css的布局方法。有时候，一个好的布局可以减少很多代码，用css处理网页布局的时候有很多技巧性的东西。布局相关元素1.定位（position）设定元素在文档中的位置，会将标签（元素）转换为块级。2.定位属性：1）static：静态定位默认值，无
复制链接

扫一扫