对盒模型的理解

对盒模型的理解

一.什么是盒模型

盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
从盒子的内部到盒子的外围:
内容(图片、文本、视频、小盒子…)
内填充(补白)【相当于盒子里面的泡沫】
盒子本身(border)
外边距~
如图:
对盒模型的理解

二.盒模型的css属性

内填充:padding属性
外边距:margin属性
边框:border

三.padding属性

  1. padding是在盒子里面,在盒子与内容之间
  2. padding的作用:控制子元素在父元素里面的位置关系
  3. padding会把盒子撑大
  4. 如果想让盒子保持原有的大小:在宽高基础上减掉。( 如果一个元素是被内容撑开的,没有设置固定的宽高,padding直接撑开。不用减掉 )
  5. 如果给单一方向添加paddingpadding-top/bottom/left/right
  6. padding的设置特点:padding:30px; 四周
    padding:10px 30px; 上下 左右
    padding:10px 30px 50px 上 左右 下
    padding:10px 30px 50px 100px 上右下左
  7. padding不会对背景图的位置造成影响
  8. padding不能为负值
例子

让文本和盒子的周围产生间距
对盒模型的理解
效果如图
对盒模型的理解

四.margin属性

1.margin在元素外围,不会撑大元素的大小
2. 作用:控制元素与元素之间的间距。
3. 给单一方向添加marginmargin-left/right/top/bottom
4. margin设置方法:margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左 4.:
5. margin:0 auto;让当前元素在父元素里面左右居中。
6. margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margin-top,会 错误放在父元素上面。
7. margin可以设置负值

例子

让两个盒子(同级的盒子)之间,产生一定距离

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }       .box{            width: 200px;            height: 200px;            background: slategrey;            margin-top: 30px;            margin-left: 40px;            margin-right: 70px;            margin-bottom: 20px;            margin: 100px 40px 60px 70px;            float: left;        }        .wrap{            width:300px;            height:200px;            background: chartreuse;             float: left;        }    </style></head><body>   <div class="box">        半夜    </div>    <div class="wrap">        半夜    </div></body></html>

效果如下
对盒模型的理解

五.边框属性

  1. a: 默认情况下边框是长在元素宽高之外。

  2. b: border:10px solid blue; ( 复合式写法 )
    属性拆分:
    border-width: 边框大小 border-color: 边框颜色 border-style: 边框类型 ( solid 实线 dashed 虚线 dotted 点状线 double 双线 none 没有线条 )

  3. c:单独一个方向设置边框: border-left:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-top:10px solid red;

  4. d: border-width/color/style : 属性值: 1个值: 四周都添加边框 2个值: 上下 左右 3个值: 上 左右 下 4个值: 上 右 下 左

  5. e: 用边框画三角形: transparent 透明

对盒模型的理解对盒模型的理解 直下三千尺 发布了1 篇原创文章 · 获赞 0 · 访问量 95 私信 关注
上一篇:盒子模型


下一篇:6 应用