css的个人学习随手笔记
网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的知识网页的最上边一层
css编写的位置
第一种方式：内联样式，行内样式
在标签内部通过style属性来设置元素的样式
<p style="color:red; font-size: small;"> css学习随手笔记</p>只在本行内样式设定，如若有下一行需要重新设置css样式
第二种方式：内部样式表
将样式编写到head中的style标签里
<style>
标签选择器（详情见下面）
</style>
第三种方式：外部样式表(开发常用)
可以将css样式编写到一个外部的css文件中
<link rel="stylesheet" type="text/css" href=" xxx.css" />外部样式表需要通过link标签进行引用，只要想使用这些样式的网页都快可以对其进行引用，指样式可以在不同页面之间进行复用
将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
css基本语法
css的基本语法：选择器 声明块
选择器：通过选择器可以选中页面的指定元素
比如p标签的作用就是选中页面中所有的p元素
声明块：通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明块由一个名值对结构
一个样式名对应一个样式值，名和值之间以 ：连接，以；结尾
CSS选择器
基础选择器
| 选择器 | 作用 | 用法 |
| 标签选择器 | 可以选出所有相同的标签，如p | p｛color：red；｝ |
| 类选择器 | 可以选出一个或多个标签使用非常多 | .nav{ color : red;} ( nav:类名) |
| id选择器 | 一次只能选择一个标签 | #eg{ color:red;} (eg : id名) |
| 通配符选择器 | 全局声明 | *{ color : red ; } |
复合选择器
| 选择器 | 作用 | 特征 | 用法 |
| 后代选择器 | 用于选择元素后代，使用较多 | 选择所有的子孙后代 | 间隔符号为空格 nav p｛color ： red｝； |
| 子代选择器 | 选择最近一级元素 | 只选择亲儿子 | 符号为> nav>p{color : red}; |
| 交集选择器 | 选中同时复合多个条件的元素 | 选择器1选择器2选择器n{} | |
| 并集选择器 | 同时选择多个选择器对应的元素 | 选择器1，选择器2，选择器n｛｝ | |
| 链接伪类选择器 | 给链接更改状态 | 重点记住a{ } |
选择器的权重
样式的冲突：当我们选择不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时， 此时就发生了样式的冲突
-发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器时单独计算的）
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器；
如果优先级计算后相同，此时优先使用靠下的样式。
可以在某一样式的后边加上！important，则此时该样式会获得最高的优先级，甚至超过内联样式 。但是，要注意在开发过程中要慎用！！！
链接样式
- a:link 正常，未访问过的链接
- a：visited 用户已访问过的链接
- a：hover 当鼠标悬停在链接上时
- a:active 链接被点击的那一刻
伪元素
伪元素：表示页面中一些特殊的并不真实的元素（特殊的位置）
伪元素使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before和after必须结合content属性来使用
div::before{
content:'abc';
color:red;
}继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承。比如背景相关的，布局相关等的这些样式都不会被继承。
像素和百分比
长度单位：像素
-屏幕（显示器）实际上是由一个一个的小点点构成的
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
-所以同样的200px在不同的设备下显示效果不一样
百分比
-也可以将属性值设置为相对于其父元素属性的百分比
-设置百分比可以使子元素跟随父元素改变而改变
em和rem
em
-em是相对于元素的字体大小来计算的
-1em = 1font-size
-em是会根据字体大小的改变而改变
rem
-rem是相对于根元素的字体大小来计算的
定位机制
CSS中存在三种定位机制
- 文档流
- 浮动定位
- 层定位
文档流
-是默认的一种情况，不需要额外的设置
| block | inline | inline-block |
-元素类型转换：display属性
block元素特点：1.独占一行
2.元素的height、width、margin、padding都可设置
常见的block元素：<div>、<p>、<h1>~<h6>、<ol>、<ul>、<table>、<form>
a{
display:block
}inline元素a转换为block元素，从而使a元素具有块状元素的特点
inlink 元素特点：1.不单独占用一行
2.width、height不可设置
3.width就是它包含的文字或图片的宽度，不可改变
常见的inlink元素：<span>、<a>
显示为inlink元素：display：inlink
inlink-block元素
-就是同时具备inlink元素、block元素的特点
特点：1.元素不单独占用一行
2.元素的height、width、margin、padding都可设置
常见的inlink-block元素：<img>
显示为inlink-block元素：display：inlink-block
浮动定位
float属性：left、right
div实现横向多列布局
float属性：left — 左浮动
right — 右浮动
none — 不浮动
clear属性：left、right、both
both，清除左右两边的浮动
left 和 right 只能清除一个方向的浮动
none是默认值，只在需要移除已指定的清除值时用到
层定位
概述： position属性：1.fixed、2.relative、3.absolute
left属性
right属性
top属性
bottom属性
z-index属性
| fixed | 固定定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| static | 默认值 | 没有定位，元素出现在正常的流中 top，bottom，left，right、z-index无效 | position：static |
| fixed | 固定定位 | 相对于浏览器窗口进行定位 top，bottom，left，right、z-index有效 | position：fix 不会随浏览器窗口的滚动条滚动而变化 总在视线里的元素 |
| relative | 相对定位 | 相对于其直接父元素进行定位 top，bottom，left，right、z-index有效 | position：relative 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在 relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式 |
| absolute | 绝对定位 | 相对于static定位以外的第一个父元素进行定位 top，bottom，left，right、z-index有效 | position：absolute 定位为absolute的层脱离正常文本流，但与relative的区别：其在正常流中的原位置不再存在 对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层 对于absolute定位的层，如果其父层中都未定义absolute和relative，则其将对相对body进行定位 |
| 相对定位 | 绝对定位 | |
| position取值 | relative | absolute |
| 文档流中原位置 | 保留 | 不保留 |
| 定位参照物 | 直接父元素 | 非static的父元素 |
盒子模型
css将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
一个盒子的实际宽度、高度：content+padding+border+margin
当内容溢出盒子框时，overflow属性取值
| hidden | 超出部分不可见 |
|---|---|
| scroll | 显示滚动条 |
| auto | 如有超出部分，显示滚动条 |
边框（border）
border属性: width、style、color(凡是设定border三个属性就必须全写)
| 边框的宽度 | border-width | px、thin（细边框）、medium（默认、中等边框）、thick（粗边框）、inherit（从父元素继承边框宽度） |
| 边框的样式 | border-style | dashed（虚线）、solid（实线）、double（双线） |
| 边框的颜色 | border-color | 颜色 |
border-width可以用来指定四个方向的边框宽度
值的情况 : 四个值：上、右、下、左
三个值：上、左右、下
两个值： 上下、左右
内边距（padding）
对浏览器默认的设置清零
*｛
margin：0；
padding：0；
｝
注意：属性的取值只有为0时才可以省掉单位，其他情况下不可以
内边距的设置会影响到盒子的大小
外边距（margin）
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置
margin-top 上外边距
设置正值，元素会向下移动
设置负值，元素会向上移动
margin-right 右外边距
设置正值，元素会向右移动
margin-bottom下外边距
设置正值，其下边的元素会向下移动
margin-left 左外边距
设置正值，元素会向右移动
设置负值，元素会向左移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素
| 图片、文字水平居中 | text-align：center； |
| div水平居中 | margin：0 auto；（浏览器自动计算） |
3567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
