CSS教程

Box of CSS3

本文主要是介绍Box of CSS3,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • Box of CSS3
    • W3C Standards mode
    • IE 6 Quirks mode
    • box-sizing
      • content-box
      • border-box
    • overflow
      • visible
      • hidden
      • scroll
      • auto
      • clip
    • resize
    • flex
      • flex-direction
        • row
        • column
        • row-reverse、column-reverse
      • flex-wrap
        • nowrap
        • wrap
        • wrap-reverse
      • justify-content
        • flex-start
        • flex-end
        • center
        • space-between
        • space-around
      • align-items
        • flex-start
        • flex-end
        • center
        • baseline
        • stretch
      • align-content
        • flex-start、flex-end、center、space-between、space-around、stretch
      • order
      • align-self
        • flex-start、flex-end、center、baseline、stretch、auto
      • flex
      • flex-grow
      • flex-basis
      • flex-shrink
      • 应用
        • 居中
        • 可动态增加的导航栏
        • 等分布局
        • 圣杯布局
        • 流式布局

Box of CSS3

image-20220204172512172

盒子模型功能的强与弱直接就能决定布局是否简洁,布局是否简洁又决定了后期的编程是否复杂。

盒模型非常重要,甚至可以间接的影响到后期的全局的js交互行为。

W3C Standards mode

盒子有四部分构成:

margin、border、padding、content.

盒子的真实宽度:

boxWidth = width + padding(2) + border(2)

IE 6 Quirks mode

这个新的盒子模型构成部分没有变化,变得是计算方式和原来的盒子不一样。

新盒子的真实宽度:

boxWidth = width

盒子内容区宽度:contentWidth = width - border×2 - padding×2

box-sizing

有两个属性值

content-box

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。

这个模型也就是W3C Standards mode(标准模式)下的盒子:

.wrapper{
	box-sizing:content-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

image-20220206090704586

这个值是box-sizing属性的默认值。

border-box

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度。

这个模型也就是IE 6 Quirks mode(怪异模式)下的盒子:

.wrapper{
	box-sizing:border-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

image-20220206090930741

overflow

可以只写overflow设置值,也可以用overflow-x、overflow-y指定横向或纵向,而且除了当overflow-x,overflow-y之一设置为非 visible时另一个属性会自动将默认值visible计算为auto

visible

对溢出内容不做处理,内容可能会超出容器。

hidden

隐藏溢出容器的内容且不出现滚动条。

scroll

隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。

auto

当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。textarea元素的overflow默认值就是auto

clip

hidden一样,clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于,clip是一个完全禁止滚动的容器,而hidden仍然可以通过编程机制让内容可以滚动。但是这个属性的兼容性不好,一般不用。

resize

设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。

image-20220206103124758

这个属性可用性很低,因为改变一个dom元素的大小以后,其他的元素相应的也会受到影响,就会触发重排和重绘,产生非常大的性能消耗,除非有特殊需求,不然是不会用的。

flex

设置flex属性以后,这个元素就变成了具备弹性功能的一个盒子区域,在这个元素里面就可以使用弹性盒子的功能,也就是说这个东西也是父子级相互配配合起来的,父级给一个弹性盒子区域,子级可以使用弹性盒子的方法,这两个互相配合着使用,形成一个利用弹性盒子的独特的的布局。弹性盒子能解决的功能布局很多。

flex-direction

现在先用一个简单的结构来学习:

<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
.wrapper{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.content{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
}

初始状态是这样的:

image-20220206113609379

row

.wrapper{
    flex-direction:row;
}

这是flex-direction属性的默认值,效果和初始状态是一样的。

column

这个值会让主轴方向变为垂直。

image-20220206113302713

row-reverse、column-reverse

这两个值会将对应主轴的方向反过来,也就是顺序变为321。

flex-wrap

接下来再添加几个content盒子

image-20220206114608684

nowrap

.wrapper{
    flex-wrap:nowrap;
}

这是flex-wrap属性的默认值。

wrap

设置flex容器为多行,该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行。

image-20220206115155054

wrap-reverse

这个值是反着换行,而且换的匪夷所思,这个功能应用的范围很小。

image-20220206115249001

justify-content

这个属性设置弹性盒子元素在主轴方向上的对齐方式。

现在将外部的盒子变大:

image-20220206115622197

flex-start

.wrapper{
    justify-content:flex-start;
}

这是justify-content属性的默认值。

flex-end

image-20220206115842534

center

image-20220206120023004

space-between

为了能更直观的展现效果,多加几个方块:

image-20220206120313167

space-around

image-20220206191556219

align-items

定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。

flex-start

.wrapper{
    align-items:flex-start;
}

flex-end

image-20220206192615918

center

image-20220206192652027

baseline

这个值是基于盒子里面的内容对齐,为了展现效果,对里面三个盒子稍作修改:

.content:first-of-type{
    margin-top: 10px;
}
.content:nth-of-type(2){
    height: 200px;
}

然后设置baseline属性值:

image-20220206193032779

stretch

这个值的使用有个前提是没有设置flex子项的高度,然后stretch属性值会把盒子撑开:

image-20220206194013817

这个属性值也是align-items属性的默认值。

align-content

这个属性必须设置的是多行的盒子,单行的不管用。

flex-start、flex-end、center、space-between、space-around、stretch

这几个属性值都与上面同名的效果类似,只不过是将横向的盒子与盒子之间改为了纵向的行与行之间。


上面的是写在flex的父项上的属性,接下来是写在子项上的属性:

order

这个属性用来设置盒子的顺序,数值小的排在前面,可以为负值。

.content:first-of-type{
    order:-2;
}
.content:nth-of-type(2){
    order: -3;
}

image-20220206200158746

align-self

将子项作为一个个体,然后基于交叉轴的分配。

flex-start、flex-end、center、baseline、stretch、auto

auto是默认值,其他的效果类似上面的在纵轴上的效果,这个属性的优先级大于align-items,但是小于align-content。

.wrapper{
        align-items: center;
}
.content:first-of-type{
    align-self: flex-start;
}
.content:nth-of-type(2){
    align-self: flex-end;
}

image-20220206200537182


上面算是一些周边的知识,下面开始弹性部分,也是重点:

flex

这是一个复合属性:

分别有flex-grow默认值为1、flex-shrink默认值为1、flex-basis默认值为0%。

如果缩写「flex: 1」, 则其计算值为「1 1 0%」。

如果缩写「flex: auto」, 则其计算值为「1 1 auto」。

如果「flex: none」, 则其计算值为「0 0 auto」。

如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值。

flex-grow

当这一行还有剩余空间的时候,这个属性会根据比例瓜分剩余空间,也就是扩张比率。

.content:first-of-type{
    flex-grow: 1;
}
.content:nth-of-type(2){
    flex-grow: 2;
}
.content:last-of-type{
    flex-grow: 3;
}

image-20220206201620961

flex-basis

这个属性相当于是width的取代值。

在你设置宽的时候,如果basis设置有值,且小于width,那么真实的宽的范围在basis < real width < width。

在你不设置width的时候,设置basis,元素真实的宽就是min-width,当不换行内容撑开超过内容区时,会撑开容易。

flex-shrink

这个属性设置的是盒子的收缩比率.。

父项宽度为600px,下面用一个表格来说明计算公式。

子项序号123
子项设置宽度200px200px400px
shrink比例113
子项收缩宽度(200×1÷1600)×200(200×1÷1600)×200(400×3÷1600)×200
子项收缩后宽度175px175px250px

上面这个表格计算的是没有边框的情况,当加上边框的时候会出现一些数值上的偏差

image-20220206205221306

所以经过实验后发现shrink加权公式中代入的数值是真是内容区的宽度而不是盒子整个的宽度,而且这个公式在标准模式和怪异模式下得出的结论相同。

无论什么情况,被不换行的内容撑开的容器,不会被压缩计算。


应用

现在用flex来完成一些简单的布局:

居中

.wrapper{
    resize: both;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

image-20220206213701441

无论怎么改变外面盒子的大小,里面的小盒子都居中。

可动态增加的导航栏

.wrapper{
    width: 300px;
    height: 200px;
    border: 1px solid black;
    display: flex;

}
.item{
    flex:1 1 auto;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #f20;
    border-radius: 5px;
}
.item:hover{
    background-color: #f20;
    color: #fff;
}

image-20220206214432225

等分布局

.wrapper{
    width: 400px;
    height: 200px;
    border: 1px solid black;
    display: flex;
    resize: both;
    overflow: hidden;
}
.content{
    flex:1 1 auto;
    border: 1px solid green;
    height: 100px;
    box-sizing: border-box;
}
.content:nth-of-type(3){
    flex:2 2 auto;
}
.content:nth-of-type(2){
    flex:0 0 50%;
}

image-20220206221041267

圣杯布局

<div class="wrapper">
    <div class="header"></div>
    <div class="contain">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div> 
    <div class="footer"></div>
</div>
.wrapper{
    width: 400px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    resize: both;
    overflow: hidden;
    flex-direction: column;
}
.header, .footer, .left, .right{
    flex:0 0 20%;
    border: 1px solid green;
    box-sizing: border-box;
}
.contain{
    flex: 1 1 auto;
    display: flex;
}
.center{
    flex: 1 1 auto;
}

image-20220206222134212

流式布局

.wrapper{
    width: 400px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    resize: both;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: flex-start;
}
.content{
    width: 100px;
    border: 1px solid green;
    height: 100px;
    box-sizing: border-box;
}

image-20220206221456436

flex是更加符合流式布局的预期的。

这篇关于Box of CSS3的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!