CSS盒模型及其应用 (重点)

最新推荐文章于 2024-05-28 13:09:25 发布

BB_zhan

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量253

点赞数 1

分类专栏： Web前端笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/bb_zhan/article/details/122097431

版权

盒模型 (重点)

box: 盒子，每个元素在页面中都会生成一个矩形区域 (盒子)

盒子类型:

行盒，display属性等于inline的元素
块盒，display属性等于block的元素
行内块，display:inline-block

行盒在页面中不换行，块盒独占一行 (行级元素现在称行盒，块级元素现在称块盒，因为其由CSS属性决定)

浏览器默认样式表设置的块盒: 容器元素、h1~h6、p

常见的行盒: span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box
填充(内边距) padding

盒子边框到盒子内容的距离

padding-top、padding-right、padding-bottom、padding-left

padding: 上右下左 (上下左右) (上左右下)

填充区+内容区 = 填充盒 padding-box
边框 border(速写属性: 宽样式颜色)

边框 = 边框样式 + 边框宽度(粗细) + 边框颜色

边框样式: border-style (必写，默认为none)
边框宽度: border-width (其实也是简写)
边框颜色: border-color (默认跟随字体颜色)

边框+填充区+内容区 = 边框盒 border-box
外边距 margin

边框到其他盒子的距离

和padding一样拥有速写属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=

最低0.47元/天解锁文章

BB_zhan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS盒模型及其应用 (重点)

盒模型 (重点)box: 盒子，每个元素在页面中都会生成一个矩形区域 (盒子)盒子类型:行盒，display属性等于inline的元素块盒，display属性等于block的元素行内块，display:inline-block行内块:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl
复制链接

扫一扫