总结css篇

CSS

浏览器内核

内核分为渲染引擎和js引擎

元素

行内元素：a span i img input
块级元素：div ul ol li h1-h6 p
空元素：br hr link
p元素内不能放块级元素

伪类与伪元素

:用于伪类 不存在的类，用于描述一个元素的特殊状态

:first-child //第一个子元素（所有类型中）
:first-of-type //第一个子元素（指定类型中）
:last-child //最后一个子元素
:nth-child() //选中第n个子元素
//特殊值： n 第n个
          2n/even 第偶数位
          2n+1/odd 第奇数位
:not() //除了指定元素

//a标签的伪类
:link 正常的链接/未点击过的链接
:visited 访问过的链接

:hover 鼠标移入的状态
:active 鼠标点击那一刻的状态

::用于伪元素 表示页面中并不真实存在的元素，描述元素的特殊位置

::first-letter 第一个字母
::first-line 第一行
::selection 被选中的内容

::before
::after

元素继承

背景相关、布局相关等样式不会被继承

选择器的权重

样式冲突时

• 优先级 由高到低

   !import
   内联样式 1000 style=""
   id选择器 100  #id
   类和伪类选择器 10  .class
   元素选择器 1  div
   通配选择器  0  *
   继承的样式  没有优先级
  

BFC

块格式化上下文，给予一个独立的空间，让空间内的子元素不会影响到外面的布局
独立的跨级渲染区域
如何形成BFC:
1.float不为none
2.display不为static或relative
3.display的值为inline-block;flex;inline-flex
4.overflow:hidden

1. 消除浮动
   子元素浮动float: left导致没有设置高度的父元素无法展开
   让父元素形成BFC，在父元素中加入

   display: inline-block;
   or
   overflow: hidden;
   etc.
   

2. 取消margin塌陷
   父元素没有设置margin 子元素设置了margin 会导致父元素margin塌陷到子元素
   让父元素加入BFC
3. 阻止元素被浮动元素覆盖

两个相邻的元素会产生边距重叠
让第二个元素形成BFC
5. 两栏布局
如何垂直居中一个浮动元素

DPR

DPR = 物理像素/css逻辑像素
物理像素：出厂设置的设备物理像素
css逻辑像素：在显示屏上的单位
通过window.devicePixelRatio获取设备DPR
由于在高清屏中DPR可能会是2或者3，原线1px像素的线就占了2-3个物理像素，显示变粗
解决方案：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

或利用scale(0.5)

长度单位

• 像素
  像素越小的屏幕显示效果越清晰
• 百分比
• em
  相对于元素的字体大小
• rem
  相对于根元素的字体大小

文档流

在文档流中元素的特点：

• 块元素
  -在页面中独占一行
  -默认宽度为父元素全部
  -默认高度被内容撑开
• 行内元素
  -不会独占一行
  -从左向右水平排列
  -默认宽度高度被内容撑开

link 与 @import

link：文件是同时加载。
@import 引入的 CSS 将在页面加载完毕后被加载。
*不要用@import

display:none 与 visibility:hidden

display:none 不占用节点
visibility:hidden 保留节点，占用空间

行内块级元素（display:inline-block）

行内块级元素 = 行内元素的 可以同行 + 块级元素的 可以设置宽高
行内块级元素间会有间隙
原因：行内元素的空格和换行会被解析
解决：给父级设置font-size: 0;

自适应布局单位

1. rem
   相对于根节点字体大小的单位
   1px = 1/37.5 rem
2. em
   相对于父元素字体大小的单位
3. vw
   等于视口宽度的1%
4. vh

盒子模型

content + border + padding + margin

box-sizing决定盒子尺寸的计算方式

border: 10px red solid  //边框 影响盒子大小 影响布局
outline: 10px red solid //轮廓  不影响布局

box-shadow: 20px 20px 10px orange //阴影 不影响布局
// 水平偏移  垂直偏移  阴影模糊半径  阴影颜色

box-radius: 10px 20px 30px 40px //圆角
//左上 右上 右下  左下
//左上 右上/左下  右下

background-image: liner-gradient(90deg, red, yellow) //线性渐变
background-image: radial-gradient(100px 100px, red, yellow) //径向渐变

媒体查询

@media

三角形

.box{
	width: 0px;
	height: 0px;
	border: 10px red solid;
	border-color: transparent transparent blue transparent;
}

动画

过渡

transition: all 2s; //当所有属性发生变化时  花2s完成变化
transition:width,height 2s cubic-bezier()/step(2, end) 2s;
//指定元素 执行时间 时序函数/分步执行 延迟 

动画

animation: test 2s 2s timing-function;
animation-iteration-count:2;//执行次数
//指定关键帧 执行时间 延迟 时序函数
@keyframes test {
	0%{}
	100%{}
}