一、概述

    1、什么是定位体系

    视觉格式化模型规定,定位体系共有三种

            a.常规流(normal flow)

            b.浮动(float)

            c.绝对定位(absolute posotioned)

    任何一个元素,必须属于其中一种定位系统

二、定位体系判定

    

三、盒模型和定位体系

1、盒模型=盒子体系

    定位体系=盒子位置

2、盒模型中的尺寸

  • margin:px、em、%、auto
  • border:px、em
  • padding:px、em、%、auto
  • height:px、em、%、auto

px、em:1em=10px(盒子中的字体大小为10px)

%:尺寸是包含快尺寸的百分比,margin、padding、width的百分比是宽度的百分比

auto:尺寸受到定位体系的规则

3、常规流

    又叫普通流、文档流、普通文档器,是最常见的,默认状态下的定位

     a.常规流块盒水平方向上的居中(常用)

            step1 给块盒设宽度

                水平方向的尺寸,必须等于包含快的宽度

            step2 给块盒margin设置 :0 auto

     b.垂直方向上居中

            若两个外边距相邻,则进行合并(折叠)

            合并:

  • 两个包含块均为正值,则取最大的值
  • 两个包含块均为负值,则取最小的值
  • 两个包含块一正一负,则取两个值相加

            注:水平方向的外边距不会合并

4、浮动 float

        取值:float:right/left;

        清浮动,即,找回父级的高度

    

5、flex 弹性盒子

        display:flex;(在容器内增添)

        分为:容器(父元素) 项目(子元素)

    (1)容器的属性:

  • direction 控制子元素的方向(行、列)

                    flex-direction:row;主轴为水平方向,子元素从左到右排列,为默认值

                    flex-direction:row-reverse;主轴为水平方向,子元素从右到左排列

                    flex-direction:colum;主轴为垂直方向,子元素从上到下排列

                    flex-direction:colum-reverse;主轴为水平方向,子元素从下到上排列

  • wrap 换行

                    flex-wrap:nowrap;不换行,为默认值

                    flex-wrap:wrap;换行,第一行在上方

                    flex-wrap:wrap-reverse;换行,第一行在下方

  • justify-content 主轴方向对齐方式

                    justify-content:center;主轴方向居中

                    justify-content:flex-end;主轴结束位置flex-end对齐

                    justify-content:flex-start;主轴起始位置flex-start对齐

                    justify-content:space-between;两端对齐,

                     即第一个项目在容器的起始位置,最后一个项目在容器的结束位置。

                    justify-content:space-around;分散对齐

                    (计算公式: (剩余空间 / 项目个数)/2得到的结果,就是每个项目的左右距离。)

                    justify-content:space-evenly;平均分散对齐

                     每个项目之间的距离相同,即平分剩余空间

                <space 对剩余空间的分配方式,剩余空间 = 容器的尺寸 - 项目尺寸之和>

  • align 交叉轴方向对齐方式

                    一根主轴(itmes):

                        align-items: flex-start;交叉轴起始位置flex-start对齐

                        align-items: flex-end;交叉轴结束位置flex-end对齐

                        align-items: center;交叉轴居中对齐

                        align-items: baseline;交叉轴基线对齐

                    多跟主轴(content):

                        项目在开通换行后

                        align-content: flex-start;交叉轴起始位置flex-start对齐

                        align-content: flex-end;交叉轴结束位置flex-end对齐

                        align-content: center;交叉轴居中对齐

                        align-content: space-between;交叉轴起始和结束位置对其(上下两端对其)

                        align-content: space-around;交叉轴分散对齐

                (当容器交叉的尺寸大于各项目尺寸之和,才需要进行对齐方式的设置。)

    (2)项目的属性

                order 定义项目排列顺序,数值越小,排列越靠前,默认值为0

                flex-grow 定义项目的放大比例,默认为0,即,即使有剩余空间也不放大

                    若设值为>0,则,将按照设值的数值比例分配剩余空间

                flex-shrink 定义项目的缩小比例,默认为1,即,如果空间不足,则将项目按比例缩小

                    若一个项目为0,其余为1,则,空间不足时前者不缩小

                flex-basis 定义分派多余空间前,项目占据的主轴空间,默认为0,即,项目本来大小

                align-self 允许单个项目与其他项目不一样的对齐方式,可覆盖 align-items的属性,默认值为auto

                    表示继承父元素align-items的属性

                flex属性是这三多的缩写

                    默认值:0 1 auto;

                    快捷键

                        auto(1 1 auto)

                        none(0 0 auto)

             flex-flow,属性是flex-direction和flex-wrap属性的简写

                    默认值为 :row nowrap;

6、绝对定位

    (1)相对位置

position:relative

            相当于盒子在原本定位体系下的位置,移动后会保留原来的位置,不影响其他元素的位置

                属于常规流

            将盒子的position属性设为relative 以启用相对位置

    (2)固定位置

            position:fixed;

  • 概念:

                    1、脱离文档流(不占位置)

                     2、宽度为auto(内容的宽)

                     3、方向值 top:。。。(不给方向值,原来在什么位置,就在什么位置)

  • 包含块:是视口的起始点(0,0),左上角
  • 使用场景

                    1、AD(广告)

                    2、导航、页角

                    3、遮罩层(页面弹窗)

  • 堆叠级别

                    默认值为0;

                    取值5以内

    (3)绝对位置

            position:absolute;

  • 概念

                     1、脱离文档流(不占位置)

                     2、宽度为auto(内容的宽)

                     3、方向值(不给方向值,原来在什么位置,就在什么位置)

                     4、包含块position推荐取(relative)

  • 包含块

                    看父级的position是否为static,不是则该父级为包含块

  • 适用场景

                     当多个标签需要重叠展示时

CSS中的定位体系的更多相关文章

  1. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  2. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  3. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

  7. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

  8. css中的定位

    上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;   ...

  9. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

随机推荐

  1. 裁剪nutch 8步骤

    裁剪nutch 8步骤

  2. Channel 9视频整理【3】

    Will 保哥 微软mvp https://channel9.msdn.com/Niners/Will_Huang 繁体中文视频 Visual Studio 2017 新功能探索 https://ch ...

  3. 基于bootstrap3.3.4的简单框架搭建(左侧导航收起滚动)

    前提:博主本人做.net方向的2年多了 去年的后半年公司要做基于bootstrap框架的后台,由于没有经验,然后跟公司美工一块从0开始折腾,对这个框架不是太熟悉,然后就开始各种自己写js写css的往里 ...

  4. Qt串行化的输入和输出(使用QDataStream读写QByteArray,对QIODevice直接起作用)

    参考https://lug.ustc.edu.cn/sites/qtguide/ 今天看了一个介绍Qt串行化的介绍,感觉很受益,就记录了下来. 串行化(Serialization)是计算机科学中的一个 ...

  5. Docker Desktop for Windows Experience

    Docker Desktop for Windows Experience: https://github.com/poazy/boazy-learn/blob/master/doc/Docker%2 ...

  6. Perl中的bless的理解

    bless有两个参数:对象的引用.类的名称. 类的名称是一个字符串,代表了类的类型信息,这是理解bless的关键. 所谓bless就是把 类型信息 赋予 实例变量. [xywang@mnsdev13: ...

  7. Python3 批量修改JPG图片尺寸

    功能 批量修改当前文件夹下的jpg图片到设置的尺寸 将修改后的图片移动到 new_img 这个文件夹下 导入库 from PIL import Image # 处理图片模块 import os imp ...

  8. alpha week 1/2 Scrum立会报告+燃尽图 06

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9916 小组名称:“组长”组 组长:杨天宇 组员:魏新,罗杨美慧,王歆瑶, ...

  9. 洛谷$P$2048 超级钢琴 $[NOI2010]$ $rmq$/主席树

    正解:$rmq$/主席树 解题报告: 传送门! 好像看过这题挺多次辣,,,$QwQ$ 之前$NOIp$的时候$cjk$学长讲课讲了这题(虽然那时候的$gql$太菜辣并麻油落实这道_(:з」∠)_,然后 ...

  10. 洛谷$1220$ 关路灯 记搜/$DP$

    \(Sol\) 约定\(pos\)为老张所处的位置的路灯号,\(i<pos,j>pos\). 显然,如果\(i\)和\(j\)都关了,那么它们之间的所有灯一定也都关了. 设\(f[i][j ...