盒模型分析

本文详细介绍了CSS盒模型,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个组成部分。CSS盒模型用于网页布局,允许开发者精确控制元素间的空间。padding属性接受长度或百分比值,margin属性则可设置负值。此外,文章还提到了边框样式的设定方法。
摘要由CSDN通过智能技术生成

开发工具与关键技术: DW

作者:陈海涛

撰写时间:2021/5/7

1.所有 HTML 元素可以看作盒子,在 CSS 中,"box model"这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

            2.盒模型各部分说明

1.content(内容):盒子的内容,显示文本和图像。

2.padding(内边距):内容区与边框之间的填充部分,内边距是透明的。

3.margin(外边距):盒子与邻元素的间距,外边距是透明的。

4.border(边框):盒子的边框,可以设置边框的宽度、样式、颜色

3.padding属性

padding 属性接受长度值或百分比值(百分数值是相对于其父元素的 width 算的),但不允许使用负值。

内边距相关属性:padding-top(上内边距) 、 padding-right(右内边距) 、padding-bottom(下内边距) 、padding-left(左内边距)

也可以用简写

padding:10px 10px 10px 10px;(对应上,右,下,左

padding:10px 20px 30px;(上10px)(右,左20px)(下30px)

padding:10px 20px; (上,下10px) (右,左20px)

padding:10px;(上,右,下,左)

 

  1. margin属性

围绕在元素边框的空白区域就是外边距,设置外边距最简单的方法就是使用

margin 属性,这个属性接受任何长度单位,百分数值甚至负值。

外边距相关属性:margin-top(上外边距) 、 margin -right(右外边距)、margin -bottom(下外边距) 、margin -left(左外边距)

简写原理跟padding一样

  1. border属性

元素的边框就是围绕元素内容和内边距的一条或多条线。我们可以设置元素

边框的样式、宽度和颜色。

 

简写  border:1px solid red;

(上下左右边框1个px  实线 红色背景)

Ø 边框样式 border-st

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值