【前端笔记】CSS布局（1）

1. CSS特性

1.1 继承性

• 子元素有默认继承父元素样式的特点（子承父业）
• 文字控制属性都可以继承
• 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1.2 层叠性

• 给同一个标签设置不同的样式：此时会共同作用在标签上
• 给同一个标签设置相同的样式：写在靠后的样式会生效
• 注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

1.3 优先级

• 优先级高的选择器样式会覆盖优先级低选择器样式
• 优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
• 注意：!important写在属性值的后面，分号的前面。!important不能提升继承的优先级，只要是继承优先级最低

2. 盒子模型

2.1 盒子模型的介绍

• 盒子的概念：
  • 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局；
  • 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为“盒子”
• 盒子模型：CSS中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
  margin）构成，这就是盒子模型

2.2 内容区域的宽度和高度

<style>
    div{
     
        width: 200px;
        height: 200px;
    }
</style>

• 利用 width 和 height 属性默认设置盒子内容区域的大小

2.3 边框 border

• 单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid 虚线dashed 点线dotted
边框颜色	border-color	颜色取值

• 连写形式：单个取值的连写&#