CSS重叠样式表(学习记录)

CSS重叠样式表

优先级
1.范围优先级（范围大，优先级小）
2.加载顺序（后加载优先级大）
3.！important
用法

（1）行内使用，当前标签使用，优先级高，可以单独设置特殊样式

（2）页内使用
a{
color: red;
background-color: rgba(255,255,0,0.5);
font-family: sans-serif;
font-size: 40px;
}
（3）页外用法（支持浏览器缓存）

选择器,选择样式实施的标签
（1）标签选择器 直接 标签名{}
（2）class=“”类选择器 .类名{}
一个标签可以同时设置多个类名

（3）id=“” id选择器 #id名{}
（4）属性选择器 [href=“#”] 如果属性值是中文或者数字时。必须要加单引号
（5）a,div{ }或选择器 a或div都有效 逗号可以将两种选择器拼接
（6）div a{ } 归属选择器，子孙选择 选择的是div标签里的所有a标签
div>a{ } 归属选择器，儿子选择 （div标签里的直接子标签，a标签）
（7）：hover 伪类选择器

box模型+定位

margin 外边距（微调位置，但是还占着原位置）
margin 上右下左
border 边框 border：1px solid red；
padding 内边距（内容位置改变，大小改变）
position+left+right+bottom+top定位
超级绝对定位：position：fixed；忽略级层，按文档左上角定位，独立一层
绝对定位：position：absolute；绝对定位（按上级容器左上角定位，上级容器也为绝对定位）
相对定位position：relative；相对于原来的位置进行定位
常用属性

居中
width:200px
height:200px
position：absolution；
left:50%; margin-left:-100px
top:50%; margin-top:-100px

text
background
list
font
display 改变显示模式（none(隐藏,不占位置)，block，inline）
visibility：hidden；隐藏，但是占位置
float 对齐定位
z-index 设置重叠优先级
cursor 游标
outline：none；隐藏焦点框
overflow：超出范围怎么解决
caret-color:输入光标颜色 还可以用padding控制位置
简单css3
CSS3效果生成器
https://www.html.cn/tool/css3Preview/
css3 animation动画
buttons按钮
font awesome 字体库
额外框架及使用

校内课
1.浏览器兼容性。首先优先保证 chrome 和 firefox ，然后再根据实际情况和需求去调
试其它浏览器的兼容。
text­decoration:underline 下划线
boder:1px solid red;
cursor: pointer|move|default
对于一个标记，多个样式可以进行叠加。
高级选择器：
1。子代选择器：selector1>selector2，常用。
2。后代选择器：selector1 selector2，常用
3。兄弟选择器：selector1~selector2，一般常用。注意：只能选择弟，不能选择兄和
自身。
4。并集选择器：selector1,selector2，常用。
5。交集选择器：select1select2，没有特殊符号，两个选择器挨在一起写。交集选择
器的选择器2一般是类选择器，选择器1无所谓。否则的话，会产生歧义。
6。伪类选择器：通常只用于 a 标记。爱恨准则。
love hate link visited hover active
语法：select1:link，select1:visited，select1:hover，select1:active，select1 一般选
中的是超链接。
伪类的声明顺序，必须按照爱恨准则顺序。:link :visited :hover :active，但是不是说一
定要全部声明。但是不管写几个，顺序要按照爱恨准则的顺序。
注意事项：伪类选择器中的:hover，还可以用于修饰其它标记。
超链接默认自带样式：
1。未点击之前，默认蓝色，下划线。
2。鼠标移过，鼠标样式变成手状。
3。激活态：红色。
4。访问后：紫色。
样式的三种引入方法：
1。写在标记内部，使用 style 属性，叫做行内样式。
2。页面样式，写在 head 标记里面，使用 style 标记。
3。外部样式。通过 link 方式引入外部样式表文件。
样式优先级：
1。行内样式 > 页面样式 > 外部样式。2。样式定义，越是靠近被修饰的元素，其优先级越高。
3。定位越精确，其优先级越高。按照精确程序：id > 类 > 标记 > 伪类选择器 > 浏览
器默认样式
4。使用了 !important 修饰的样式优先级很高。
5。特殊情况。max­width 、max­height > min­width、min­height > !important
6。更详细的规则，自己扩展。
理论上说，在编写代码的时候，尽量减少优先级的判定，增加可阅读性。

div：用得最频繁的块状标记。当作容器用。大多数情况下，用于页面布局。
span：用得最频繁的内联标记。当作容器用。大多数情况下，用于对文本进行修饰。
在html中，所有元素都遵守一个尺寸的规则，包括边框，外边距，内边距，内容，称
之为盒模型。
boxModel ：盒模型。
内联元素：大部分不能设置尺寸，即便设置也无效。
使用 table 进行布局。不同的列可以设置大小。
盒模型是css中的一个重点。
padding:
margin:
border:
设置4个参数：上，右，下，左
设置3个参数：上，左右，下
设置2个参数：上下，左右
设置1个参数：上下左右
另一种方法，结合方位来写：
top，bottom，left，right
padding­top，margin­bottom，border­left
块状元素所占空间的宽度=内容区域宽度（width） + 左右内边距 + 左右边框 + 左右外
边距
块状元素所占空间的高度=内容区域高度（height） + 上下内边距 + 上下边框 + 上下
外边距
浮动。是css的另一个重点。
默认的文档流规则（块状元素和内联元素的排列规则）。
一旦块状元素浮动起来，元素将脱离原来的文档流，不再遵守默认的文档流规则。
浮动的元素有自己的文档流排列规则，按照指定的方向依次排列，并且不再占满一
行。
清除浮动的元素，只有清除与之同级的兄弟元素的浮动。
目前布局都是使用div+css布局。常用样式：
width ： 宽度，单位可以是px，也可以是百分比。
height:高度，单位可以是px，也可以是百分比。
clear:both ，清除浮动。清除浮动效果。
line­height：行高。文字都是写在一行上，文字永远居于行的中央。
颜色设置：rgba(100,100,100,0.5) ,透明度。只能对rgb颜色指定透明度。
opacity:0.5 指定透明度。可以对任意标记指定透明度。
list­style­type:none 表示去除列表中的项目符号或项目编码。
div 无语义化。一般是通过设置class来弥补div无语义的缺点。
有的时候，需要将块状标记转换成内联标记。
有的时候，需要将内联标记转换成块状标记。
display: inline | block | inline­block | none
inline：行内，内联。不能设置尺寸，从左向右依次排列。
block：块状，可以设置尺寸，每个独占一行空间。
inline­block：行内块状形式。从左向右依次排列，不独占一行，但可以设置尺寸。
作业：
1。使用display 方式实现横向菜单，ul>li
2。上左右下布局，使用display来实现。

背景图样式：
background:背景色 url(图片路径) 重复类型 水平位置参数 垂直位置参数
水平参数：left|center|right，既可以使用方位名词，也可以使用百分比，也可以使用
绝对像素。
垂直参数：top|center|bottom
重复类型：no­repeat|repeat­x |repeat­y|repeat
还可以使用百分比。
background­size: 控制背景图显示的尺寸。可以有两个参数，第一个参数水平方向，
第二参数垂直方向。可以是百分比，也可以是像素，auto 表示自动。cover 表示自动
调整，保证块状元素被背景图填满。contain：始终显示图片的全部。
background­origin:定义绘制起点。content­box|border­box|padding­box。
background­color: pink;
background­image: url(img/a038.jpg);
background­repeat: no­repeat;
background­position: center center;
background­size: 100% auto;
内容溢出：
overflow：hidden，内容溢出时隐藏。scroll，内容溢出时出现滚动条。
overflow­x：在x方向上，内容溢出时的处理。
overflow­y：在y方向上，内容溢出时的处理。
rgba(0,0,0,0.6)，表示支持透明度的颜色，最后一个参数用于指定透明度，取值0~1之
间，1就是不透明。
注意事项：
1。边框是可以显示背景图片的。显示图片的0,0点是以边框以内开始。
2。只有使用绝对像素时，才遵守坐标系规则。使用百分比是不遵守的。
雪碧图 sprit
把多个含义相近，使用目的相近，大小相近的多个小图片集中到一张大图片上，然后
通过背景图定位的原理使用，雪碧图。css 重点：盒模型，浮动（脱离原来的文档流），定位（脱离原来的文档流）。
定位：
position: static|relative|absolute|fixed。
方位名词：left right top bottom
z­index ：z轴索引，坐标。
absolute：绝对定位。会脱离原来的文档流，释放用原文档流的空间。
relative：相对定位。也脱离原来的文档流，但是不释放原文档流的空间。定位基准：
未脱离文档流之间的位置。相对于其自身的偏移。经常作为position定位的基准。
fixed：固定定位。无论页面滚动与否，其偏移位置始终是不变的。定位基准是以当前
可见窗口。
static：
注意事项：
1。绝对定位的参照原点（参照基础）：从父容器向上一级一级查找，祖先元素中第一
个有 relative、absolute、fixed 定位样式的容器，找到则以其为基准，如果没有找
到，则以body为基准。

flex 布局。css3 新增的一种万能布局。也叫弹性盒子布局。
html5 长期会一直存在技术。移动端。
之前使用div+css实现的任意布局都可以使用flex来实现。
注意事项：
1。必须要有父子关系的容器。外层的叫弹性容器，其子元素叫弹性子元素。
2。一旦声明了flex布局，那么其弹性子元素不再遵守默认的文档流排列规则。将会按
照新的flex布局规则，同时其浮动、定位等样式都会失效。
3。弹性子元素之间的间距是由flex布局自动调整生成的，不是盒模型的间距。弹性布
局不会影响盒模型的间距。一旦设置了margin值，则在布局自动调整时，以带margin
的空间占用为准。
4。弹性子元素，尺寸可以不同。
5。弹性布局，必须至少一个弹性子元素。单元素水平垂直对齐，可以设置子元素
margin:auto
6。单行情况下，如果子元素尺寸超出父容器的话，子元素的主轴宽度会自动缩小，但
margin值不会改变。
7。flex布局是可以嵌套的。
样式设置：
一、设置在弹性容器上的。
1.display:flex
2.flex­direction：主轴方向，子元素的排列方向。取值为row或row­reverse的时候，主
轴为水平方向。取值为column或column­reverse的时候，主轴为垂直方向。为row的
时候，从左往右排列，row­reverse的时候，从右往左排列。column时从上往下排列，
column­reverse从下往上排列。
3.justify­content：主轴对齐方式。注意：主轴有可能是水平方向，也有可能是垂直方
向。flex­start向主轴起点对齐。flex­end向主轴的终点对齐。center居中对齐。space­
between主轴方向两端对齐，两端和父容器无间距。各子元素之间间距相等。space­
around主轴方向平等对齐。每个子元素的左右边距都是相等的，两端与父容器也有间
距。
4.align­items：单行情况下，交叉轴（整行或整列）对齐方式。与主轴垂直的轴叫交
叉轴。主轴与交叉轴始终是互相垂直的。flex­start表示向起点对齐。flex­end表示向终
点对齐。center居中对齐。baseline文字基线对齐。stretch，自动扩展交叉轴空间，如
果手动设置了交叉轴的空间，则自动扩展失效。5.flex­wrap：换行方式。wrap：换行，从下向下。wrap­reverse向下向上换行。no­
wrap表示不换行。当不换行，且子元素尺寸超出父容器的话，子元素会自动收缩。当
值为wrap或wrap­reverse的时候，align­item将失效。
6.align­content:多行情况下的交叉轴对齐方式。
二、设置在弹性子元素上的。
1。flex­grow：自动扩展。可以设置0,1,2…。默认值是0，表示不自动扩展。
每个子元素都可以单独设置。
如果是正值，表示自动扩展，不同的值代表扩展速度不一样。值为n，则表示扩展的速
度是值1的n倍。
2。flex­shrink：自动收缩。可以设置成0，1，2。默认值是1，表示等比例收缩。
3。flex­basis：表示子元素的主轴占用空间。
4。order：正数。表示排列顺序号。顺序号越小，越靠前。