day14-CSS-盒模型

边框属性

• 边框属性：环绕标签宽和高周围的线条
• 格式
  • 1️⃣连写方式一：同时设置四条边--快捷键bd+
    • border：边框宽度 边框样式 边框颜色
    • border-style：实线或虚线
  • 2️⃣连写方式二：分别设置四条边
    • border-top：边框宽度 边框样式 边框颜色--快捷键bt+
    • border-right：边框宽度 边框样式 边框颜色--快捷键br+
    • border-left：边框宽度 边框样式 边框颜色--快捷键bl+
    • border-bottom：边框宽度 边框样式 边框颜色--快捷键bb+
  • 注意：
    • ①颜色属性可以省略，默认是黑色
    • ②边框样式不能省略，省略后看不到边框
    • ③边框宽度可以省略，有默认值
  • 3️⃣连写方式三：分别设置四条边--数值带单位，顺时针
    • border-width：上右下左
    • border-style：上右下左
    • border-color：上右下左
  • 注意：
    • ①必须按照上右下左
    • ②若省略左边取值，则和右边一样；若省略下；则和上一样
  • 4️⃣方式四：上右下左分别设置要素
  • 5️⃣方式五：可以直接设置none
  • 6️⃣应用：如何实现倒三角，让宽度为0高度为0，边框宽度设大一点，左下右颜色为白色 --- 目的：少传图片，可以提高浏览器的速度

内边距属性

• 1.什么是内边距？
  • 边框和内容之间的距离就是内边距
• 2.格式
  • 方式一：非连写
  • padding-top：数值
  • padding-right：数值
  • padding-bottom：数值
  • padding-left：数值
  • 方式二：连写
  • padding：上右下左 --- 省略规则同border
  • 注意点：
    • 1️⃣设置内边距，标签的宽度和高度会有变化
    • 2️⃣内边距会有背景颜色

外边距属性

• 1.什么是外边距？
  • 标签与标签直接的距离就是外边距
• 2.格式
  • 方式一：非连写
  • margin-top：数值
  • margin-right：数值
  • margin-bottom：数值
  • margin-left：数值
  • 方式二：连写
  • margin：上右下左 --- 省略规则同border
  • 注意：
    • 1️⃣回车会被当做一个空格，并不是因为存在margin
    • 2️⃣外边距不会有背景颜色
• 3.外边距合并现象
  • 同时设置一块区域，水平方向会叠加；
  • 同时设置一块区域，垂直方向上不会合并，会显示margin大的

盒子模型

• 1.什么是盒子模型？
  • 盒子是一种比喻，其实HTML中所有的标签都是一个盒子
• 结论
  • 1️⃣html中所有的标签都可以设置宽度，高度，内边距，外边距
  • 2️⃣可以利用google开发者工具的盒子模型查看

盒子模型的高度和宽度

• 1.内容的宽度和高度--width.height
  • 标签的width和height
• 2.元素和宽度和高度--border.padding.width.height
  • 宽度 = 左边框 + 左内边距 + width + 右边距 + 右边框
  • 高度同上
• 3.元素控件的宽度和高度--margin.border.padding.width.height
  • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右边距 + 右边框 + 右外边距
  • 高度同上
• 规律：
  • 1️⃣增加padding、boder宽高也会变化
  • 2️⃣保持元素宽高，要宽高要减去padding、boder增加的值

盒子模型box-sizing属性

• 作用：CSS3新增属性box-sizing保证增加padding或boder盒子元素宽高不会变化
  • 原理： 保持元素宽高，要宽高要减去padding、boder增加的值
• 取值
  • 1️⃣content-box：元素宽高=边框+内边距+内容宽高
  • 2️⃣border-box：元素宽高==width属性

盒子练习---小盒子在大盒子的中心处

• 方式一：设置大盒子的padding
  • 会改变大黑子的元素宽高，可以利用box-sizing属性
• 方式二：设置小盒子的margin
• 注意点：
  • 1️⃣如果设置内部盒子外边距，外部盒子也=会定下来
  • 2️⃣可以给外部的盒子添加边框属性
  • 3️⃣开发中，关于嵌套盒子关系时，首先考虑padding再考虑margin；因为margin本质上是用于控制兄弟之间关系的
  • 4️⃣在嵌套关系中，利用margin:0 auto方式来设置内部盒子设置在外部盒子中水平居中；只对水平方向有效！！

关于盒子的居中

• 1.text-align:center和margin:0 auto的区别
  • text-align:center --- 盒子中的文字图片水平居中
  • margin:0 auto --- 让盒子本身水平居中