0
点赞
收藏
分享

微信扫一扫

盒模型Box Model

小安子啊 2022-03-12 阅读 45
css

认识盒模型

所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型"
width、height不是盒子总宽高
盒子的总宽度=width+左右padding+左右border
属性width和height属性详解

属性

padding、margin、border
padding
内边距
影响盒子实际大小,会让元素的内容增大
margin
外边距
不影响盒子实际大小,不会让元素的内容增大,是和另一个元素的间距
盒子实际大小受padding和border的影响,跟margin没有关系
若加了padding和margin值,设置width和height时,注意减去padding和margin的值

使用margin值的情况:
1.需要在border外侧添加空白时;
2.空白处不需要背景色时;
3.上下相连得两个盒子之间的空白需要相互抵消时,如15px+20px得margin,将得到20px的空白。(margin折叠)
4.需要使用负值对页面布局时(margin值可以取负值,padding不行)

使用padding时的情况:
1.需要在border内侧添加空白时。
2.空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+10px将得到25px的空白。
最后,需注意margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不干扰;padding用于元素与内容之间的间隔,让内容与元素之间有一段距离。
在怪异盒模型中,一个块的总宽度受margin影响但不受padding影响。

width

表示盒子内容的宽度
未设置width属性时自动撑满,并不意味着width可以继承

height

表示盒子内容的高度
未设置height属性时自动被其内容撑开,如果无内容则height为0

padding

包含四个方向
可分别用小属性设置
小属性 意义
padding-top 上padding
padding-right 右padding
padding-bottom 下padding
padding-left 左padding

如何灵活设置padding?

四数值写法

分别表示上、右、下、左

padding: 10px 20px 30px 40px;

三数值写法

分别表示上、左右、下

padding: 10px 20px 30px;

二数值写法

分别表示上下、左右

padding: 10px 20px;

小属性层叠大属性

上左右padding为40,下padding为0

padding: 40px;
padding-bottom: 0;

margin

也有四个方向
小属性 意义
margin-top 上margin,“向上踹”
margin-right 右margin,“向右踹”
margin-bottom 下margin,“向下踹”
margin-left 左margin,“向左踹”

塌陷

存在于竖直方向
小的margin塌陷到大的margin中,即margin不叠加以大值为准
在这里插入图片描述

默认值

一些元素(比如body、ul、p等)有默认的margin
在开始制作网页的时候,要清除

  /* 通配符选择器表示选择所有元素 */
  * {
      margin: 0;
      padding: 0;
  }
  /* 通配符有效率问题,应使用并集选择器 */
  body,
  ul,
  p {
      margin: 0;
      padding: 0;
  }

盒子居中

谁要居中水平竖直
文本text-align:center;line-height=盒子高height
盒子margin:0 auto;(如下代码)
父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

盒模型计算

标准盒子模型

在这里插入图片描述

元素实际大小

元素的实际宽度= width + padding-left + padding-right + border-left + border-right

元素空间尺寸

元素空间宽度=元素实际宽度 + margin-left + margin-right

box-sizing

设置 box-sizing: border-box;后 width、height表示元素实际大小

.box {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid #000;
    padding: 10px;
       }

大量应用于移动网页制作中,结合百分比布局、弹性布局等非常好用
在PC页面开发中使用较少
兼容到IE9

文档流

指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式,
最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素

标签分类

HTML中

文本级标签-只能放文字、图片、表单元素;
容器级标签-可放任意(容器级标签、文本级标签、文字、图片、表单元素)

CSS中

分类和HTML很像,p不一样

元素分类

display属性类型是否能并排显示是否能设置宽高不设置width属性时
块级元素宽度默认是父亲的100%(自动撑满)
行内元素宽度是内容的宽度(自动收缩)
行内块元素

特殊的行内块: 图片、表单元素
关系:定位后,行内元素转换成块级元素

元素类型转换

语句意义
display:block转化为块级元素
display:inline转化为行内元素(不多见)
display:inline-block转化为行内块元素

元素隐藏

display:none

元素彻底放弃自己的位置,如同没有写它的标签一样

visibility:hidden

元素不放弃自己的位置

举报

相关推荐

0 条评论