CSS框模型概述

css总结 专栏收录该内容
10 篇文章 0 订阅

CSS框模型

框模型概述

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
在这里插入图片描述
1、content:盒子内容,元素的后代元素等内容的区域,由width和height组成

2、padding:内填充,元素内容和边框之间的区域,由上右下左4个方向的内填充组成

padding-top: //上内填充
padding-right: //右内填充
padding-bottom: //下内填充
padding-left: //左内填充

padding是它们的复合样式,在设置4个值时,分别代表上、右、下、左;3个值时由右代替左,分别代表上、左右、下;2个值时由上代替下,分别代表上下、左右;1个值时代表所有的4个方向

3、border:边框,就是元素的最外层结构,由上右下左4个方向的边框组成,边框有两种集合方式:

//第一种可以认为是由4个方向的边框集合来:
border-top: //上边框
border-right: //有边框
border-bottom: //下边框
border-left: //左边框
//而每一个边框由可以认为是它的宽度、样式和颜色集合而来,如上边框border-top
border-top-width: //上边框宽度
border-top-style: //上边框样式
border-top-color: //上边框颜色

//第二种认为4个边框相同,则用宽度、样式和颜色进行集合:
border-width: //边框宽度
border-style: //边框样式
border-color: //边框颜色
//这里每个样式再由4个边框的样式集合来,如border-width
border-top-width: //上边框宽度
border-right-width: //右边框宽度
border-bottom-width: //下边框宽度
border-left-width: //左边框宽度

4、margin:外边距,该元素与其他元素之间的间距,由上右下左4个方向的外边距组成:

margin-top: //上内填充
margin-right: //右内填充
margin-bottom: //下内填充
margin-left: //左内填充

margin是它们的复合样式,在设置1-4个值时,表现的和padding相同
注:外边距重叠

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值
两个外边距一正一负时,折叠结果是两者的相加的和

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值