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
- 提示：<body>中的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；
- 绝对定位，是相对于“祖先定位元素”来进行定位
- 如果它的父元素没有进行任何定位的话，就再往上找定位元素
- 如果一直找不到，就相对于<body>来进行定位
- 绝对定位，不占空间，层级高于普通元素
- 绝对定位，如果不指定定位坐标的话，绝对定位元素的位置在原地不动
- 绝对定位。定位后是一个“块元素”
HTML引入CSS的方法
1、嵌入式
- 通过<style>标记，来引入CSS样式
- 语法格式：<style type=“text/css”></style>
- 提示：<style>中的CSS样式，只能给当前网页来使用
- 同一个网页中，<style>标记可以多次出现
2
、外联式
- 通过<link>标记，来引入一个外部的CSS文件，扩展名.css，可以实现公共的CSS代码被多个网页共享
- 语法格式：<link rel=“stylesheet” type=“text/css” href=“css/xxx.css” />
- <link>标记的常用属性
- rel：也就是告诉当前网页引入的是什么类型的文件，取值：stylesheet
- type：内容类型
- href：引入的CSS文件地址
- 提示：<link>标记放在<head>标记中
- 同一个网页，可以使用多个<link>来链接外部样式文件
3
、行内样式（主要用于JS控制元素的样式）
- 每一个HTML标记，都有一些公共的属性：class、id、title（鼠标放上有提示信息）、style
- HTML标记中的style属性的值，与CSS中样式一模一样，但是不能换行
- 提示：行内样式中，CSS不能写的过多
- 优先级是最高的
CSS表格属性
border-collapse：表格边框线合并，取值：collapse
rules：取值all。在IE下不兼容
盒子模型
- 描述：可以把每一个HTML标记，都看成是一个“盒子”。
- 这个“盒子”特征“：内容的高宽、边框线、内填充、外边距。
- ”盒子的总宽度“：内容的宽度 + 边框宽度*2 + 内填充*2 + 外边距*2
- 上下外边距合并问题--------这是一种现象
- 什么情况下，上下外边距会合并？
- 上下两个块元素，如果每一个元素都指定了四个外边距，那么上下相邻的那个外边距会发生合并现象
- 合并的时候，取较大一方的值
- 如何实现上下两个<div>之间的距离为100px，该如何实现呢？
- 1、由取较大值，可以仅设置其中一个的外边距为100px
- 2、可以在上下两个div中间，添加一个高度为100px的空div
- 什么情况下，上下外边距会合并？
1412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
