博哥的二进制世界

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。7、轮廓样式属性:outline-style、outline-width、outline-color、outline。font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与。8、页面样式属性:size、page-break-before、page-break-after。所有主流浏览器都不支持。

上一节讲到了z-index，而众所周知，z-index仅适用与定位的元素，定位极易造成脱离文档流的情况。而什么是文档流呢？

z-index适用范围：它必须在被设定了 position 属性元素上时才会生效，这意味着， z-index 只有在 position 设置为除 static 属性上的元素上时，它才能更改层叠顺序，在元素没有设置任何 position 的情况下，z-index 将不会起任何作用。文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠"，并且默认情况下，所有元素都属于此根层叠上下文，但是，任何元素节点也可以是其"局部层叠上下文"中的根层叠。新的堆叠上下文适用于该元素的任何子元素。

使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；

px是相对于显示器屏幕分辨率而言的，且一旦设置就无法因为适应页面大小而改变，所以通常可以设置字体、内外边距、border等一些不需要依据页面而改变数值大小的属性。em是依据父盒子的字体大小来调整数值的，因为其是依据父盒子字体来确定实际大小，不同元素的字体有可能不同，所以通常也不用于自适应。rem是依据根节点的字体大小来调整数值的，所以通常会配合媒体查询做自适应，但其自适应通常需要引入js文件。百分比%是依据父盒子宽高的百分比来确定实际大小的，通常会用百分比做一些局部的宽高调整。

pc端和移动端是两套代码的，通常pc端不做响应式；用px，移动端做响应式，用rem，可能移动端会用@media做细小的微调。媒体查询通常会结合百分比实现自适应，它经常应用于pc端与移动端是一套项目代码的情况，依据媒体查询写多套不同的样式。vh/vw通常用于移动端的布局，由于其和百分比类似，因此也叫百分比布局。项目中部分布局结构会用flex做自适应。

浏览器想要渲染出网页必须要先将CSS等文件下载下来，所有文件越小，那么就能够更快的下载和渲染，特别是在一些网络速度比较慢的场景下效果尤为明显。我们都知道CSS有一些属性是可以继承的，比如color，font-size，font-family等等，但是很多开发人员不注意这种细节，编写很多重复性代码，从而使得CSS文件变得比较大，影响加载速度。法2的写法，性能更高，因为css选择器是从右到左解析的，法2可以直接获取child，而法1需要先获取所有的child，再获取family下的所有child。

/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;

CSS弹性盒总结弹性盒简介弹性盒的使用创建html文件定义一个弹性盒弹性盒的对齐方式justify-contentalign-items排列方向 flex-directionflex 设置弹性盒子的子元素如何分配空间order 设置弹性盒子的子元素排列顺序flex-wrap 设置弹性盒子的子元素超出父容器时是否换行排列方向 flex-direction与换行（列） flex-flow 缩写形式弹性盒多属性之间的相互配合弹性盒简介弹性盒（Flex Box）是 CSS3 的一种新的布局模式，是一种当页面需

css清除浮动的几种办法清除浮动实际上就是为了触发BFC，因为两个BFG不会互相影响，BFC是一种布局环境9、BFC①什么是BFC？在了解BFC之前，先了解两个个概念：1.box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石， 简单来说一个页面是由很多box（盒模型）组成的。2.元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。 不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-

css中的BFC什么是BFCBFC布局规则如何触发 BFCBFC的应用什么是BFC在了解BFC之前，先了解两个概念：box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石，简单来说一个页面是由很多box（盒模型）组成的。元素的类型也就是display属性。元素的类型和display属性决定了这个 box的类型。 不同类型的box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-人话就是网页布局的一个范围），因此box内的元素会以不同的方

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。

常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置（很多官网就是依靠这个来实现部分效果的）。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

css层级图解