盒子模型,你悟了吗?

盒子模型是css中很基础也是很核心的概念,然而你真的了解css的盒子模型吗?

能够游刃有余的在开发中合理运用盒子模型吗?

如果可以,请移步,嘿嘿.

没有就大家一起来探讨研究一下,共同进步.

盒子模型的作用

在开始研究前,先立个flag,我们要明白为什么说盒子模型很重要,因为css 的主要作用就是布局,布局在我看来说到底就是为了解决两个问题

• 一个是把所有的元素都放在合理的位置上的方法,这里就要研究css 中的几种布局方式.
• 另外一个就是研究如何给一个单独的html 元素设置更多的样式,这里就要探讨和研究盒子模型了.

盒子模型包含的内容

Html 中的 每一个元素 都可以看作是一个盒子,如下图所示,一个盒子具备这四个属性

• 内容(content):

  元素的内容width/height

• 内边距(padding):

  元素和内容之间的间距

• 边框(border)

  元素自己的边框

• 外边距(margin)

  元素和其他元素之间的间距

盒子模型的四边

因为 盒子有四边,所以margin/padding/border 都包含 top/right/bottom/left

内容-宽度和高度

内容宽度和高度的设置

• 宽度设置:width

• 高度设置:height

注意:对于行内级 非替换元素 来说,设置宽高是无效的(display属性为inline 的元素)

另外 我们还可以设置如下属性:

• min-width:最小宽度 ,无论内容多少,宽度都大于或等于min-width

• max-width:最大宽度 ,无论内容多少,宽度都小于等于max-width

移动端是配置时,可以设置最大宽度和最小宽度.

下面两个属性不常用:

• min-height:最小高度,无论内容多少,高度都大于或等于min-height

• max-height:最大高度,无论内容多少,高度都小于或等于max-height

内边距-padding

padding 属性 用于 设置盒子的内边距,通常用于设置边框和内容之间的间距

padding 包含四个方向,所以有如下的取值:

• padding-top:上内边距
• padding-right:右内边距
• padding-bottom:下内边距
• padding-left:左内边距

padding 单独编写是一个缩写属性:

padding-top,padding-right,padding-bottom,padding-left 的简写属性

pading 缩写属性是从零点钟方向开始 ,沿着顺时针方向转动 的,也就是上右下左

padding并非必须是四个值 ,也可以有其他值

padding值的个数	padding例子	代表的含义
4	padding: 10px 20px 30px 40px ;	top:10px, right:20px,bottom:30xpx,left:40px;
3	padding:10px 20px 30px	缺少left,left 使用right的值;
2	padding:10px 20px;	缺少left,使用right的值;缺少bottom,使用top的值;
1	padding:10px;	top/right/bottom/left 都使用 10;

边框-border

边框相对于content/padding/margin 来说特殊一些:

• 边框具备宽度width;
• 边框具备样式style;
• 边框具备颜色color;

设置边框的方式

边框宽度

• boder-top-width,border-right-width,border-bottom-width,border-left-width

• border-width 是上面四个属性的简写属性

边框颜色

• border-top-color,border-right-color,border-bottom-color,border-left-color

• border-color 是上面4个属性的简写属性

边框样式

• border-top-style,border-right-style,border-bottom-style,border-left-style

• border-style 是上面4个属性的简写属性

边框的样式的设置值

边框的样式有很多,我们可以了解如下的几个:

• groove:凹槽,沟槽,边框上看上去好像是雕刻在画布之内
• ridge:山脊,和groove相反,边框看上去好像是从画布中凸出

边框的简写属性-border:同时设置边框的宽度,颜色和样式

如果我们相对某一边同时设置 宽度 样式 颜色,可以进行如下设置:

• border-top
• border-right
• border-bottom
• border-left
• border: 统一设置4个方向的边框

边框颜色,宽度,样式的编写顺序任意

< line-width > .|.|. < line-style > .|.|. < color >

圆角 - border-radius

border-radius 用于设置盒子的圆角

border-radius 常见的值:

数值 :通常用来设置小的圆角,比如6px; 百分比:通常用来设置一定的弧度或者圆形

border-radius 事实上 是一个 缩写属性:

将这四个属性:border-top-radius,border-top-right-radius,border-bottom-radius,border-left-radius 简写为一个属性. 开发中比较少见一个个圆角设置.

如果一个元素是正方形,设置border-radius 大于等于50%时,就会变成一个圆.

外边距 -margin

margin 属性 用于设置盒子的外边距,通常用于设置元素和元素之间的间距.

margin 包括四个方向,所以有如下的取值:

• margin-top:上内边距
• margin-right:右内边距
• margin-bottom:下内边距
• margin-left:左内边距

margin 单独编写是一个缩写属性

margin-top,margin-right,margin-bottom,margin-left的简写属性.

margin缩写属性时从零点钟方向开始 ,沿着顺时针转动的,也就是上右下左.

margin值的个数	margin例子	代表的含义
4	margin: 10px 20px 30px 40px ;	top:10px, right:20px,bottom:30xpx,left:40px;
3	margin:10px 20px 30px	缺少left,left 使用right的值;
2	margin:10px 20px;	缺少left,使用right的值;缺少bottom,使用top的值;
1	margin:10px;	top/right/bottom/left 都使用 10;

上下margin的传递

margin-top传递

如果块级元素的顶部线和父元素的顶部线重叠 ,那么这个块级元素的margin-top值会传递给父元素

margin-bottom 传递 如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto ,那么这个块级元素的margin-bottom会传递给父元素

如何防止出现传递问题?

• 给父元素设置padding-top\padding-bottom
• 给父元素设置border
• 触发BFC:设置voerflow 为 auto

最佳实践:

margin 一般是用来设置兄弟元素之间 的间距 padding 一般是用来设置父子元素之间的间距

上下margin 的折叠 - 高度塌陷

• 垂直方向上相邻的2个 margin(margin-top,margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)

• 水平方向上的margin(margin-left,margin-right)永远不会collapse

• 折叠后最终值的计算规则

  两个值进行比较,取最大的值

• 如何防止magin collapse?

  只设置其中一个元素的margin

上下margin 折叠的情况

• 两个兄弟块级元素 之间 上下margin的折叠
• 父子块级元素 之间margin的折叠

外轮廓 - outline

外轮廓的特点

outline 表示元素的 外轮廓

• 不占用空间

• 默认显示在border的外边

outline 的相关属性

• outline-wdith: 外轮廓的宽度
• outline-style:取值跟border 的样式一样,比如solid,dotted
• outline-color:外轮廓的颜色
• outline:outline-width,outline-style,outline-color的简写属性,跟border用法类似

outline 的实际应用

去除a元素,input元素的focus轮廓效果

盒子阴影 - box-shadow

box-shadow 属性的特点

box-shadow 属性 可以设置一个或多个阴影

• 每个阴影 用 < shadow >表示
• 多个阴影之间用逗号,隔开,从前到后叠加

< shadow >的常见格式 如下

**none .|. < shadow > # **

< shadow > = inset? && < length >{2,4}. && < color >?

第1个 < length >:offset-x , 水平方向的偏移,正数向右偏移 第2个 < length >:offset-y ,垂直方向的偏移,正数往下偏移 第3个 < length >:blur-radius ,模糊半径 第4个 < length >:spread-radius ,延伸半径 < color >:阴影的颜色 ,如果没有设置,就跟随color 属性的颜色 inset: 外框阴影变成内框阴影

盒子阴影 - 在线查看

我们可以通过一个网站测试盒子的阴影:

html-css-js.com/css/generat...

盒子阴影 实践

<div class="container"></div>

.container {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: aqua;
    box-shadow: 5px -5px 5px 0px #ff0000, 10px -10px 5px 0px #ff7f00,
      15px -15px 5px 0px #ffff00, 20px -20px 5px 0px #00ff00;
  }

文字阴影 - text-shadow

text-shadow用法类似box-shadow,用于给文字添加阴影效果

< shadow > 的常见格式如下

none .|. < shadow-t >#

< shadow-t > = [< length >{2,3}, && < color >? ]

相当于box-shadow,他没有 spread-radius的值

文字阴影- text-shadow, 在线查看

html-css-js.com/css/generat...

行内非替换元素的注意事项 (display属性为inline 的元素)

以下属性 对 行内级非替换元素不起作用

width,height,margin-top,margin-bottom

以下属性对行内级非替换元素的效果比较特殊

padding-top,padding-bottom,上下方向的border

padding-top,padding-bottom 会使行内级非替换元素上下撑大,但是并不会占据空间

border 会使行内级非替换元素撑大,但是也不会占据空间

 <span class="span"> 行内级非替换元素</span>aaaa
 <div>dddd</div>

.span {
    color: white;
    background-color: red;
    /* 生效 */
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 20px;
    padding-right: 20px;
    /* 不生效 */
    width: 200px;
    height: 200px;
    margin-top: 50px;
    margin-bottom: 50px;
    /* 会撑大,但不占据空间 */
    padding-bottom: 50px;
    padding-top: 50px;
    border: 80px solid aqua;
  }

盒子模型的类型

上面细数了盒子模型的很多css 属性,貌似了解了这些,我们已经熟悉了盒子模型的方方面面,能够轻松拿捏它,其实不然,我们还有一个很重要的css属性没有掌握

由于历史原因, 盒子模型的概念在历史中也是有歧义的,最终形成了两种类型的盒子模型,我们可以通过css 属性 box-sizing来设置我们使用的盒子模型,一起来了解一下吧.

css 属性 - box-sizing

box-sizing 用来设置盒子模型中 宽高的行为

content-box

padding,border都布置在width,height外边

border-box

padding,border都布置在width,height 里面

box-sizing:content-box

元素实际占用的宽度 = border + padding + width

元素实际占用的高度 = border + padding + height

box-sizing:border-box

元素实际占用的宽度 = width

元素实际占用的高度 = height

盒子模型的应用

元素的水平居中方案

在一些需求中,需要元素在父元素中居中显示(父元素一般都是块级元素(dispaly 属性值为),行内级替换元素)

行内级元素(包括inline-block 元素)

水平居中: 在父元素中设置:text-align:center

块级元素

水平居中: margin:0 auto

关于块级元素的 水平居中,可能没基础的看不出来原因,这里再总结下 css值:auto

auto 值

在这里,将margin 设置为auto时,表示,这个margin 值我们不决定,交由浏览器决定. 浏览器在这里选择的处理方式是,将父元素剩余的宽度,均分为两份,分别赋值给margin-left 和 margin-right.

<div class="container">
  <div class="item"></div>
</div>

.container {
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 0 auto;
  }