每日分享!介绍Css 盒模型!

如何定义盒模型:

在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间。

  一个页面是由很多这样的盒子组成的。这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要。需要理解盒模型,我们需要从两个方面去考虑:一.理解一个单独盒子的内部结构,二是理解多个盒子之间的相互关系!

  盒子的组成:盒子是由(content(内容) + padding(内边距)+ border(边框) + margin(外边距) ) 四个属性组成。此外,在盒子模型中,还有width(宽度)和 height(高度)两个辅助属性。

  *****记住,所有的元素都是可以看成一个盒子。

下图是盒子模型示意图:

  每日分享!介绍Css 盒模型!

下面介绍盒子模型的具体属性:

border: (边框) 元素边框

margin: (外边距) 用于定义页面元素与元素之间的距离

content: (内容) 可以是文字或是图片

padding:(内边距)用于定义内容与边框的距离(通常也称为补白)

--------------------华丽分割线-----------------------------

1.内容区

  内容区是CSS盒子模型的中心,它呈现的是盒子的主要信息内容,这些内容都可以是文本、图片等多种类型、内容区是盒子的必要组成部分,其他三个部分都是可以选的;内容区还有三个属性,

分别是:width,height,overflow。使用width和height属性可以指定盒子的宽度和高度。这里必须要注意的是:width和height这俩个属性是针对内容区而言的,并不包括padding部分。overflow的作用是当盒子的内容部分溢出时,超出部分,可以是 使用overflow来处理。

2.内边距

  内边距,指的是盒子内容与border之间的空间,可以看作是内容区的背景区域。

  关于内边距的属性又五种,分别是padding-left / padding-top/ padding-bottom /padding-ring /    以及综合来这四种方式的padding。使用这个方式直接可以简写边距:如

padding:10px 20px 20px 20px  ( 指的是上右下左)   ----->值得注意的是。方向都是从上边距开始-然后是右=====》下=======》左;这样的方式区写。如果只写两个:如padding:10px 30px;  表示上下边距是10px 左右边距30px;

3.边框

  在CSS 盒子模型中,边框的属性又border-width/ border-style/ border-color/ 以及综合了这三个方式的 border。 其用法如下:border:1px solid red ;  其含义是定义一个边框为1px,实线。红色的一个边框。 其中根据意思我们就可以得知border-widht表示的是线宽。border-style表示的是线的类型,border-color:表示的是线的颜色。

4.外边距

  外边距,指的是两个盒子之间的距离,也可能是子元素与父级元素之间的距离,也可以是兄弟之间的距离。

  外边距使得元素之间不必紧凑的联在一起,是CSS布局的一个重要的手段。

  外边距的类型同内边距一样,也有五种。可以分别来说就是 margin-top/margin-right/ margin-bottom / margin-left .。综上四种方式,可以直接使用margin来表示;如margin:10px 10px 20px 20px ; 表示的是距离其他元素边距分别为:上边距为10px,右边距10px, 下边距10px,左边距10px 。

  同时,CSS允许给边边距属性指定负数值,当指定的负边距距离时,整个盒子可以向指定负值相反的方向去移动,这样就产生来盒子重叠的效果。这也是传说中的“负margin技术”。

-----------------------华丽分割线----------------------------------------

总结:

这一节,就先简单的介绍盒子模型(介绍来盒子模型的组成部分,以及每个组成是什么含义,以及用法)。盒子模型在前端开发过程中十分重要!一定要掌握透彻!后面可以还会分享盒子边距重叠以及如何解决。今天就先介绍到这里啦~~~2019-04-22 22:16:28

上一篇:兄弟连教育分享:用CSS实现鼠标悬停提示的方法


下一篇:Sql Server日期查询-SQL查询今天、昨天、7天内、30天