随笔分类 - CSS3
摘要：构建DOM树：浏览器先请求HTML，拿到HTML，对HTML进行解析，也就是HTML Parser后，形成一个dom树 然后在解析的过程中，有时候有link标签，是CSS和JS，浏览器主进程负责下载CSS文件 构建CSSOM树：当CSS完成下载，并且DOM树构建完成，开始对CSS进行解析，CSS P
阅读全文
摘要：最近写Vue项目，遇到了一个问题，如下图 右边显示是这样子，但是我想要的效果是这样： 我就要用flex布局实现~ 有几个flex的属性咱们要知道， flex-wrap：换行方式。（nowwrap：默认值，单行，可能溢出； wrap：如果超过一行，就换行） justify-content: space
阅读全文
摘要：弹性盒子里面会放弹性元素，为盒子定义的规则，会影响里面的元素。 display:flex; display:inline-flex; 这两个的不同之处：容器设置flex以后，会变成块级元素，当然也就可以设置宽高（如下图的橙色） 当容器设置为inline-flex后，会变为类似inline-block
阅读全文
摘要：相对定位：position:relative; top:20px；就是距离上面20px，也就是向下沉20px，其余的同理。（空间位是保留的！！！） 绝对定位：position:absolute; 1，如果父元素没有定位属性，那么该元素的定位的标尺是整个页面的左上角 2，如果父元素有任意一种定位属性，
阅读全文
摘要：浮动这里要好好琢磨一下，挺麻烦，但是不难。 问题：如果一个父容器，两个子容器div，两个子容器为了显示，一个左浮动，一个右浮动，两个子容器都脱离了文档流，造成父容器没有元素，这种情况下该怎么做？ 问题如下图： 两种方法： 1，在两个div后再设置一个div，并且不设置宽高（宽高为0），然后清除上面两
阅读全文
摘要：float:left;一旦元素浮动，就会丢失空间位（不在正常的文档流内），后面的就会补上来。 像span，em等元素是行元素，是没有办法设置宽和高的，如果浮动了， 就会变为块元素，能设置属性。 如果两个元素都浮动，那么是“同一条战线上的”，会在一排，也都是丢失了空间位。
阅读全文
摘要：边距合并：如果上面的设置外边距向下100像素，下面的设置外边距向上120像素，那么就会像素合并为最大的那个，是120像素。 box-sizing:border-box；如果给定了这个元素的大小，比如300px*300px，那么无论修改边框还是内边距，该元素的大小永远都是300*300。 一下图片是各
阅读全文
摘要：行高：一般用em，适应各种响应式布局，要不然随着设备像素改变，页面变得很难看。 一般有很多字体属性，可以分开写，也可以合到一起写，合到一起写的时候，必须写大小和字体，否则都不生效。 文字阴影：text-shadow：rgba(32,31,31,0.3)，2px，3px，4px； 第一个颜色是阴影的颜
阅读全文
摘要：权重位规则如下（继承没有权重，是NULL，通配符*权重是0，0大于NULL），如果权重相同，那么后出现的更主要， 强制提升优先级：!important(一般不太用，会破坏规则)。 通配符*与继承的关系，*大于继承
阅读全文
摘要：first-child选择，讲一讲为啥是这样（ 等价于:nth-child(1) ）： div空格：first-child 选中第一个以及所有子元素的第一个元素，牢记这句话，看下图： 解释一下为啥是，1-1，1-2，2-1，3-1选中了： 第一步：div空格 这个表示选中div的儿子们 第二步：：f
阅读全文
摘要：最近重新学习了CSS3，发现选择器还能这么玩。。介绍一下属性选择器 [^ $ * ~ | ] 我给咱们顺着往下缕一缕（信息量挺大） 刚开始是这样子： 看图片（核心：h1定义一个属性，在CSS中，h1[属性]）： 代码如下： <!DOCTYPE html> <head> <meta charset="
阅读全文
摘要：> 是儿子辈的选择器，只选择儿子辈 先写一个最基本的（可以在本地跑一下试一试）： <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>测试网页</title> <style> div article h2{ color:blue; } </sty
阅读全文
