css
关注
分享
扫一扫
文章平均质量分 65
漫川清梦压星河
这个作者很懒，什么都没留下…
展开
-
reflow （回流）和 repaint（重绘)理解
reflow 和 repaint repaint 就是重绘，reflow 就是回流。 严重性：在性能优先的前提下，性能消耗 reflow 大于 repaint。 体现：repaint 是某个 DOM 元素进行重绘；reflow 是整个页面进行重排，也就是页面所有 DOM 元素渲染。 如何触发：style 变动造成 repaint 和 reflow。 不涉及任何 DOM 元素的排版问题的变动为 repaint，例如元素的 color/text-align/text-decoration 等等属性的变动。 除原创 2021-01-19 10:40:32 · 393 阅读 · 0 评论 -
移动端布局方案
移动端布局方案 百分比布局 百分比布局的，这样的做法的话是比较费时间的，有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间，而且对于设计稿的还原也不好。所以这里>也不怎么推荐 固定的设备宽度 在做移动开发的时候很多人都会加上viewport的配置， 那么固定设备宽度的布局就是根据这个来设置的，将viewport里面的宽度width设置成设计稿的宽度，也就是说原本是width=device-width，即宽度为设备的宽度 假如在iphone6上显示的时候，那么页面的宽度就是375px; 当我原创 2021-01-19 10:37:43 · 117 阅读 · 0 评论 -
栅格系统的快速上手
栅格系统 (grid system) 一个基本的栅格系统仅仅需要几个元素 a container （一个容器） rows （行） columns （列） gutters (the space between columns) **容器：**容器是用于设置整个栅格的宽度， 容器的宽度通常是100%, 但是，你可能也要设置一下最大宽度，用于限制在大屏幕的展示 **行：**行是用于确保它里面的列元素不会溢出到其他的行元素里面，为了达到目的，通常我们需要使用clearfix。 **列:**列是栅格系统中最原创 2021-01-19 10:22:19 · 125 阅读 · 0 评论 -
css选择器与css3伪类
css选择器 元素选择器 html {color:black;} h1 {color:blue;} h2 {color:silver;} 类选择器 .important {color:red;} id选择器 #intro {font-weight:bold;} 属性选择器 a[href][title] {color:red;} // 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色 后代选择器 h1 em {color:red;} // 只对 h1 元素中的 em 元素原创 2021-01-19 10:17:32 · 97 阅读 · 0 评论 -
css中的BFC、IFC、GFC、FFC
BFC(块级格式上下文)在面试的时候，关于对BFC的理解是一非常重点的内容，就来看看吧 BFC (Block Formatting Contexts )就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响 创建 BFC 的方式： body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex ov原创 2021-01-19 10:15:14 · 557 阅读 · 0 评论 -
右边宽度固定，左边自适应
1实现方式一:最简单的方式使用flex的方式实现 <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style> <body> <di原创 2021-01-19 10:09:48 · 185 阅读 · 0 评论 -
css的常见6种布局方式
下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局 流体布局 两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离） .left { floa原创 2021-01-19 10:01:09 · 4715 阅读 · 1 评论