weixin_60547084的博客

这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。

使 css 中也可以像 js 一样声明变量，但是在使用之前应该要知道一些东西。使用方式和线形渐变一样，不过当渐变内容不足以撑满时会重复渐变。使用方式和径向渐变一样，不过当渐变内容不足以撑满时会重复渐变。它们都是 background-image 的属性。使 css 的属性值可以进行四则运算。var(--变量名)

grid-column: grid-column-start / grid-column-end，简写方式。如果当前有三列，start 所对应的就是1、2、3，而end 所对应的就是2、3、4，写其中一个就可以。当前网格的开始与结束位置，一个单元格表示 1，两个单元格表示 2。注意：如果 n 大于当前总列数，并不会到第二行去，而是会添加列。row-reverse：水平摆放，相反(123 变 321)column-reverse：垂直摆放，相反。row：水平摆放(默认)column：垂直摆放。......

子元素复原：父元素被隐藏，子元素设置显示的属性，子元素是可以显示的被遮挡元素触发事件：就是隐藏之后，该元素背后的元素是否还可以正常触发事件，因为 opacity 只是变的透明，并没有真正意义上的隐藏，所以是会影响背后的元素的...

效果图<!-- 内容部分 --><div class="container"> <div class="header"> 头部 </div> <div class="box"> <div class="nav"> ... </div> <div class="content"> ... </div> </div></div>/

文章目录1. 层叠上下文2. 层叠上下文与z-index的解释3. z-index不生效1. 层叠上下文创建层叠上下文的元素的背景和边框层叠级别 z-index 为负值的层叠上下文常规流非定位的块盒非定位的浮动盒子常规流非定位行盒任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的层叠上下文层叠级别 z-index 为正值的层叠上下文2. 层叠上下文与z-index的解释在层叠上下文规则中，1-5条还是很好理解的，第6条的意思是一个元素的子元素是一定

1. css子元素在父元素中水平垂直居中的五种方式<!-- 这里html代码是统一的 --><div class="parent"> <div class="child"> </div></div>2. 第一种，定位，margin: auto;.parent { position: relative; width: 800px; height: 600px; border: 3px solid steelblue;

行内元素设置margin或padding有时候会失效其实并不是失效，给行内元素设置左右margin和padding会生效设置上下margin不会生效设置上下padding会生效，但是不会撑开父元素，相等于没有效果

文章目录1. 流式布局1.1 什么是流式布局1.2 meta视口标签1.3 移动开发选择和技术解决方案1.3.1 移动端主流方案1.3.2 移动端技术解决方案1.3.3 移动端特殊样式2. flex 弹性布局2.1 特征2.2 父元素属性2.2.1 display2.2.2 flex-direction2.2.3 justify-content2.2.4 flex-wrap2.2.5 align-items2.2.6 align-content2.2.7 flex-flow2.3 子元素属性2.3.1 fl

@[TOC](文章目录)### 1. 常见的手机分辨率320px、360px、400px、500px、640px、720px、750px等，当然还有很多，我们不可能给每一款手机设置一个不同的样式，这个时候就需要用到媒体查询了### 2. 媒体查询的基本介绍```css/* 语法规范 */@media mediatype and|not|only (media feature){ css-code;}/*mediatype：媒体类型and|not|only：关键字media f

文章目录浮动定位弹性盒子浮动第一个盒子左浮动，第二个盒子右浮动，第三个盒子设置overflow: hidden;宽度减去左右浮动盒子的宽度然后自适应<!-- html部分 --><div class="container"> <div class="box left"></div> <div class="box right"></div> <div class="box hidden"></div

文章目录1. 2D转换 transfrom1.1 translate 平移 (px)1.2 rotate 旋转 (deg)，默认为Z轴1.3 transfrom-origin 旋转中心1.4 scale 缩放，默认为Z轴2. 过渡 transition3. 动画 animation4. 3D转换4.1 3维坐标系4.2 3d移动 translate3d4.3 景深 perspective4.4 转换样式 transform-style4.5 3d旋转 rotate3d4.6 3D缩放 scale3d4.7

文章目录1. H5语义化布局标签2. input新增type类型3. input新增的属性4. 多媒体标签5. 伪类选择器5.1 动态伪类5.2 目标伪类5.3 语言伪类5.4 元素状态伪类5.5 否定伪类5.6 结构伪类6. 伪元素6.1 伪元素与伪类的区别6.2 伪元素的注意事项1. H5语义化布局标签头部标签：header导航标签：nav内容标签：article块级标签：section侧边栏标签：aside尾部标签：footer它们都是块级元素(有语义化的div)2. input

文章目录1. 元素的显示、隐藏、透明2. CSS用户界面样式2.1 鼠标样式 cursor2.2 轮廓线 outline2.3 禁止拖拽 `textarea`3. 行内块元素垂直对齐4. 文本溢出显示省略号5. 精灵图(雪碧图)5.1 为什么要使用精灵图5.2 怎么使用精灵图1. 元素的显示、隐藏、透明display：隐藏对象，不保留位置visibility：隐藏对象，保留位置overflow：只是隐藏超出部分rgba：只给当前元素设置背景透明度，不会影响子元素opacity：给元素设置透明度

文章目录浮动1. CSS布局的三种机制2. 什么是浮动3. 浮动排列4. 高度塌陷5. visibility6. `BFC` 块级格式化上下文定位1. 定位的属性及特征2. 定位元素水平垂直居中3. 层叠上下文4. display浮动1. CSS布局的三种机制普通流块级元素行内元素浮动定位2. 什么是浮动浮动的元素会脱离标准流浮动的元素不会撑开父盒子的高度浮动的元素一行可以摆放多个，摆放不下会换行3. 浮动排列左浮动的盒子靠上靠左排列右浮动的盒子考上靠右排列浮动

文章目录1. css的三种引入方式2. 三种注释3. css选择器4. css样式4.1 font4.2 color 文本颜色4.3 text-indent 首行缩进4.4 text-decoration 文本装饰(a标签默认underline)5. 标签的显示模式 display5.1 块级元素 `block`5.2 行内元素 `inline`5.3 行内块元素 `inline-block`6. background背景7. css三大特性优先级继承层叠8. 盒模型8.1 标准盒模型8.2 标准盒模型大小

文章目录1. 文档类型2. 语言类型3. 字符集4. HTML骨架标签5. 标题标签6. 段落标签 p7. 换行标签 `br`8. 水平线标签 hr9. div标签和span标签10. 文本格式化标签11. 图像标签 `img`12. a标签13. 锚点定位14. base标签15. `pre`标签16. 表格标签17. 列表标签18. 表单标签19. 特殊字符20. 注意写路径最好用 `\` 不要用 `/`1. 文档类型<!DOCTYPE><!-- 写在页面最前面 -->&l

文章目录1. 常见浏览器内核2. W3C标准2.2 为什么要遵循WEB标准2.2 Web 标准的好处3. `SEO`优化1. 常见浏览器内核浏览器内核css兼容性写法IE、360、百度trident-ms-firefoxGecko-moz-Safariwebkit-webkit-chromewebkit–>blink-webkit-Operablink-o-2. W3C标准万维网联盟（外语缩写：W3C）标准不是某一个标准，而