css的初级样式整理
CSS
1. css层叠样式表（Cascading Style Sheets）
2. 内联样式（将样式编写到标签的style属性中）
<p style="color:red;"></p>
内部样式 （将样式表编写到head中的style标签中）
<style type="text/css"></style>
外部样式表（将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入）
<link rel="stylesheet" type="text/css" href="css文件路径"/>
3. 基础选择器
1. 元素选择器 语法：标签名{ }
2. id选择器 语法：#id { }
3.类选择器 语法：.class{ }
5.通配选择器 语法：*{ }
6.联合选择器 （逗号隔开） 语法：选择器1,选择器2,选择器N{ }
7.*并集选择器 （中间无任何字符） 语法：选择器1选择器2选择器N{ }
8.后代元素选择器 （空格隔开） 语法：祖先元素 后代元素{ }
9.子元素选择器（用大于号隔开） 语法：父元素 > 子元素 { }
4. 伪类和伪元素：伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置
:link 表示一个普通的链接（未访问过的链接）
:visited 表示访问过的链接
:hover 鼠标移入的链接，也可以为其他元素设置hover
:active 正在被点击的链接，也可以为其他元素设置active
:focus 表示元素获取焦点的状态，一般用于文本框
::selection表示内容被选中的状态（在火狐中使用::-moz-selection来代替）
一般用来设置被选择文本的color和background-color
:first-letter 表示第一个字符
:first-line 表示文字的第一行
:before和:after 选中元素的最前边或最后边（一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容）
属性选择器: 根据元素的属性选择指定元素
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取属性值等于指定值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值中包含指定内容的元素
5. 兄弟元素选择器：
选取后边一个兄弟元素： 前一个 + 后一个
选取后边所有的兄弟元素： 前一个 ~ 后边所有
6. 子元素的伪类
:first-child 寻找父元素的第一个子元素，在所有的子元素中排序
:last-child 寻找父元素的最后一个子元素，在所有的子元素中排序
:nth-child（index）寻找父元素中的指定位置子元素，在所有的子元素中排序
*index的值从1开始计数！！！！
*index可以为变量n，例如2n+1(但变量表示只能是n)
*index可以为even odd
使用even，来找到偶数的子元素；使用odd，来找到奇数的子元素
:first-of-type 寻找指定类型中的第一个子元素
:last-of-type 寻找指定类型中的最后一个子元素
:nth-of-type 寻找指定类型中的指定子元素
7. 否定伪类：从一组元素中将符合要求的元素剔除出去
:not(选择器)
举例：.abc:not(div)
:empty 选择器里的内容必须是空的，有空格都不行，有属性没关系。
8. 样式的继承：为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。
常见的继承属性：
border-collapse（表格单元格边框合并）、border-spacing（表格单元格距离）
Color、cursor、direction（详见09.03）、
font (其中包括 font-family , font-size , font-weight , font-style)
letter-spacing（字母间距，对汉字有效）、word-spacing （单词间距，对汉字无效）
line-height、list-style (其中包括 list-style-image , list-style-position , list-style-type)
text-align、text-indent、text-transform（大小写）、white-space（强制文本不换行）、
9. 选择器的优先级（权重）
说明:当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级来决定。(继承的样式没有优先级)
内联样式(1000)> id选择器(100)> 类和伪类选择器(10)> 元素选择器(1)> 通配选择器(0)
*可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。
10. 选择器的性能：浏览器在解析一组选择器时，从后边往前依次解析，如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。*通配选择器，性能比较差，要避免使用通配选择器
11. 长度单位：
Px：像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成，在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小。
%：可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值，当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面
Em：em会相对于当前元素的字体大小来计算，1em = 1font-size ，em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变
12. 颜色单位：
单词：red green blue orange……
RGB值：rgb(红色,绿色,蓝色) 这三个值需要一个0-255之间的值
rgb(100%,100%,0%) 使用百分数来设置需要0%-100%之间的值
十六进制RGB值：#红色绿色蓝色 这里的颜色需要一个00-ff之间的值
如果颜色的是两位两位重复的，可简写#fff
13. 文本样式：
color 字体的颜色
font-size 字体的大小（默认的字体大小一般都是16px，开发时一般统一为12px）
font-family 设置文字的字体
font-style 设置斜体
font-weight 设置文字的加粗
font-variant 小型大写字母
line-height 行高（文本默认都是在行高中垂直居中的）
行间距 = 行高 - 字体大小
text-align 设置文本对齐
text-transform 设置文本的大小写
text-decoration 设置文本修饰（一般用来去除a链接的默认下划线）
text-indent 设置首行缩进，可设置负值（一般用来隐藏logo标题）
letter-spacing 字符间距（字母间距，对汉字有效）
word-spacing 单词间距（单词间距，对汉字无效）
14. 背景：
background-color 背景颜色
background-image 背景图片 background-image:url(图片的路径)
background-repeat 设置背景图片重复方式
可选值： repeat默认值，背景图片会平铺显示，沿x轴和y轴双方向重复
no-repeat 背景图片不重复
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
设置背景图片的位置：
background-position : x轴偏移量 y轴偏移量;
对于x轴：正值，图片向右移动。负值，则图片向左移动
对于y轴：正值，则图片向下移动。负值，则图片向左移动
x
y
background-attachment 用来设置背景是否随页面滚动
可选值： scroll 默认值，背景图片会随页面一起滚动
fixed 背景图片不随页面滚动，设置该属性，则背景会永远相对于浏览器窗口进行定位，会固定在页面的指定位置一般这种背景都会设置给body
background的简写属性：color img_url repeat attachment position
15. opacity 用来设置背景的不透明度
可选值 0-1 0表示完全透明 1表示完全不透明 0.5半透明
*IE8及以下的浏览器不支持该样式，可以使用滤镜来代替
filter:alpha(opacity=值) 这里值需要一个0-100之间的值
16. vertical-align:行内元素的垂直对其方式,只有行内元素才有的属性
取值:middle 垂直居中对其
top 顶部对其方式
bottom 底部对其方式
baseline 基线对齐方式(默认值)
*如果两个元素或者两个以上行内元素想要实现垂直对齐方式，则需要给他们都加vertical-align:
17. 列表相关属性：
text-decoration 文本修饰
取值none 没有线(默认值)
:underline 下划线
overline 上划线
line-through 中划线(删除线)
blink 闪烁
list-style-type 改变列表符号的样式
取值:(1)disc(默认值),实心的圆点
(2)square 实心的方形
(3)circle 空心的圆
(4)none 不需要列表符号
list-style-image 用图片来做列表符号
取值:url(图片的路径),
*在css里面只要有引入路径都是使用url
list-style-position:定义列表符号的位置
取值:(1)inside 把列表符号放在里面(li里面)
(2)outside (默认值) 把列表符号放在外面
18. text-overflow 文本溢出(出现省略号)
取值:ellipsis
*要配合overflow:hidden和white-space:nowrap（强制不换行）去使用
*元素不能靠内容撑开
19. 置换元素：img 是根据src属性来显示内容的
input是根据value属性来显示内容
20. 块级元素设置inline-block的时候，元素之间会有间隔，标签换行的时候，会把那些换的当成一个空格（一个字符）占据位置，
解决办法：(1)把所有的标签都放在一行。
(2)给父元素设置font-size：0
21. 锚点链接:
<a href="#对应的id名"></a>
<标签 id="id名"></标签>
22. 滚动字幕：固定标签<marquee></marquee>把这些属性添加给其他的标签没有效果
<marquee behavior="scroll" direction="down（方向）" scrollamount="20（速度）">
我开始滚啦
</marquee>
23. FLASH播放器：（type表示是动画是什么格式的）
<object data="" type="">
<embed src="swf动画路径" width="400" height="400">
</object>
24. 让一个小盒子在一个大盒子里面垂直水平居中：
a.已知小盒子宽高的情况下：
给小盒子设置margin：0 auto，还要给父元素（大盒子）设置padding-top:
b.在不知道小盒子的宽高的时候：
在小盒子的后面添加标签，高度为大盒子的高度，宽度为0，并且设置display：inline-block，然后给小盒子设置display：inline-block；
分别给他们两都是设置vertical-align：middle（垂直的居中对齐）
水平居中：给大盒子设置text-align：center；
c.利用定位来做：
.box1 {
width: 200px;
height: 200px;
background: #ccc;
position: absolute;
/* 50% == 250px(父盒子的宽度的50%) */
left: 50%;
top: 50%;
/* margin-left:-100px(小盒子宽度的一半) */
margin-left: -100px;
/* margin-top:-100px(小盒子高度的一半) */
margin-top: -100px;
}
25. 高度自适应窗口
html,body 的高度在默认的情况下，height=0；
如果要设置子元素的高度自适应窗口，前提要设置
html,body{height:100%;}
盒模型：
1. 每个盒子大小都由三部分决定：
内容+内边距+边框
内容: 元素的所有的子元素都是放在父元素的内容区
内边距padding：内边距是内容区和边框之间的距离，设置内边距会影响盒子的大小
盒子中一共有四个方向的内边：
padding-top padding-right padding-botto mpadding-left
简写属性：padding:上 右 下 左
padding:上 左右 下
padding:上下 左右
边框： 宽度border-width :
样式border-style
颜色border-color
简写属性：border：width style color （没有顺序要求）
也单独指定四个边的颜色，宽度和样式：
border-top/left/right/bottom-width/style/color
2.外边距margin：盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
也是具有四个方向的外边距：
margin-top margin-right margin-bottom margin-left
简写属性：规则和padding一致
*margin:0 auto，如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值。
*如果将margin设置为负值，则元素会向相反的方向移动，padding不能设置负值。
*相邻的垂直外边距会发生重叠现象：
1. 相邻元素的外边距会取最大值
2. 子元素的外边距会传递给父元素
*水平外边距不会重叠，而是取和
3.内联元素的盒子模型（不能设置宽高）
*支持水平方向的margin和padding，不支持垂直方向的margin，垂直方向的padding也支持，但是不会影响布局。
*支持四个方向边框，但是垂直的边框不会影响布局
4. 盒模型相关的样式
display设置元素的显示类型（display具有18个属性值，常用的以下几种）
可取值：none不会在页面中显示，并且不会占据页面的位置
block元素会作为块元素显示
inline元素会作为内联元素显示
inline-block元素会作为行内块元素显示（不独占一行，可以设置宽高）
visibility 设置元素是否在页面中显示
可取值：visible默认值，元素在页面中正常显示
hidden元素不在页面中显示，但是依然在页面中占据位置
overflow设置元素如何处理溢出内容
可选值：visible默认值，不会处理溢出的内容，在父元素以外的地方显示。
hidden溢出的内容会被隐藏。
scroll在父元素中同时添加水平和垂直方向的滚动条，内容是否溢出都会添加滚动条。
auto 根据需要自动生成滚动条
5．文档流：网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列，元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）。
6.快元素和内联元素：
块元素：1.独占一行。2.块元素在文档流中宽度默认是父元素的100%。3.块元素在文档流中高度默认被内容撑开
内联元素：1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列2.内联元素在文档流中宽度和高度默认都被内容撑开
1. 浮动：float
可选值：none 默认值，不浮动，元素在文档流中
left 元素向左浮动
right 元素向右浮动
特点：1.元素浮动以后会完全脱离文档流
2.浮动以后元素会一直向父元素的最上方移动
3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
快元素：1.不会独占一行
2.宽度和高度都被内容撑开
内联元素：内联元素脱离文档流以后会变成块元素
2. 高度塌陷：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
解决高度塌陷的方法一：
开启父元素的BFC（Block Formatting Context块级格式化环境）或hasLayout
开启BFC: 1.设置元素浮动
2.设置元素绝对定位
3.设置元素的类型为inline-block
4.设置overflow为一个非默认值(一般都是使用overflow:hidden来开启BFC)
hasLayout:在IE6中没有BFC，但是有一个和BFC类似的hasLayou。
开启hasLayout：
1. zoom:1
2. 当为元素设置宽度非默认值时，会自动开启hasLayout
解决高度塌陷的方法二：
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动，使用这种方式会在页面中添加多余的结构。
解决高度塌陷的方法三：
使用after伪类，向父元素后添加一个块元素，并对其清除浮动，该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构
具体实现：选择符::after{
content:" ";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
3. 定位：通过定位可以将页面中的元素，摆放到页面的任意位置
position：可选值：1. staticv 默认值，元素没有开启定位
2. relative 开启元素的相对定位
3. absolute 开启元素的绝对定位
4. fixed 开启元素的固定定位
相对定位: 1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素5.相对定位的元素会提升一个层级
绝对定位: 1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级
固定定位：固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样，不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的，不会随滚动条滚动。
* IE6不支持固定定位
层级关系：定位元素 > 浮动元素 > 文档流中的元素
1. 当元素开启了定位以后，可以通过z-index来设置元素的层级
2. z-index默认值为0
3. 父元素永远不会盖住子元素
定位的偏移量：left（元素距离定位位置的左侧距离）
top（元素距离定位位置的上边距离）
righ（元素距离定位位置的右侧距离）
t bottom（元素距离定位位置的底部距离）
*一般情况下，只使用两个值即可定义一个元素的位置。
2018-09-26 20:25:21
