5-CSS-浮动清除-继承-优先级-定位-引入CSS-盒子模型

CSS浮动和清除

float：让元素浮动，取值：left（左浮动）、right（右浮动）

clear：清除浮动，取值：left（清除左浮动）、right（清除右浮动）、both（同时清除）

1、CSS浮动

• 浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上
• 浮动的元素，不再占空间了。并且，浮动元素的层级要高于普通元素，像飞起来了。
• 浮动的元素，一定是“块元素”。不管它原来是什么元素。
• 浮动的元素，如果没有指定宽高，将尽可能的变窄。因此，浮动元素一般要定宽高。
• 浮动的功能：可以实现将多个块元素并列排版

2、如何让包围元素，包住浮动元素？

• 你就需要在浮动元素的下边，使用清除浮动操作。

3、CSS清除浮动

• CSS清除浮动的功能有两个：（1）可以让包围元素从“视觉上”包住浮动元素（2）清除之下的其它元素将恢复默认排版
• 有浮动，就得有清除
• 如果包围元指定了高度了，那么可以不使用清除功能 

CSS继承性

CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。

什么样的CSS属性能被继承呢？

• CSS文本属性都会被继承
  • color、font-size、font-family、font-style、font-weight
  • text-align、text-decoration、text-indent、letter-spacing、line-height
• 提示：中的CSS属性，会被所有的子元素继承

CSS优先级

1、单个选择器的优先级

•    行内样式(style) > id选择器 > 类选择器 > 标签选择器

2、多个选择器的优先级

•    多个选择器的优先级，一般情况下，指向越明确，优先级越高
•    特殊情况下，我们需要假设一些值：
  • 标签选择器  优先级1
  • 类选择器     优先级10
  • id选择器      优先级100
  • 行内样式      优先级为1000

display属性

• 功能：规定网页元素如何显示的问题
• 取值：none（不显示，隐藏）、block（块显示）、inline（以行内元素显示）
• block：可以实现将行内元素转成块元素
• inline：可以实现将块元素转成行内元素

overflow属性

• 描述：当内容溢出时，溢出的内容该如何显示
• 取值：visible（可见）、hidden（隐藏）、scroll（出现滚动条）、auto（自动：超出就出现滚动条）

cursor光标类型

• 取值：text、help、wait、hand（手型：不兼容）、pointer（手型）

CSS定位

• position：元素定位方式，取值static、fixed、relative、absolute
• static：静态定位（默认状态，不定位）
• fixed：固定位置
• relative：相对定位
• absolute：绝对定位
• 定位方式，要与定位坐标配合使用
• 定位坐标：指定定位的元素，偏移目标元素多元的距离
  • left，right，top，bottom：定位元素距离目标元素的距离

1、固定定位，position：fixed；

• 固定定位，是相对于浏览器窗口来进行的定位
• 固定定位，不占空间，层级要高于普通元素
• 固定定位，如果不指定定位坐标的话，固定定位元素的位置在原地不动
• 固定定位，定位后是一个“块元素”

2、相对定位，position：relative；

• 相对定位，是相对于“原来的自己”来定位
• 相对定位，依然占空间，层级高于普通元素
• 相对定位，如果不指定定位坐标的话，相对定位元素的位置在原地不动
• 相对定位，原来是行内元素，定位后不变
• 提示：相对定位，一般要和绝对配合使用（口诀：子绝父相）

3、绝对定位，position：absolute；

• 绝对定位，是相对于“祖先定位元素”来进行定位
  • 如果它的父元素没有进行任何定位的话，就再往上找定位元素
  • 如果一直找不到，就相对于来进行定位
• 绝对定位，不占空间，层级高于普通元素
• 绝对定位，如果不指定定位坐标的话，绝对定位元素的位置在原地不动
• 绝对定位。定位后是一个“块元素”

     

HTML引入CSS的方法

1、嵌入式

• 通过
• 提示：