DaZeng：CSS基础与进阶

伪类

交集选择器：
E.选择器名{}表示给指定的元素定义一个专用选择器eg:nav li.ml-300{xxxxxxxx}

a:link：默认的链接样式
a:visited：访问后的样式
a:hover：鼠标悬停样式（非a标签也可使用hover）
a:active：鼠标按下的颜色
cursor:pointer：鼠标变为手型提示用户可点击

垂直居中

文本：css中设置对应块元素height==line-heigth时，在此块元素中的单行文本垂直居中。

水平居中

文本：text-align（设置块级元素内文本的水平对齐方式）:center，文本在块级元素中，水平居中显示。

块级元素：margin：0 auto;（左右auto水平居中）

导航栏居中例子

比如导航nav放在header里面，nav设置宽度100%里面放一个ul，
ul是块级元素，设置宽度60%，就可以让它margin 0 auto 水平居中
ul里面li也是块级元素，li包含的a是行内元素，
就可以给li加text-align让行内元素a水平居中，让li里面的a行内元素垂直居中就加height和line-height

那让ul在nav垂直对齐呢?
就按照博客内容对ul设置position absolute left 50% top 50% margin上左为自身宽度*0.5
nav 为relative

居中方法总结

文档流

1. 原始文档流，也叫自然文档流。按照html结构自然排版。
2. 浮动文档流，通过float属性控制布局
3. 定位文档流：通过定位属性控制布局
4. 布局方式：原始文档流布局，浮动文档流布局，定位文档流布局，盒模型布局。

浮动（纵向布局转换为横向布局）

1. 原理：

• 宽度变为实际内容的大小。
• 浮动后脱离原始文档流，并且显示在原始文档流的上层，会遮挡住原始文档流。

2. 影响：

• 原始文档流中的文本内容会受浮动元素的影响，紧挨浮动元素与其浮动相反的一侧进行排版显示。
• 浮动塌陷：但所有子元素都浮动后，导致父元素中无原始文档流，父元素没有内容撑起高度，那么父元素高度塌陷，导致父级后续内容被遮挡。

3. 解决浮动塌陷的四种解决方案：

• 给浮动元素的父级加高度。
• 父元素也变成浮动元素，同时父元素后面的原始文档流的元素需要用clear：both，left，right清除浮动影响。
• 父元素加overflow:hidden（溢出隐藏，但是浏览器是把父级高度修正为子元素高度）。
• 父元素后面的原始文档流的元素直接用clear：both，left，right，浮动子元素的父元素仍然没有高度，塌陷依旧存在，只纠正了浏览器的显示。

盒模型

padding：内边距，border之内。
margin：外边距，border之外。
outline：会渲染出边框的效果，且盒模型计算不会计算outline。
box-shadow：x y 模糊值 阴影长度 颜色 inset（内阴影可选）
x，y为0时，四周都有阴影效果。

总宽度：width+（padding+border+margin）*2
总高度：height+（padding+border+margin）*2

导航栏

二级菜单

display:none隐藏元素

display:block显示元素，转换为块级元素（可设置宽和高，独占一行）对margin左右有效，上下无效，对padding上下左右都有效，但会撑大空间。

display:inline内联元素（不能设置宽和高，不会独占一行）

display:inline-block转换为内联的块级元素（可设置宽和高，不会独占一行）对margin、padding上下左右都有效。

关于块级元素，行内元素，行内块级元素详情
display:table-cell表格单元格，具有td的表格属性

导航栏子菜单踩坑

1. 清除浮动不用overflow:hidden否则子菜单不可见。
2. 选择显示子菜单时，空格后代选择器，>为儿子选择器 ，+为兄弟选择器。
3. 在子菜单中将a设置为块内元素更改高度，外部自适应，否则鼠标移动上去会抖动。
4. 子菜单宽度自适应父级，给li固定宽度。
5. 当子元素的margin-top，padding-top留白，作用于父元素外面时，在父元素上，设置overflow：hiidden。

定位

在一个页面中，尽量减少定位布局
一般布局都是自然文档流，浮动布局，盒子模型最后才选择定位布局

多个元素重叠在一个盒子中，可以使用定位。

注：脱离文档流？参照谁？

相对定位

position:relative;相对定位更改层次。
top，right，left，bottom设置偏移位置。
z-index:1;数值越大越在上层

原理：以元素自己原来的坐标为参考坐标，进行位置偏移，元素原来的空间还在，其他元素不会移动上去替代它。

注：原来空间还在，父级用overflow:hidden，溢出隐藏

绝对定位

1. 绝对定位原理：绝对定位的当前元素脱离了原始文档流，变成了内联元素，故例如一个p绝对定位要让文字水平居中则先设置width:100%，再设置text-align:center。

2. 绝对定位元素参照离它最近的已定位的父级元素进行定位。如果没有在父级线上找到已定位的元素，最后一定是由html根元素（浏览器边框）进行定位。

3. 定位后，它原来的位置就被回收了，不会被保留，后面的html元素就会占据它原来的位置。

4. 如何把一个未定位的元素转换为已定位的元素？
   设置position:relative，但不设置偏移量即可。

绝对定位做法：父元素相对定位，子元素绝对定位。

固定定位

position：fixed；直接参照html根元素进行定位
定位后原来的位置不被保留，后面的元素会占据它的位置。
原理：定位后脱离文档流，成为内联元素，宽度变为元素内容的宽度。

静态定位

position：static：取消定位的效果，或者叫没有定位。

CSS2

选择器、伪类、锚点、隐藏、自定义字体图标

1. css2属性选择器、伪类：它主要是匹配html的标签和标签属性的值，一般用于表单元素的时候比较多。

2. 选择器参考手册

3. 跳转锚点：
   

4. 三种显示隐藏元素的区别：
   visiblility:hidden | visible
   opacity:0 前两种不脱离文档流 | 1 （同时区别一下opacity和rgba）
   display:none 脱离文档流再隐藏 | block

5. 自定义字体图标
   

CSS3

css3是css第三版是一个标准，新增了动画，过滤，转换、新的选择器等。

过渡

注意：移入时：hover添加transition，移出时也要添加transition。

transition: property duration timing-function delay;

所有css有变化的都参与过渡，无延迟 transition：all 1s

transition-property 指定CSS属性的name

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线。（linear、ease-in-out）

transition-delay 定义transition效果开始的时候

动画

定义动画规则：

@keyframs 动画规则的名字{ 
	from{}
	to{}
或0%{} 100%{}
}

给目标元素添加动画属性：animation：动画规则的名字 播放时间 播放速度 延迟时间 播放次数 逆向播放 运行或暂停，例：animation：fei 1s ease-in-out 1s infinite alternate running；

transform

移动：transform:translate(100px,100px) ：水平移动：translateX 垂直移动：translateY
旋转：transform:rotate(180deg,180deg)：X轴：rotateX、Y轴：rotateY
缩放：transform:scale(1.5,1.5)——缩写为一个参数：ransform:scale(1.5)：宽度：scaleX、高度：scaleY
兼容性：

倾斜旋转：transform:skew：skewX、skewY
了解浏览器内核名，浏览器如何工作渲染原理。