盒子模型

CSS 盒子模型(Box Model):

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

各部分的说明:

Margin(外边距) :围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
Border(边框) :围绕元素内容和内边距的一条或多条线。元素本身
Padding(内边距) :元素边框与元素内容之间的空白区域。
Content(内容) :盒子的内容,显示文本和图像。元素中放置的东西,元素的宽和高指的是元素中内容的宽和高,并不是元素本身的宽和高

示例:

margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;

顺序:上、右、下、左


box-sizing

padding的距离由哪里产生

属性值1——content-box:在宽度和高度之外绘制元素的内边距和边框

例如:

padding-right: 20px;
box-sizing: border-box;

属性值2——border-box:已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

 

CSS笔记

DIV设置

2020-2-4 15:54:33

CSS笔记

行级元素与块级元素

2020-2-5 10:52:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索