CSS盒模型的学习笔记

第四章 CSS基础

第一节 理解样式继承（20180416）

什么是继承：继承（inherit）是指子元素会自动拥有父元素的某些属性

1. 继承会自动发生的，开发者不需要书写任何额外代码
2. 如何不继承呢？？对标签重新设置样式即可
3. 并不是所有的CSS属性都可以被子元素继承
4. 可继承的属性： color font-size font-weight text-align
5. 不可继承的属性： background-color
6. 继承有传递性
7. 有些属性在页面的某个区域中具有通用性

若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿

继承发生的场景

一个元素的某个CSS属性，只有满足下面两个条件才会继承父元素： 1. 该元素是可继承属性 2. 该属性在样式表中没有声明

强制继承：

1. 也叫显示继承，是指将CSS属性值设置为inherit.
2. 这样做，通常有两个原因:为了继承有些不可继承的属性；为了继承已经声明的属性。
3. 用结构元素包含其他标签（元素）；不要用文本元素嵌套其他标签（元素）

---

第五章 CSS盒模型

第一节 盒子的分类

1. 不同元素产生的盒子类型可能不同；
2. 一个元素，产生什么样的盒子，取决于它的CSS的display属性；

CSS的display属性

• display： none（不生成盒子，不会占用页面空间）
• display： inline（行盒）{块盒可嵌套行盒；但行盒不能嵌套块盒}
• display： block（块盒）
• display： 其他取值
• inline-block（行内块）

第二节 盒子的组成

• margin 外边距 （与其他盒子之间的距离）
• border 边框
• padding 内边距（边框与内容之间的距离）
• content 内容的宽度和高度（开始标记和结构标签之间的内容）

第三节 块盒

content内容

含义

• 含义：用于存放文本或其他元素的区域
• 类似于一个箱子中有放东西的空间

相关属性

width

• 含义：宽度
• 不可继承
• 默认值：auto（暂认为撑满整个可用区域）

• 其他取值

  像素、绝对高度、固定高度：px；

  相对长度：em（相对于应用样式的元素的字体大小）百分比（%）；

  取父级宽度放入百分比%）

• 断词：当内容超过宽度时，会自动对内容进行截断换行（按照断词规则截断）

height

• 含义：高度
• 不可继承
• 默认值：auto
• 其他取值（px/em/%）

overflow：超出隐藏部分

min-width

max-width

min-height

max-height

注释：设置最大最小宽高度是为了保证当前页面布局效果，提高用户体验

padding 内边距（填充区）

• 含义：表示边框到内容之间的距离；类似于箱子和底部空间之间的填充物
• 相关属性：
• padding-top（含义：上内边距；不可继承；默认值：0px；其他取值：em/%）
• padding-right（含义：左内边距；不可继承；默认值：0px；其他取值：em/%）
• padding-bottom（含义：下内边距；不可继承；默认值：0px；其他取值：em/%）
• padding-left（含义：右内边距；不可继承；默认值：0px；其他取值：em/%）
• padding速写属性，简写属性（速写属性不是真实的CSS 属性，它只是CSS提供大得一快速写法）

• 书写格式：

  padding：上 右 下 左

  padding：上 左右 左

  padding：上下 左右

  padding：上下左右

• 示例:

  padding:10px

  padding:10px 20px

  padding:10px 20px 30px

  padding:10px 20px 30px 40px

dorder 边框

• 含义：分隔内部和外部的界限（由上（top）右（right）下（bottom）左（left）四部分组成）
• 类似于盒子壁

• CSS相关属性：

  border-style（速写属性同时设置所有边距的样式）

  border-color（速写属性同时设置所有边距的颜色）

  border-width（速写属性同时设置所有边距的粗细）

• 上边框

  border-top-style（含义：上边框样式；不可继承；默认值：none；其他取值：solid实线、dashed虚线、dotted点线、double双实线、其他）

  border-top-width（含义：上边框粗细；不可继承；默认值：medinm；其他取值：medinm中等、thin细线、thick粗线、px、em）

  border-top-color（边框的颜色是跟着区域内的文本颜色的变化而变化的；如果没有设置颜色则为默认色黑色）

• 上边框书写格式：border-top：厚度 样式 颜色；

margin 边框处

• 含义： 表示边框和相邻盒子的（两个盒子之间的）距离，分为上（top）右（right）下（bottom）左（left）四部分组成