欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 CSS重中之重------盒子模型

程序员文章站 2022-09-14 10:56:39
通过对盒子模型的介绍和对相关属性的详解,让我们快速深刻的掌握盒子模型。宝剑锋从磨砺出,梅花香自苦寒来。...

盒子模型(重中之重------毕竟重量级的总是最后出场嘛! (国之重器 绝世无双))

盒子模型常用属性:width;height;border;padding;margin;background;

盒模型详解

关于盒模型的解析,一直存在两种方式:

  • IE盒模型
  • 标准盒模型

在HTML文档头部引入文档头,就可以保证使用标准盒模型来进行解析。
在标准盒模型中(以块级元素为例):

  • 水平方向占据的总宽度:
    margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
  • 垂直方向上占据的总高度:
    margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
1.width和height
  • 对于块元素和行内块元素,表示内+ 区域。
  • 对于行内元素,width和height+ 效。

[注意]:

  • 如果没有doctype头,在ie6以下览器中,规则不太一样。
  • width属性默认值为auto,块元素贪婪性和行内元素的懒惰性。
  • 实际上,对于行内元素而言,其宽有内容本身决定,而其高度则font-size决定。
  • width和height可以设置百分比,对于父元素的width和height而言。
2.border特性及设置

border的基本使用:
我们描述一个border有如下三个方面:

  • 边框大小(粗细)border-width
  • 边框的样式 border-style
  • 边框颜色 border-color

border是一个简写的属性,是border-width、border-style、border-color的简写。

  • 三个属性之间没有固定的顺序,怎写都行
  • 属性之间使用空格隔开
  • 针对border-widthborder-style、border-color,分别有四个方向的子属性,border-top-widthborder-top-style,一般很少使子属性来设置边框。

border-width的设置

表示边框的大小(粗细),我们有两种方式设置:

  • 具体的像素值,如5px,推荐使用
  • 使用表示粗细的英文,thin,thick,medium,很少会使用,不同的浏览器解析的大小不一致。

border-style的设置

表示边框的样式,有如下几种:

  • solid,实线
  • dotted,点画线
  • dashed,虚线
  • none 没有
  • double:定义边框为双边框线。
  • groove:定义边框为3D凹槽。
  • ridge:定义为边框3D凸槽。
  • inset:定义边框为3D凹边。
  • outset:定义边框为3D凸边。
  • hidden:隐蔽边框,IE不支持。
  • double 及以下的部分,一般使用不多,因为它们在不同的浏览器中有不同的表现。

同理,border-style也分为上右下左四个方向的子属性
border-color的设置

border-color就是边框的颜色,可以使用如下三种方式来设置:

  • 颜色英文名称
  • rgb函数
  • 十六进制

border-color也分为四个方向的子属性,如border-top-color。

在border中的三个属性中,其实它们都有默认值,

  • border-width,默认是medium,一般是3px
  • boder-color,默认是字体的颜色,
  • border-style,默认是none
3.padding特性及设置

padding,表示内边距,或者叫补白。
所表示的区域是边框 到 内容之间的 那块空间。

padding有四个方向上的子属性:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

具体写法有如下几种:

  • 单独的设置某一个子属性
  • padding:一个值 四边相同
  • padding:两个值 第一个值表示上下的,第二个值表示左右的
  • padding:三个值 第一个值表示上的,第二个值表示左右的,第三个值>+表示下的
  • padding:四个值 分别是上、右、下、左。

注意:

  • padding可以使用百分比,是相对于父元素的width值,一般在响应式we>+b中使用。
  • 有些标签有默认的padding值,如ul、ol等。
  • 对于行内元素,padding在垂直方向上不影响行高。

在开发页面的时候,为了保证所有的这些标签都有统一的一个padidng值,采取一刀切,
* {padding:0;}

对于padding而言,如果是行内元素,它在垂直方向上不影响行高。

注意对上面代码的理解:

  • padding表示边框和内容之间的空间,所以边框会向四周延展。
  • 但是由于行内元素的paddng在垂直方向是不影响行高的,所以整体的行与行之间的距离并没有拉开
4.margin特性及设置

margin表示边界,外边距。当前元素和另一个元素之间的距离,在border之外的。

margin的使用

margin也是简写的属性,实际上它又分为四个方向上的子属性:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

具体的设置有如下几种:

  • 使用子属性来设置某个具体的外边距
  • margin:一个值,表示四个外边距都是一样的
  • margin:两个值,第一个值表示上下的,第二个值表示左右的
  • margin:三个值,第一个值表示上,第二个值表示表示左右的,第三个值>+表示下
  • margin:四个值,分别对应上、右、下、左

注意:

  • margin可以使用百分比,是相对于父元素的width值。
  • 有些标签有默认的margin值,如body、h1~h6、p、ul、ol、dl等。
  • 对于行内元素,margin在垂直方向上无效。
  • margin的auto设置。 块状元素在垂直方向上有重叠现象。
  • margin可以使用负值。

关于某些标签具备默认的margin,在我们布局的页面,会造成一些不好的影响。为了简单起见,采取一刀切的方式,把凡是有默认margin值的这些元素都置0。使用即可。
*{margin:0;}
*

  • 对于行内元素,margin值在垂直方向上无效.
  • 关于margin,有一个auto的值,比较特殊,经典应用之一就是用来实现元素的水平居中效果。
5.块级元素特点

水平方向:

  • margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
  • width、margin-left和margin-right可以设置为auto,其余必须为特定值,或默认为0
  • 如果margin-left/right都设置为auto,它们会设置为相同的长度,因此将元素在其父元素中居中
  • 如果3个属性都设置为auto,则两个外边距都会设置为0,而width尽可能宽,这是默认情况
  • 如果width、margin都是auto的话(这个前提不能少),我们再来设置padding或border,相应的width就会减小,保证整个块级元素的大小不要超过父元素。

垂直方向

  • margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom
  • 默认高度由其内容决定,它会受内容宽度的影响,内容越窄,相应的就会越高
  • 相邻元素垂直相邻外边距会重叠
  • 父子元素间的重叠(同向margin、父元素没有border或padding、重叠是对外而言)
6.行级元素特点

水平方向

  • margin-left、border-left、padding-left、padding-right、border-right、margin-right
  • width无效,由内容本身决定

垂直方向

  • height无效,有font-size和line-height决定
  • 内边距、边框和外边距对行内元素或其生成的框没有垂直效果,不会影响元素行内框的高度,也不会影响包含该元素的行框的高度
7.background深入(重难点)

在css中,和背景有关的属性,有如下5个:

  • background-color;background-image;background-repeat;background-position;background-attachment;

background-color
作用,设置当前元素的背景颜色

background-image
作用:用来给当前元素添加背景图片

  • 默认情况下,如果图片小于元素,在水平和垂直方向都会重复该图片。
  • 默认情况下,图片的左上角和元素的左上角对齐。

实际上,上述两个默认值,是可以修改的。

background-repeat
作用:用来控制背景图片在元素中水平和垂直方向上是否重复

取值有如下四个:

  • repeat,也是默认的值
  • no-repeat,完全不重复,有仅有一个
  • repeat-x,水平方向上重复
  • repeat-y,垂直方向上重>>+ (向下为正)

注意点:
在重复背景图片的时候,有多少空间,就重复多少内容,并不需要说要完整的图片大小空间才行。

background-position
作用:用来设置背景图片的位置。

格式:background-position :position-x position-y

具体在设置的时候,有如下三种设置方式:

  • 使用关键字,top、left、right、bottom
  • 使用百分比,0%、50%、100%
  • 使用像素值,25px、100px

除了像素值,还可以使用关键字

  • 水平方向:left、center、right
  • 垂直方向:top、center、bottom

注意:当我们使用关键字的时候,比如使用top,它的意思是元素的顶端和背景图片的顶端对齐。比如使用center,其含义是元素的中心点和背景图片的中心点是对齐的。

关于百分比的使用

  • 0%,水平方向相当于 left,>+ 直方向相当于top
  • 50%,水平方向相当于center垂直方向相当于center
  • 100%,水平方向相当于right垂直方向相当于bottom

友情提示:background-position理解起来确实有点困难,一定要自己写对应代码,分析定位的过程,并加以理解。

background-attachment

作用:定义背景图片是随元素滚动还是固定

有两个值:

  • scroll,表示背景图片会随着滚动条的滚动而滚动
  • fixed,固定不变

在实际开发中,background-attachment基本上不会用到。

上面我们讲到了关于背景的几个属性,background-color,background-image,background-repeat,background-position。
实际上它们有一个简写的属性:background

注意细节:

  • background中的背景颜色,默认值是transparent,透明的。
  • background所覆盖的区域,包括padding和内容区域。>+ (border先放一下,应用比较>+ 少)
  • 在设置背景的时候,很容易覆盖前面的设置。
  • background的顺序有要求,按照顺序来写。

本文地址:https://blog.csdn.net/m0_46412825/article/details/107283593