syzdev的博客

1 简介伪类和伪元素都属于CSS选择器的附加关键字，在形式上，用单冒号:表示伪类，用双冒号::表示伪元素，如：// 伪类div:hover { }// 伪元素div::after { }注意：由于历史遗留问题，伪元素div::after和div:after两种写法在大部分浏览器下是等同的，不过按照规范，应当使用单冒号:用于表示伪类，双冒号::用于表示伪元素，以便区分伪类和伪元素。2 伪类伪类用于表示元素的某种状态，主要有操作状态，选择器状态以及表单状态几种，本文主要介绍操

1 本文简介在CSS伪类中，主要分为操作状态伪类、选择器状态伪类和表单状态伪类几种，本文要介绍的选择器状态伪类在规范中大概有十几种，本文仅介绍常见的类型，即与type有关的选择器状态伪类和与child有关的选择器状态伪类两种。2 选择器状态伪类2.1 type相关element:first-of-type：选择父元素下的第一个类型为element的元素。如下面例子中span:first-of-type会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的第一个s

0 前言在CSS中，单位分为相对单位和绝对单位两种：相对单位：元素大小参照另一个对象的大小来决定；绝对单位：元素大小是所设定的固定的绝对值。1 相对单位CSS中的相对单位主要分为两大类：字体相对单位：与font-size属性有关的单位，常见的字体相对单位有em和rem；浏览器窗口相对单位：与浏览器窗口大小有关的单位，常见的浏览器窗口相对单位有vw、vh、vmax和vmin。1.1 emem（Element meter）是一个相对单位，它有如下特点：em参照的对象是其父元素的fo

1 前言1.1 定位的背景在CSS中，元素放置规则分为以下三种：普通文档流：元素按照从上至下，从左至右的顺序排列，但元素又分行内元素和块级元素，其排列方式有所不同：行内元素：水平排列，直到水平方向占满一行后再另起一行排列。块级元素：垂直排列，每一个块级元素都会独自占用一行。浮动流：设置浮动的元素会向左或向右浮动，直到碰到父级元素或其他浮动的元素，需要注意的是，设置浮动的元素只是半脱离文档流。脱离文档的定位流：当定位设置为absolute绝对定位或fixed固定定位时，元素会完全脱离文档

说明：本文在内容结构部分引用自阮一峰-Flex 布局教程，但大部分内容做了修改和补充，并且重绘了所有图例。1 什么是flex布局？flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任意容器都可以定义为flex布局：display: flex;还有一种方式为display: inline-flex; 可以给行内元素添加flex布局，inline-flex和inline-block一样，对内部元素来说是个display: flex 的容器，对外部元素来说.

0 前言在讨论层叠上下文和层叠顺序之前先举个例子，创建两个box，其中红色box长200px宽400px，蓝色box长400px宽200px： <div class="box"> <div class="blue-box"></div> </div> <div class="box"> <div class="red-box"></div> </div>.box { po

1 什么是BFC块格式化上下文BFC（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。以上内容摘自MDN，其实通俗来讲BFC就是一个独立的布局环境，BFC中的元素布局不受外部元素的影响，也不会影响到外部元素。2 如何触发BFC其实在日常开发中经常会主动触发BFC：给元素设置浮动（float: left | right）给元素设置脱离文档流的定位（position: absolute

1 浮动简介CSS浮动是指浮动元素会脱离“文档流”并向左或向右浮动，允许文本和内联元素环绕它，直到碰到父元素或者另一个浮动元素。需要注意的是，在CSS定位中absolute绝对定位以及fixed固定定位属于完全脱离文档流，其位置即不受其他元素影响，也不会影响到其他元素。而CSS浮动属于半脱离文档流，因为文本和内联元素会环绕浮动元素，这个也是float浮动属性被设计出来的初衷。下面举个具体的例子，代码如下：.content { border: 5px solid pink; border-ra