![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 87
xiaoLiang o
一个人必须不停地写作,才能不被茫茫人海淹没。
展开
-
CSS知识点汇总(十一)--回流&重绘
当我们对 DOM 的修改导致了样式的变化(color或background-color),却并未影响其几何属性时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式,这里就仅仅触发了重绘。当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性,然后再将计算的结果绘制出来。在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局发生改变。触发回流一定会触发重绘。原创 2023-06-29 17:08:52 · 650 阅读 · 0 评论 -
CSS知识点汇总(十)--移动端适配
rem(font size of the root element)是指相对于根元素的字体大小的单位,如果我们设置 html 的 font-size 为 16px,则如果需要设置元素字体大小为 16px,则写为 1rem。设置 viewport 的 width 为 device-width,改变浏览器 viewport(布局视口和视觉视口)的默认宽度为理想视口宽度,从而使得用户可以在理想视口内看到完整的布局视口的内容。页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸,这个代价有点高;原创 2023-06-29 16:50:11 · 1803 阅读 · 0 评论 -
CSS知识点汇总(九)--BFC
常见的文档流其实分为定位流、浮动流、普通流三种。原创 2023-06-29 16:00:40 · 585 阅读 · 0 评论 -
CSS知识点汇总(八)--Flexbox
浏览器根据这个属性,计算主轴是否有多余空间,默认值为auto,即项目的本来大小,如设置了width则元素尺寸由width/height决定(主轴方向),没有设置则由内容决定。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,也是比较难懂的一个复合属性。设置的是元素在主轴上的初始尺寸,所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。默认情况是不换行,但这里也不会任由元素直接溢出容器,会涉及到元素的弹性伸缩。原创 2023-06-29 15:44:55 · 562 阅读 · 0 评论 -
CSS知识点汇总(七)--响应式设计
响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Content is like water”- 同时适配PC + 平板 + 手机等- 标签导航在接近手持终端设备时改变为经典的抽屉式导航- 网站的布局会根据视口来调整模块的大小和位置。原创 2023-06-29 15:08:55 · 545 阅读 · 0 评论 -
CSS知识点汇总(六)--垂直居中&动画实现方式
你可以 transition: 值1,值2,值3,值4 这样写,也可以:transition-property: 值1;逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画在 CSS3 中是由属性keyframes来完成逐帧动画的。因为 SVG 中保存的是点、线、面的信息,与分辨率和图形大小无关,只是跟图像的复杂程度有关,所以图像文件所占的存储空间通常会比 png 小。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。原创 2023-06-29 14:24:07 · 884 阅读 · 0 评论 -
CSS知识点汇总(五)--文本对齐&脱离文档流
什么是 Fouc(文档样式短暂失效)?在引用 css 的过程中,如果方法不当或者位置引用不对,会导致某些页面在 windows 下的 ie 出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称 FOCU。使用 import 方法导入样式表将样式表放在页面底部有几个样式表,放在 html 结构的不同位置当样式表晚于结构性 html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。原创 2023-06-29 11:38:10 · 1251 阅读 · 0 评论 -
CSS知识点汇总(四)--CSS优化方法&垂直居中&雪碧图
但 li 内的字符间隔也会被设置,需要将 li 内的字符间隔设为默认。行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是 100%,行内元素默认 100%宽度占据一行。浏览器的默认行为是把 inline 元素间的空白字符(空格换行 tab)渲染成一个空格,也就是我们上面的代码。换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度。内的字符尺寸设为 0,将下面样式放入样式表,就可以解决了.,但是。全部写在一排,空格占一个字符的宽度,直接将。原创 2023-06-29 11:05:27 · 216 阅读 · 0 评论 -
CSS知识点汇总(三)--定位&伪类&移动端1px&CSS布局
px 和 em 都是长度单位,区别是,px 的值是固定的,指定是多少就是多少,计算比较容易。em 得值不是固定的,并且 em 会继承父级元素的字体大小。浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0. 75em, 10px=0. 625em。生成相对定位的元素怒,相对于其在普通流中的位置进行定位。生成绝对定位的元素,相对于浏览器窗口进行定位的。默认值,没有定位,元素出现在正常的流中。CSS3 border-image 属性。fixed (老IE不支持)原创 2023-06-28 18:43:17 · 624 阅读 · 0 评论 -
CSS知识点汇总(二)--选择器&外边距等
外边距重叠就是 margin-collapse。在 CSS 当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。两个相邻的外边距都是正数时,折叠结果取两者之间较大的。两个相邻的外边距都是负数时,折叠结果取两者绝对值的较大的。两个外边距一正一负时,折叠结果取两者相加之和。原创 2023-06-28 17:24:25 · 601 阅读 · 0 评论 -
CSS知识点汇总(一)--盒模型&清除浮动&隐藏元素的方法等
两种盒子模型:IE盒模型(border-box)、W3C标准盒模型(content-box)盒模型: 分为内容(content)、填充(padding)、边界(margin)、 边框(border)四个部分;IE盒模型和W3C标准盒模型的区别:(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding(2)IE盒模型:属性width,height包含content、border和padding,指的是content。原创 2023-06-28 17:01:45 · 168 阅读 · 0 评论 -
CSS开发技巧——行为技巧
CSS开发技巧原创 2023-02-21 17:08:58 · 845 阅读 · 0 评论 -
CSS开发技巧——布局技巧
CSS开发技巧——布局技巧使用vw定制rem自适应布局移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制场景: rem页面布局不兼容低版本移动端系统// 基于 UI宽度为750px DPR=2的页面html { fongt-size:calc(100vw / 7.5)}使用:nth-child()选择指定元素通过 :th-child()筛选指定的元素设置样式场景:表格着色、边界元素排版(原创 2021-07-13 11:42:43 · 136 阅读 · 0 评论 -
CSS的外边距margin
CSS的外边距marginmargin是盒模型比较特殊的属性,设置外边距margin会在元素外创建额外的空白,这里的空白不能放其他的元素,且该区域中可以看到父元素的背景。外边距可以应用到行内元素,上下外边距对行高没有任何影响。但由于上下外边距实际上是透明的,所有无任何的视觉效果,左外边距应用到元素开始处,右外边距应用到元素结束处。margin值应用于所有元素,无继承性,设置百分数是相对于包含块的width。对于普通元素来说,包含块是块级父级元素;对于定位元素来说,包含块是定位父级。所以,普通元素的ma原创 2021-06-18 14:54:53 · 345 阅读 · 0 评论 -
三栏式布局详解(代码+图解)
三栏式布局三栏式布局就是两边固定,中间自适应。三栏式布局实现方法有很多,包括:流体布局BFC三栏布局双飞翼布局圣杯布局Flex布局Table布局绝对定位布局网格布局流体布局左侧向左浮动、右侧向右浮动,最后渲染中间实现;最后渲染中间也就意味着在html中内容div写在最后,并设置中间模块的 margin 值使中间模块宽度自适应 缺点就是主要内容无法最先加载,当页面内...原创 2019-09-02 17:17:28 · 2331 阅读 · 0 评论 -
CSS3之盒子模型详解
CSS3之盒子模型详解1、什么是盒子模型?CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。在CSS中盒模型被分为两种:第 一种 是 W3C的标准模型,另一种 是IE的传统模型(也叫怪异盒模型)。2、W3C 的标准...原创 2019-06-30 16:36:28 · 784 阅读 · 0 评论 -
css的各种居中方法
css的各种居中方法css的居中主要分为水平居中和垂直居中。水平居中水平居中可分为行内元素水平居中和块级元素水平居中。1. 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:center即可实现。<!DOCTYPE html><html lang="en"><head> <...原创 2019-08-30 19:12:23 · 266 阅读 · 0 评论