选择器
ID选择器 #id
类选择器 .class
标签选择器 标签名 例 div
通配符选择器 * 等同于body
可以代表所有元素 给所有元素设置公共样式 通常用代码初始化
群组选择器
选择器，选择器，选择器{}
后代选择器
选择器 选择器{}
第一个选择器是父代选择器 第二个选择器 是子孙标签
一个标签内包含的所有指定的类标签
子代选择器 选择器 >选择器 {}
选择第一个选择器的 直属子标签 紧跟的属于直属
是一个标签的下一代指定类标签
选择器的优先级（可不是样式的优先级>
ID>CLASS>标签
在前端代码规范中ID不能设置样式
样式编译规则
优先级！important>行间样式>ID>class>标签
由上到下编译 在后面写的样式会覆盖前面的样式
谁最精准 谁生效
样式的编写方式
行间样式
在内部使用style属性
在body里面写
<div style="width:100px;></div>
内部样式
可以写在<html></html>标签的任何地方
在前端规范中 一般写在<head></head>标签中 <title></title>标签下面
外部样式
创建一个.css文件
然后通过<LINK rel="stylesheet" href="">标题引入。html文件中
在href属性里面设置.css文件的路径
在前端代码规范 一般写在<head></head>标签中<title></title>标签下面
通常情况下css文件中写的是那个那个页面的样式 命名是名字与该html文件的命名相同
style
在标签内部写（行间样式） 叫属性
单独使用双箭头写出来<style></style>叫标签 有一个特例 就是(!coptype)不属于标签 。他说告诉网页档期那进行的是什么版本
功能 声明此为css代码 需要用css代码编译规则
.css文件里面不用写style .css文件本来就执行css编译规则
类如 index.html index.css
特点
一般情况不适用行间样式 简化 HTML界面
当代码少于100行 可以使用内部样式
当代码大于100行 可以用外部样式
命名规则
由字母数字下划线组成
不能使用中文 （不管是文件夹还是文件）
必须以字母开头 不能以数字或者下划线开头
见名知义 看见名字 就知道是哪个模块
地中海命名 .text_top 中间用下划线链接
驼峰命名 .textTop 后一个单词首字母大写
对于项目来说
所有图片都必须在image/img/images文件夹里面
一个项目的首页的相关文件 必须用index 来命名
index.heml index.css index.js
属性选择器
- ：first-chid 选择每一个父元素第一个子元素的指定元素 p标签
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和 :nth-of-type(1) 是一个意思。
：first-of-type 选择每一个父元素下面的 第一个指定元素 必须是p标签
：list-chid 选择每一个作为父元素 最后一个子元素 的指定标签
last-child
：list-of-type 选择每一个父元素的指定标签
：not（selector）选择指定标签的标签 p
：nth-child（n） 选择每一个父元素下面的 第n个子元素的目标元素
：nth-last-child 选择每一个父元素下面 倒数第n个 子元素 的目标元素
nth-last-of-type(n) 选择每一个父元素下面的 倒数第n个 目标元素
nth--of-type(n) 选择每一个父元素下面的 第n个 目标元素
什么是浮动？
float none 元素不浮动
float left 元素向左浮动
float right 元素向右浮动
float both 整体浮动
浮动特性（浮动的元素会脱离文档流也就是脱标）
脱离标准普通流的控制（浮）移动到指定位置（动）俗称脱标
浮动的盒子不会保留原先的位置其他标准流会占用之前的位置
浮动的元素会一行显示并且元素顶部对齐
浮动的元素具有行内块的元素的特性
浮动的盒子是没有间隙的 他是紧挨在一起的
如果块级元素没有设置宽度默认和父级一样宽 添加浮动后和 大小根据内容决定
浮动布局注意点
1浮动和标准流的父盒子搭配
先用标准流的父盒子排列上下位置 之后内部子元素采取浮动排列左右位置
2.一个元素浮动了 理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子 如果其中一个盒子浮动了 那么其余兄弟也应该浮动 防止出现问题
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
1。清除浮动的原因
由于父盒子在很多情况下 不方便给高度 由于子盒子浮动不占有位置 导致父盒子高度为0 导致下面 的标准流受影响
清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
给其父元素设置一个高度
给父元素加上overflow：hidden 清楚浮动带来的效果
给父元素最后面添加一个块标签设置css clear:both; 给父元素设置一个div块标签 给父元素最后写 <div clean:both></div>
通常会在代码初始化的时候写上一个.clear{clear：both；} 只针对块元素
position 定位 一个元素盖在一个元素可用定位
* 相对定位 relative
* 不会脱离文档流
* 不管你怎么设置位置 他原先所占的位置 一直都在
* 如果给元素设置margin的时候 依旧会影响正常文档流的排列
* 只想对其本身做移动 不影响其他元素 但是元素设置margin会影响
* 绝对定位 absolute
* 会脱离文档流
* 谁有relative 谁就是参考点 向上查找 如果其父元素 设置了相对定位 则其父元素为参照物 如何没有 不断向上查找 知道找到其设置相对定位的祖先元素 如果祖先元素没有 则以body为参照物
* 不能以祖先元素的兄弟元素参照我 必须是直系祖先元素
* 如果不止一个祖先元素设置了相对定位那么就以最近的元素为参照物
* fixed 固定定位
* 会脱离文档流
* 直接以窗口为参照物
* 不管窗口 怎么滚 他都是以固定的位置存在
