目 录CONTENT

文章目录

CSS盒子模型

俊阳IT知识库
2022-12-20 / 0 评论 / 0 点赞 / 463 阅读 / 2,497 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-12-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903890932989959
欢迎访问😃,有任何问题都可留言评论哦~

盒子模型(Box Model)

一般的标签都是盒子,但是除了极个别的标签(例如:img、input标签)不是盒子

盒子模型的属性

  • width 盒子内容的宽度
  • height 盒子内容的高度
  • margin 盒子的外边距
  • padding 盒子的内边距
  • border 盒子的边框
  • background 盒子背景

盒子模型示意图

css-box-model-1

标准盒子模型、IE盒子模型

目前所学的知识中,以标准盒子模型为准
标准盒子模型:

css-box-model-5

IE盒子模型:

css-box-model-4

标准盒子模型和IE盒子模型的区别

  • 在 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸
  • IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。

width height 属性

可以设置 任何长度单位 百分比(占父元素的百分比)

  • 块级标签可以设置width和height
  • 行内标签不可以设置width和height(它的width由内容决定,height由font-size决定)

盒子的宽度并不是内容的宽度
以上两个盒模型如下:

css-box-model-2

真实宽度=左右padding+左右border+width

如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width

height属性和width属性类似,这里不做过多介绍


margin 属性

margin属性表示盒子盒子之间的距离,并且分 上、下、左、右 四个方向(margin-top、margin-bottom、margin-left、margin-right)可以单独进行设置

可以设置 任何长度单位 百分比 负值

margin的值复制
有时,我们会输入一些重复的值,通过值复制,可以不必重复地输入数字
CSS 定义了一些规则,允许为外边距指定少于 4 个值

  • 如果缺少左外边距的值,则使用右外边距的值
  • 如果缺少下外边距的值,则使用上外边距的值
  • 如果缺少右外边距的值,则使用上外边距的值

给出一张图片,便于理解
css-box-model-3
换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。
不常用

利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值

  • margin对于块级标签在四个方向上都有作用,对于行内标签,只在水平方向上有效,在垂直方向上无效
  • margin可以设置负值

margin设置的数值数

  • 设置一个数值(margin:10px;),则上下左右都用这一个数值(10px)
  • 设置两个数值(margin:5px 10px;),则上下为第一个数值(5px),左右为第二个数值(10px)
  • 设置三个数值(margin:5px 10px 15px;),则上为第一个数值(5px),左右为第二个数值(10px),下为第三个数值(15px)
  • 设置四个数值(margin:5px 10px 15px 20px),则上右下左依次为(5px 10px 15px 20px)

margin重叠(坍塌) 重难点

前提条件:块级标签,垂直方向


  • 兄弟元素之间的重叠:上面盒子的 margin-bottom 和下面盒子的 margin-top 重叠,中间的margin值大小是取大优先

解决方法:

  1. 给 块级标签 变成 行内块标签
  2. 使用 浮动(浮动元素是不会坍塌的,具体内容请参考我别的文章)

  • 父子元素之间的重叠:父元素设置的 margin-top 和父元素中第一个子元素设置的 margin-top 会重叠

解决方法:
1.给父元素设置border-top (如果不想要边框,可以使用transparent,设置成透明)
2.给父元素设置padding-top
3.把 块级标签 变成 行内块标签

margin经典用法,使块级标签水平居中 margin:0 auto;


padding 属性

padding (内边距,补白),表示内容border之间的距离,并且和margin一样,也分 上、下、左、右 四个方向(padding-top、padding-bottom、padding-left、padding-right)可以单独进行设置
可以设置 任何长度单位 百分比 但是不允许设置负值

关于 值复制 和 设置的数值数,和margin一样,可以参考margin

应用:
调整 内容 与 border 之间的距离(一定要参考上面的盒子模型,注意盒子的大小)

注:如果重复设置了一边或者多边的属性值
例如:
padding:10px;
padding-left:20px;
则 padding 左边距 实际为20px,所以总结出来一句话 小属性 层叠 大属性(margin 也适用这句话)


border 属性

border属性可以设置盒子的边框

边框三要素:像素(粗细)、线型、颜色

颜色如果不写,默认是黑色。另外两个属性不写,则显示不出来边框。线型自行百度,一般只用(solid 实线、dotted 点划线、dashed 虚线 )

border拆分
border 是一个大综合属性(例如:border:1px solid red;)就是四个边框,宽度为1px、实线、红色线

有两大种拆分方式:

  • 按三要素拆开:border-width、border-style、border-color。(一个border属性是由三个小属性综合而成的)
  • 按方向拆开:border-top、border-right、border-bottom、border-left。

一个border属性,是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序

例如:
border:10px solid red;
按三要素拆:
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
按方向拆:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

同样也适用那句话 小属性 层叠 大属性


background 属性

background-color 设置背景色(接受任何合法的颜色值,比如:red、#a7a7a7、rgb)


background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

background-image 把图像放入背景(默认值是 none,表示背景上没有放置任何图像)


如果需要设置一个背景图像,必须为这个属性设置一个 URL 值
background-image 也不能继承。事实上,所有背景属性都不能继承

background-repeat 对背景图像是否平铺进行设置(默认在水平垂直方向上都平铺,属性值为repeat)


  • repeat 水平垂直方向上都平铺
  • repeat-x 水平方向上平铺
  • repeat-y 垂直方向上平铺
  • no-repeat 不平铺

background-position 设置 图像在背景中的位置
可以使用一些关键字、百分数值、长度值
关键字

单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left

百分数值

百分数值的表现方式更为复杂(这里不做过多解释,想了解自行百度)
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。

background-attachment 背景关联


如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

background 简写属性,作用是将背景属性设置在一个声明中
background:background-color background-image background-repeat background-attachment background-position


对于盒子模型的注意点

  • width属性默认值为auto,块级元素的贪婪性和行内元素的懒惰性
  • 有些标签有默认的padding值和margin值,所以一般写网页时都会重置样式

^_<

0

评论区