07-CSS盒模型

边框属性

• 边框属性的格式
  • 连写(同时设置四条边的边框)
    border: 边框的宽度 边框的样式 边框的颜色;
  • 快捷键:
    bd+ --> border: 1px solid #000;
  • 连写(分别设置四条边的边框)
    • border-top: 边框的宽度 边框的样式 边框的颜色;
    • border-right: 边框的宽度 边框的样式 边框的颜色;
    • border-bottom: 边框的宽度 边框的样式 边框的颜色;
    • border-left: 边框的宽度 边框的样式 边框的颜色;

  快捷键:
  bt+ border-top: 1px solid #000;
  br+  border-right: 1px solid #000;
  bb+ border-bottom: 1px solid #000;
  bl+  border-left: 1px solid #000;
  

• 注意点:
  • 1.连写格式中颜色属性可以省略, 省略之后默认就是黑色
  • 2.连写格式中样式不能省略, 省略之后就看不到边框了
  • 3.连写格式中宽度可以省略, 省略之后还是可以看到边框

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border:  solid #00ffff;*/
            border-top: 4px solid blue;
            border-bottom: 4px solid yellow;
            border-left: 4px solid green;
            border-right: 8px dashed pink;
        }
</style>
<div class="box"></div>

• 连写(分别设置四条边的边框的各个属性)
  • border-width: 上 右 下 左;
  • border-style: 上 右 下 左;
  • border-color: 上 右 下 左;
• 注意点:
  • 1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
  • 2.这三个属性的取值省略时的规律
    • 2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    • 2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
    • 2.3上 右 下 左 > 上 > 右下左边取值和上边一样

---

内边距属性

• 什么是内边距?
  • 边框区域和内容区域之间的距离就是内边距
• 内边距属性书写格式
  • 非连写格式
    • padding-top: ;
    • padding-right: ;
    • padding-bottom: ;
    • padding-left: ;
  • 连写格式
    • padding: 上 右 下 左;
    • 这三个属性的取值省略时的规律
    • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
    • 上 右 下 左 > 上 > 右下左边取值和上边一样
• 注意点:
  • 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
  • 2.给标签设置内边距之后, 内边距也会有背景颜色

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*padding: 15px;*/
            /*padding-top: 15px;*/
            padding-left: 20px;
            padding-right: 15px;
            padding-bottom: 20px;
            /*如果想要让盒子宽度和高度不变需要设置该属性*/
            box-sizing: border-box;
        }
    </style>
<div class="box">我是文字我是文字我是文字我是文字我是文字</div>

外边距属性

• 什么是外边距?
  • 标签和标签之间的距离就是外边距
• 外边距书写格式
  • 非连写格式
    • margin-top: ;
    • margin-right: ;
    • margin-bottom: ;
    • margin-left: ;
  • 连写格式
    • margin: 上 右 下 左;
    • 这三个属性的取值省略时的规律
    • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
    • 上 右 下 左 > 上 > 右下左边取值和上边一样
• 注意点:
  • 外边距的那一部分是没有背景颜色的

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*margin: 20px 30px 20px 30px;*/
            margin-top: 20px;
            margin-bottom: 30px;

        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 20px;
        }
</style>
<div class="box1"></div>
<div class="box2"></div>

• 外边距合并现象
  • 在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合
    并现象, 谁的外边距比较大就听谁的
  • 在水平方向上,外边距是会叠加的
• 注意点:
  • 1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
  • 2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性或者给外面盒子设置overflow: hidden;属性
  • 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin,margin本质上是用于控制兄弟关系之间的间隙的

盒子水平居中

1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto;只对水平方向有效, 对垂直方向无效

盒子水平居中和内容水平居中区别

text-align:center;和margin:0 auto;区别
text-align: center;
设置盒子中存储的文字/图片水平居中
margin:0 auto;
让盒子自己水平居中

---

盒模型的宽度和高度

• 内容的宽度和高度
  • 通过width/height属性设置的宽度和高度
• 元素的宽度和高度
  • 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  • 高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框
• 元素空间的宽度和高度
  • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  • 高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距

---

box-sizing属性

• 1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
• 2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
• 3.box-sizing取值
  • content-box
    元素的宽高 = 边框 + 内边距 + 内容宽高
  • border-box
    元素的宽高 = width/height的宽高

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            padding: 30px;
            box-sizing: border-box;
        }
    </style>
<div class="box">我是盒子</div>

清空默认边距

• 在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距
• 如何清空默认的边距
  • 使用通配符选择器

  *{
         margin: 0;
         padding: 0;
  }
  

  • 注意点: 通配符选择器会遍历所有标签,性能不好
  • 在企业开发中,会使用别人设计好的清除边距的文档
    http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

---

行高属性

• 行高指的是每行内容的高度

• 规律:

  • 1.文字在行高中默认是垂直居中的
  • 2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
    简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可
  • 3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

• 注意点:

  • 1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

  • 2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

  • 3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离