盒模型

时间:2021-6-12 作者:qvyue

怪异盒模型(IE盒模型)

在IE低版本的浏览器中如果丢失了文档类型,触发IE盒模型

属性:box-sizing

    属性值:

    –    content-box    默认值    标准盒模型

    –    border-box    怪异盒模型

特点

    –    当盒子形成了怪异盒模型之后,padding值不会撑大容器大小,不需要减去padding值

    –    border是向盒子内部形成的

怪异盒模型宽高大小的计算方式

    –    计算自身的大小    content(包含padding和border)

    –    盒子在浏览器中所占位置的大小    content(padding+border)+margin

和普通盒模型的区别

    –    不需要计算border和padding的值

    –    工作的项目中如果使用到怪异盒模型    不考虑兼容问题(移动端都是-webkit-内核)

    –    由于兼容问题    怪异盒模型都是在移动端使用,不建议在PC端使用

弹性盒模型的基础概念(控制子集元素在父级容器中的排列位置)

    属性:display

    属性值:flex

        –    盒模型是控制子集元素在父级容器中的位置,flex一定要设置在父级容器上

        –    形成盒模型后,默认的主轴方向是X轴,侧轴是Y轴(可以通过设置改变)

        –    盒模型中的任何元素类型,都可以直接设置宽高大小,

        –    居中方式

之前的居中方式   –    表格居中    align/valign

                            –    文本居中    text-align/line-height

                            –    图片居中    基线对齐

                            –    背景图片居中    background-position

                            –    版心居中    margin:0 auto

                            –    定位居中:已知大小设置50%宽高,再减去一半的自身宽高

                                                  未知大小设置left,right,top,bottom为0;再margin auto

                            –    弹性盒模型居中    单个元素居中:margin :auto

在弹性盒模型中,浮动不可以使用,定位,盒模型都可以正常使用

弹性盒模型的属性

    设置在父级上面的属性 =>控制所有的子级元素

    设置在子集上面的属性  =>控制单个子级元素

 1.改变默认的主轴方向

    属性:flex-direction

    属性值:

        –    row    X轴方向为主轴方向(默认值)

        –    column    Y轴方向为主轴方向

2.对齐方向

    ①主轴上的对齐方向

        属性:justify-content    

        属性值

            –    flex-start    默认值,表示元素在起始位置

            –    flex-end    表示元素在结束位置

            –    center    居中

            –    space-between    两端对齐,其余空间自动分配

            –    space-around    所有子级元素左右间距都是一样

            –    space-evenly    所有子级元素之间的间距都是一样的

    ②侧轴上的对齐方向

        属性:align-items

        属性值:

            –    flex-start    同上

            –    flex-end

            –    center

            –    baseline    基线对齐

                    当所有子级元素宽高都一样的情况下,baseline和flex-start的效果一样

                    当子级元素不设置高度的情况下不设置baseline,子级会默认拉伸

                    当所有子级元素都是文本的情况下,排列方式都是基线对齐

            –    stretch    拉伸

    ③当子级元素的总宽度大于父级的时候,默认是进行挤压,不会掉下去

            换行属性:flex-wrap

            属性值:

                –    nowrap    不换行(默认)

                –    wrap    换行

    ④当设置换行时,行与行之间默认间距较大

        属性:align-conter

        属性值:

            –    常用   flex-start    换行为起始位置

            –    flex-end

            –    center

            –    space-between

            –    space-around

            –    space-evenly

添加在子级元素的属性:控制单个元素的位置

1.控制子级元素在侧轴上的对齐方式

        属性:align-self

        属性值:

                –    flex-start    同上

                –    flex-end    

                –    center

                –    auto

                        父级元素有侧轴的对齐方向 继承父级元素的对齐方式

                        父级元素没有侧轴的对齐方向    默认为拉伸

                –    stretch    拉伸

2.order    优先级    number    往后显示

属性flex的使用(不是属性值flex)

    属性:flex

    属性值:

      number

        常用的是1,也可以设置2,3,4 

    设置为1的时候一般用于移动端中间main布局,上下为固定高度,中间设置flex为1可以自适应到用户手机屏幕的宽度。

      flex-grow:空间分配

    0  为当前元素正常显示分配

    1  当前元素分配比例   

      flex-shirnk:收缩的量

    0    表示不缩放

    1    表示正常缩放    

     flex-basis:显示的比例

    auto    正常显示

    0%~100%    所占比例(不会撑开父级元素,会把其他子级撑小)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。