css

CSS知识点
前端三大要素：
Html:木偶
css:化妆
Javascript:动态展示
Css：
1、什么是Css(cascading style sheets)？ 层叠样式表（不能脱离html而单独存在）
2、语法
（1）属性名和属性值之间使用“：”隔开
（2）多对属性之间使用“；”隔开
（3）最后一对属性可以不加分号
Id=‘one’
Class=‘two’
Style=“根据css的语法进行设置”
Title=‘mydiv’

Width:100px；Height:100px;

速记写法：简写形式：
Div：10px
盒子：内容区（盒子与内边距的距离）+内边距+边框+外边距margin
Padding-left:10px;Padding-right:10px;Padding-top:10px;
Padding-buttom:10px;
简写：“上右下左”顺序
内边距：Padding:10px;上下左右均为10px
padding：10px 20px;上下 左右
Padding：10px 20px 30px;上 左右 下
Padding：10px 20px 30px 40px;上 右 下 左
外边距margin：与内边距相同
12行：border:1px solidv red;（各4行）

3、注释
（1）注释写法：/注释内容/
（2）注释作用：解释说明、便于代码的维护与管理
（3）注释能否嵌套使用：不可以

（浏览器自动填充）

4、HTML中引入css的方式：
(1)行内样式：style属性div块级元素默认占满一行
《div style =’ ‘》

（2）内联样式：style标签中

（3）外部引入:
创建一个以.css为后缀名的文件
link 标签 ：优先解析css（建议使用）

@import url( )：优先解析html（不建议使用)

5、引入样式的优先级
（1）行内样式>内联样式/外部引入
就近原则：哪一个样式更靠近div元素（更靠下），哪一个样式优先级更高

（2）内联样式
（3）外部link标签：实际开发时
6、选择器
标签选择器：根据标签名称选择一类元素

id选择器：通过id属性选择一个元素 （#） #（ID属性的属性名）value属性值 #：第一个为。。元素；.:所有为。。元素 类选择器：class .value（属性值） （.）

普遍选择器：：代表所有 （）
Eg:div *{}：div所有的后代元素

后代选择器：不包含孙代，当前元素的直接子元素：>
包含孙代，选择当前元素的所有后代，包括孙代子元素：空格
三个孩子
后代“>”：
“ ”：
兄弟选择器：
+：选择当前元素之后的一个兄弟元素
#one+div：选择div的“one”和下一个div元素。

~：选择当前元素之后的所有兄弟元素
#one~div：选择div的“one”和所有div元素。

属性选择器：根据元素的属性选择一类元素
【id】：选择当前页面中具有id属性的元素

【class=‘one’】：选择当前页面中具有class属性并且属性值为one的元素

【class~=‘one’】：选择当前页面中具有class属性，并且属性值之一为one的元素

【class^=‘o、one’】:选择当前页面中具有class属性并且属性值以o、one开头

【class$=‘o’】:选择当前页面中具有class属性，并且属性值以o结尾
【class*=‘o’】:选择当前页面中具有class属性，并且属性值包含o字符
多选择器：使用逗号隔开多个选择器
Div5 p3
Div,p{}
#one，div.two,[id]{}

#one，div,.Two,ul{}
Div,p{width：100px;
Height:100px;}
=(相当于
Div,{width：100px;
Height:100px;
}
p{width：100px;
Height:100px;
}）
组合选择器：将多个选择器组合在一起使用

Div#one：选择当前页面中所有的div标签并且选择div标签中id为one的元素。
Div.one：选择当前页面中所有的div标签并且选择div标签中class为one的元素。
Div.one{
}

伪类选择器： div :first-child{}：div的所有的孩子 P： first-child{} :*

“：”连接一个伪类名称
（：first-child（第一个孩子）
:last-child（最后一个）
:nth-child（中间）:number、odd（奇数）、even（偶数）
）
和状态相关的：

：hover:当鼠标悬停在某个元素上时
：active:当鼠标按下时的状态
：link:当当前元素未被点击过的状态
：visited:被访问过之后的状态
（同时引用时）书写顺序：Link->visited->hover->active
伪元素选择器：变色

hello&word

:在一行

不在一行
  ：：first-letter（第一个字符）
:  : first-line（第一行）
：：selection：（被选中时）
：：before当前文本之前添加东西

：：after当前文本之后添加东西
图片：：before/after{content: 你好！/url(./pupian.jpg)}

选择器的优先级：根据特性值进行比较，特性值越大，优先级越高
！important:不计入特性值。
直接特性值最大，优先值最高，不建议经常使用；特性值相同时，越靠下的优先级越高。
标准特性值：
style属性：1000 id选择器：100
类（class）选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1
组合选择器的计算？

设置为最高优先级：

如何将行内元素转化为块级元素？

7、选择到div
设置样式
继承：inherit
不继承：initial

 颜色单位：

1、关键色：red;blue;yellow;…
2、红绿蓝Rgb(r,g,b):0~255之间
3、Rgba(r,g,b,a(透明度）):0~255 a:0-1取值
0代表完全透明，1代表完全不透明。
4、16进制的颜色值。
#fff:白
#ccc:灰色
拾色器/取色器：
5尺寸单位：
Width：
Px:像素（绝对单位）
em:相对单位（跟随字体单位而改变，默认为16px）
Rem:相对单位，很少使用。
百分比：相对单位（相对于父元素的尺寸）

8、文本样式：
字体样式：书上
加载网络字体：1、下载字体
2、声明字体（写在外侧，不要写在大括号内部）
@font-face {
Font-family：’wangym’,
Src:url()
}
Div{
Font-family:’ ‘
}
3、使用字体
字体图标库：fontawesome、iconfont
(1)fontawesome:< >
.css
Index.html:

outer.css: Div{backgroung:red} 1、link:引入外部样式文件 2、使用行内元素

7、word-spacing: 单词之间的间距
letter-spacing:字符间的间距
word-break:break-all:设置超出父元素部分是否换行显示；
Word-wrap:

overflow：
hidden:超出元素部分隐藏
scroll：超出元素部分以滚动条形式显示

Width/height
Min-width:
Min_height:
Max-width:
Max-height:

Display:
Nome;:元素的隐藏：隐藏元素所占据的空间
Block;：元素的显示
Visibility:
Hidden:元素的隐藏:相当于修改了元素的透明度，不隐藏元素空间
Visible:元素的显示
设置表格的？？

《colgroup》
设置

列表样式：
默认样式：
ol
Li
Ul
Li
Dl
Dt:标题项
Dd：列表项
List-style-type:设置列表项标志类型
List-style-type
List-style-position
List-style-image:url()
Line-height:必须与当前元素高度一样，行内元素，垂直居中
8、盒子:
(1) 盒子=content+padding+border+margin
盒模型：
标准盒模型/3wc盒子/默认盒模型:Box-sizing:content-box
特点：width->content
怪异盒子/边框盒子：box-sizing:border-box
特点：width->盒子=conter+padding+border
(2)盒子样式

9、布局：
“默认文档流”：元素默认所在浏览器中的位置
先进行行级布局后进行列级布局
1、display：
Inline：将一个块级元素转换为一个行内元素
Block:将行内元素转换为块级元素
Inline-block:将当前元素转换为兼容行内元素和块级元素
2、浮动布局
Float：left/right；
默认用法：使用浮动属性不会遮盖文字；对行内元素设置浮动，会让行内元素可以设置宽高；对于块级元素设置浮动，独占一行属性失效。
浮动和停止：（1）当遇到父级边框时，停止浮动；（2）遇到其 他浮动元素时，停止浮动；
清除浮动特性：clear：left/right/both
（1）在浮动元素之后添加一个块级元素,给块级元素设置清除浮动；
（2）给所有浮动元素的父元素设置：：after{content：‘’；
Clear：left；
Display:block;}v