CSS

css
CSS 概述：
1、Html 可以对内容进行装饰，但是装饰功能有限
2、CSS 可以设置更丰富的显示样式
层叠样式表 —- 装饰的样式可以叠加使用
可以实现比 html 更强大的装饰功能
3、Html —— 主要存储内容 ———- 演员
Css ——– 主要对内容进行装饰 —– 化妆师
HTML 与 CSS 是不同的模块实现：
HTML 怎么引入 CSS 呢？
方案1：直接在HTML 开标签中使用 style 属性，编写 CSS 代码

        方案2：将CSS代码单独抽取，存储在一个标签中             <style>                css代码             </style>        方案3：            1、将CSS单独抽取为一个文件            2、 当前 html 引入该文件               格式:<link rel ="stylesheet" href="css文件路径"/>               rel 属性必须，格式固定        秉着高内聚低耦合的编码原则：          CSS 引入最好使用方案3，但是学习阶段，使用方案2

CSS代码书写格式：
1、过滤器 {
键1:值1;
键2:值2;
……
}
2、键与对应的值太多，使用什么就讲解什么
CSS一般结合HTML标签使用：
1、最常用的两个标签 div span
2、div特点：
A、自带换行
B、div区域，当前行的空余部分也包含
3、span 特点：
A、不会换行
B、所占区域刚好包含当前内容

         拓展：          HTML 中换行的称之为 块级元素            不换行的称之为行内元素

CSS 的过滤器：
* css 为某些标签添加样式，要从html文档中筛选过滤这些标签，而过滤实现，就是通过过滤器完成的
* 常见过滤器：
1、标签名
标签名 {}
2、类名
.类名 {}
3、id过滤器
#id {}
注意：id 具有唯一性，不能重复
过滤器是可以嵌套使用的，又称之为层级过滤器 */
div font {
color: red;
}

CSS样式学习：
* 1、设置边框与尺寸
* border: 像素 实心 颜色;
* width:值; — 值可以使百分比，也可以是绝对值，但是必须得有单位
* height:值; — 和 width 区别，不能使用百分比
* 2、块级与行内元素转换
* display:
* 取值：
* block —- 块级显示
* inline — 行内显示
* none —– 不显示，隐藏
* 3、设置超链接的显示样式
* text-decoration:none;
* 设置超链接文本没有下划线
浮动：
1、div的默认实现是换行
* 2、需求：同一行内显示
* 浮动实现
* 属性 ：
* float: left right —- 左浮动或右浮动
* 注：
* 如果浮动的div 在同一行内，剩余空间超出最后一个div 的宽度时，
* 最后一个div 换行
*
* 3、有的浮动 有的不浮动
* 现象：浮动的和不浮动的 div 重叠了
* 原因：
* 1、页面分成两部分 天花板 和 地板
* 客户从上往下看
* 2、浮动的排列在天花板上
* 不浮动的排列在地板上
* 3、最后效果
* 产生重叠
* 4、 需求：不要重叠 第三个 div 另起一行排列
* 实现：
* d3中使用属性：
* clear:both —– 清除浮动影响
* 原理：
* 将 d1 d2 从天花板上拽到地板上，再排列 d3
盒子模型：
A、CSS 中，一些组件可以看做是盒子：
* body —- 大盒子
* div —– 小盒子
*
* 盒子之间的关系：
* 嵌套
* 平级
*
* B、盒子位置设置 —– margin-
* 不同的盒子之间可以设置间距
* 1、会设置左间距与上间距即可
* 2、明确右间距和下间距可能设置无效
*
* C、盒子内元素设置与盒子边框的位置 —— padding-
* 1、设置元素与上边框和左边框的间距
* 2、明确与右边框和下边框的间距设置可能不生效