关于盒模型

­­一、什么是盒模型?

我们可以将页面中所有的元素都视为盒子,这些盒子中可以盛放我们想要盛放的内容,每个盒子在页面中都占有一定的空间,这些盒子的参数和属性我们可以根据需求来调整,例如它的位置、大小等。

 

二、盒模型的组成?

盒模型从内到外由content内容区、padding填充区(补白)、border边框、margin外边距组成。

 

二、盒模型的分类?

盒模型可以分为标准盒模型与怪异盒模型。标准盒模型与怪异盒模型的区别在于:标准盒模型的宽高为盒模型的内容区content,填充区padding、边框border、外边距margin都是不计算在宽高以内的;怪异盒模型的宽高包含了内容区content、填充区padding、边框border,只有外边距margin独立于宽高之外。

 

三、标准盒模型与怪异盒模型之间是否可以相互转换?

标准盒模型与怪异盒模型可以通过属性box-sizing相互转换,它的属性值有border-box(怪异盒模型)与content-box(标准盒模型)。

 

四、与盒模型的组成相关的属性常用的有哪些?

1.内容区content:

width:宽度值;

height:高度值;

2.填充区padding:

(1)padding:直接使用padding为复合用法,其属性值为数值型。如果给其设置一个属性值,则该值表示上下左右四个内边距统一的数值;如果给其设置两个属性值,则这两个值依次表示上下内边距与左右内边距;如果给其设置三个属性值,则这三个值依次表示上边距、左右边距与下边距;如果给其设置四个属性值,则这四个值依次表示上边距、右边距、下边距与左边距,即顺时针方向。

(2)padding-top、padding-right、padding-bottom、padding-left:这四个属性用来单独设置四个方向的内边距。

3.边框区border:

(1)border:该属性为复合用法,表示设置该元素四个方向统一的边框,其属性值有三个,分别为颜色、边框的粗细、边框的线型,例如:border:#000 solid 1px;这三个属性值以何种顺序排列均可,其中常用的线型有solid实线型、dashed虚线型、dotted圆点线型、double双线型。也可以通过使用border:none;取消边框,或使用border:hidden;隐藏边框。

(2)border-top、border-right、border-bottom、border-left:这四个属性用于单独设置某一方向的边框,用法同border。

(3)border-color:用于设置边框的颜色,可以设置一到四个属性值,其代表的方向同padding。

(4)border-width:用于设置边框的粗细,可以设置一到四个属性值,其代表的方向同padding。

(5)border-style:用于设置边框的线型,可以设置一到四个属性值,其代表的方向同padding。

(6)也可以单独设置某一方向的边框的某一属性,例如:border-left-color:#000;

4.外边距margin:其用法同padding。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值