sinat_34896766的博客

使用css的transform缩放属性transform:scale(0.5);收缩的是整个元素的大小，这时候，如果是内联元素，必须将内联元素转换成块元素。1px指的是在某些屏幕的机型上，移动端页面的1px会变得很粗，呈现出不止1px的效果。解决思路1：直接写0.5px，利用设备渲染属性，会显示为1px。css一般用border属性实现三角形。在三角形的基础上加上border即可。还可使用切图，将小字体以切图形式展示。

两个块级元素的上外边距和下外边距可能会合并为一个外边距，其大小会取其中外边距值大的那个，这个行为就是外边距折叠。脱标的元素，如浮动元素和绝对定位元素等的外边距不会重叠，且重叠只会出现在垂直方向上。计算原则：如果两者都是正值，就取最大值；一正一负，就是算正负相加的和；如果都是负值，就用0减去两个中绝对值大的那个。解决办法：兄弟折叠底部元素变为行内盒子：display: inline-block底部元素设置浮动：float底部元素的position的值为absolute/fixed。

对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。：是相对长度单位，em是相对父元素的字体大小倍数，rem是相对根元素的字体大小倍数。：页面布局的基础，一个像素表示终端屏幕所能显示的最小区域，可分为css像素（为开发者提供，在css中使用的一个抽象单位）和物理像素（只与设备的硬件密度有关，任何设备的物理像素都是固定的）c、绝对定位+margin负值。

是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积，还支持透明度的调节。是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。是无损的、采用索引色的点阵图。，是无损的、既支持索引色也支持直接色的点阵图。

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成。媒体查询允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容的本身，针对web网页应对不同型号的设备而做出相应的响应适配。使用@media查询，可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面。当重置浏览器大小时，页面也会根据浏览器的宽度和高度，重新渲染页面。

4、如果固有尺寸含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。2、HTML尺寸：只能通过HTML原生属性改变，如width、height的大小。1、内容的外观不受页面上的CSS的影响：样式表现在css作用域之外。1、如果没有CSS尺寸和HTML尺寸，则使用固有尺寸做为最终的宽高。2、如果没有CSS尺寸，则使用HTML尺寸做为最终的宽高。替换元素指的是通过修改某个属性值呈现的内容就可以被替换的元素。4、所有的替换元素都是内联水平元素。1、固有尺寸：替换内容原本的尺寸。

webpack通过安装css-loader和style-loader处理css，css-loader的作用是导入 CSS 模块，对 CSS 代码进行编译处理，style-loader的作用是创建style标签，把 CSS 内容写入标签。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。预处理器的特性可以更好的优化css，解决css的一些问题。PostCss和预处理器的不同就在于，预处理器处理的是类CSS，而 PostCss 处理的就是 CSS 本身。

1、关键选择器：选择器最后面的部分作为关键选择器，因为css选择符是从右向左进行匹配的，当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素。2、css单一样式：使用margin-left，margin-bottom这种，比使用margin复合属性更快。1、具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。2、如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签，过滤掉无关的规则。4、尽量少的用标签选择器，而是使用class选择器。

本文主要介绍flex添加到子元素的属性。

1、解析（parser）HTML，生成DOM树；2、同时解析css，生成样式规则；3、根据DOM树和样式规则，生成渲染树；4、进行布局Layout（回流），根据生成的渲染树，得到节点的几何信息（位置、大小等）；5、进行绘制Painting（重绘），根据计算和获取的信息进行整个页面的绘制；6、展示再页面上。当渲染树中部分或全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程。

less是一个，后缀是.less，扩充了css语言，使css具备了一定的。。

媒体查询就是通过检测视口的宽度，然后编写差异化的css样式。1、确定基准根字号（查看设计稿宽度→确定视口宽度→1/10视口宽度→确定基准根字号 ）1、查看设计稿宽度→确定参考设备（视口）宽/高→确定vw / vh 尺寸。2、vw单位 = px 单位数值 / ( 1 / 100 视口宽度)2、计算rem单位的尺寸，rem=px单位数值/基准根字号。：软件/驱动设置，缩放调解的分辨率，1920/150%（以视口宽度375为例，1vw是3.75）。（以视口高度667为例，1vh是6.67）。

大背景图一般设置为background-repeat: no-repeat;开发中推荐多用类+后代选择器，一个选择器中的类选择器个数推荐不超过3个，选最大和最近的即可。需指定top、right、bottom、left四个值其中之一。添加background-position属性，改变背景图位置。margin-left:版心宽度一半 + 20px;创建盒子，盒子尺寸与小图尺寸相同；设置盒子背景图为精灵图；5、字体图标 iconfont。

声明一个自定义属性，属性名需要以“--”开始，属性值可以是任何有效的css值。css变量：自定义属性或级联变量。

【代码】css实现居中。

space-bewtteen：盒子沿主轴均匀排列，空白间距均分在盒子之间。space-bewtteen：盒子沿主轴均匀排列，空白间距均分在盒子之间。space-around：盒子沿主轴均匀排列，空白间距均分在盒子两侧。space-evenly：盒子沿主轴均匀排列，盒子与容器之间间距相等。space-around：盒子沿主轴均匀排列，空白间距均分在盒子两侧。space-evenly：盒子沿主轴均匀排列，盒子与容器之间间距相等。flex-start：默认值，盒子从起点依次排列。

a、在父元素的最后添加一个块级元素，设置css属性为clear:both;：浮动元素脱标，如果父级元素没有高度，浮动元素无法撑开盒子高度，会导致页面布局错乱。c、给父元素添加单伪元素，设置clear:both;b、父元素添加属性overfolw:hidden;：让块级元素水平排列（float:left/right;浮动后的元素脱标，不占用标准流的位置。浮动后的盒子具备行内块的特点；：也叫文档流，指的是标签在页面中默认的排布规则。：浮动后的盒子顶对齐；

苦熬高设置为0，再通过border进行设置即可，若只要下方三角形，将其他三边的border颜色设置为transprent即可。给长方形盒子设置圆角属性为盒子宽高的50%。给长方形盒子设置圆角属性为盒子高度的50%。给正方形盒子设置圆角属性为宽高的50%。在三角形的基础上设置宽度即可。将正方形旋转45度，即可。

1、手动做减法，减去border或padding的尺寸。1、内容区域====width、height。2、内边距====padding。4、 外边距====margin。3、边框线====border。

常见元素：div、p、ol、ul、dl、form、h1-h5、hr、table。常见元素：a、span、img、i、input、textarea。可通过设置display属性，变为行内块元素。宽度默认是父级的100%；宽高尺寸也可以由内容撑开；宽高尺寸由内容撑开；设置宽高属性不生效；

设置背景图片大小（可设置为关键字：cover、contain；百分比-根据盒子尺寸计算大小；：可使用关键字或坐标（数字+单位，正负均可；水平方向，正数向右，垂直方向，正数向下。contain：等比例缩放，以完全装入，可能显示空白；cover：等比例缩放，以完全覆盖，可看不全。设置背景图片在容器内是否平铺。：fixed，背景不会随元素的内容滚动。：默认是repeat。

小技巧：在调试工具中，css样式上看层叠，下看继承。 相同的属性会被覆盖，不同的属性会叠加 基于不同种类的选择器的匹配规则。 通配符 < 标签 < 类选择器 < id选择器 < 行内样式 < !important （选择器详见css选择器） 链接的颜色不继承； h的字号和粗细不继承。

选择器:hover { css属性} => 鼠标悬停 选择器:active { css属性} => 点击后。语法：选择器:link { css属性} => 访问前 选择器:visited { css属性} => 访问后。组合器选择兄弟元素，即后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。语法：选择器1，选择器2 ... 选择器N { css属性 }组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。语法：选择器1选择器2 { css属性}

使用了BFC相当于加了容器隔离，使BFC内部的元素与外部元素在布局上互不影响通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。c、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。d、 BFC的区域会计算盒子到父盒子margin-top的距离。a、BFC的区域不会与 float的元素区域重叠。b、计算BFC的高度时，浮动子元素也参与计算。元素首先按照普通流的位置出现， 然后根据浮动的方向尽可能的向左或向右偏移。

样式穿透具体可分为css、less以及scss，语法不同，具体语法如下所示。

less、sass、stylus都是css预处理器，语法稍有差异，但作用一样，都是让css增强能力，具备变量、函数等能力。2、不能加大括号{}（用缩进表示层级关系）1、less用@定义变量---@color。2、scss用$定义变量---$color。sass的语法分：.sass 和 .scss。

父子级的标签，给子级元素添加上边距会产生塌陷，导致父级一起向下移动，出现下图问题。1、取消子级margin，改为给父级设置padding。2、父级设置overflow: hidden。3、父级设置border-top。