css学习入门到精通

结构伪类选择器 选取当下选择器下的第一个元素 我们以div中的p标签为例，先找到div中的第一个儿子，然后去匹配是否为p标签，如果是

结构伪类选择器 : first-child 选取当下选择器下的第一个元素 我们以div中的p标签为例，先找到div中的第一个儿子，然后去匹配是否为p标签，如果是，则应用颜色，否则不应用

1. 简介 BFC：（block formatting context ） => 块级格式化上下文 W3C官方对于BFC的介绍：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，

1. 认识视口 布局视口： 移动端默认是980px 用于布局的。 视觉视口： 就是眼睛能够看到的那个部分 不同的屏幕尺寸对应不同的视觉视口。 理想视口： content="width-device-w

1.0 像素 像素的概念： 是一个绝对单位，谷歌默认的字体大小就是16px **px,em,rem,vh,vw区别是什么？** px：绝对单位 ， 像素  chrome默认的字体大小就是16px。

1. 什么是less 首先Less 就是一个 CSS 预处理器，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。让 CSS 具有动态性

1. flex布局 flex布局 全称：flexible box => 伸布局分为两种： 容器：开启了flex的元素 容器中的每一个成员叫做项目 默认：开启了flex布局

1.0 盒模型的组成 css会把所有html元素看成一个盒子 盒子由4部分组成： 外边距：margin 边框：border 内边距：padding 内容：content 盒子的大小: 内容 + pad

1.0 元素的显示模式 1.1 块元素 div独占一行，不与任意元素共使用一行 默认宽度：跟父容器一样宽 默认高度：由内容撑开 常见的块元素：div, p, ul, li, section, h1,

1.0 margin塌陷研究 当第一个子盒子作用在父盒子上，会形成高度的塌陷，使其脱离标准流。 解决margin塌陷问题方式： 给父元素加上 overflow:hidden 给父元素加上 border

1. 创建grid网格布局 含义：由纵横相交的两组网格线形成的框架性布局结构。 语法： display：grid; 在声明了一个 grid 容器之后，我们会发现，项目全部具备了块级元素的特征，默认一行

在开发当中，大多数人在写移动端的小图都是直接用 阿里的iconfont 引入；比如手机上的WiFi图标，电量，信号格等，那么怎么去实现呢？ 我们拿一个 WiFi 图标为例， 只需要用到css里面的几个

1. 浏览器私有前缀 W3C标准所提出的某个css特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器不同的内核，使用私有前缀来测试css特性。在浏览器正式支持该css特性后，就不用再加了。 Chro

1. 图片原点  背景图默认填充的区域是 padding 及 content 区域，我们把左上角的padding起点叫做图片的原点。 图片填充整个盒子 图片是否换行 设置背景图的原点为padding区

1.0 基本选择器 1.1 通配符选择器: * {} 匹配所有的HTML元素，通常用来初始化样式，设置margin和padding为0 需求：将三个元素同时改为红色 1.2 元素选择器 为页面中的某种