0
点赞
收藏
分享

微信扫一扫

CSS的盒子模型

诗尚凝寒 2022-03-18 阅读 69
csscss3

1.盒子模型

一个页面上所有的元素(标签)都存在自己的一个盒子模型。
盒子模型由4个部分组成:
具体的内容
content: 内容主体
padding: 内容主体到边框的距离
border: 盒子的边框
margin: 外边框,到其他标签的距离

2.边框border

修改顺序:
如果你针对某一块修改,使用
xxxxxx-top/right/bottom/left-xxxx修改
如果只修改一个属性,则:
xxxxxxxxx-xxxx
如果只写一个值,则是四个都修改
写两个值,是修改上下、左右
写三个值,是修改上、下、左右
写四个值,是修改(顺时针顺序)上、右、下、左
颜色:

在这里插入图片描述
宽度
在这里插入图片描述
样式
在这里插入图片描述
简体写法
在这里插入图片描述

3.外边距Margin

设置大小
在这里插入图片描述

4.内边距Padding

在这里插入图片描述

5.计算一个标签具体占页面位置

在这里插入图片描述
在这里插入图片描述

6.box-sizing

盒子尺寸
inherit:继承父标签,根据父标签对应值来。
在这里插入图片描述

7.弧度

在这里插入图片描述

8.盒子阴影

在这里插入图片描述

举报

相关推荐

【css盒子模型】

CSS盒子模型

盒子模型——CSS

Css盒子模型

CSS 盒子模型

【CSS】CSS盒子模型(3)

0 条评论