CSS
文章平均质量分 72
CSS Less
不头秃的码农
愿你以渺小启程,以伟大结尾
展开
-
border-radius 构建规则讲解 及 50% 和 100% 的异同
参考:MDNborder-radius1. 用途:为边框设置圆角,若无边框,则会作用到背景上。2. 设置原则:若为一个值,则用其为半径构建圆形,这个圆与边框的交集形成圆角效果。 若为两个值,则用两个值分别为半长轴、半短轴构建椭圆,这个圆与边框的交集形成圆角效果。3. radius的值是百分比,就相当于盒子的宽度和高度的百分比。例1 盒子宽高都为100px。border-top-left-radius:50% 就相当于用50px作为半径构建圆形,此圆形与上左边框的交集,形成圆..原创 2021-03-09 17:37:23 · 5838 阅读 · 2 评论 -
面试题:css 实现一个三角形——必会篇,你值得拥有
要点:div的宽高都设置为0,border设置很大,然后调整每条边的颜色即可 !!!<style> #box{ width: 0px; height: 0px; border: 100px solid; border-top-color: transparent; border-bottom-color: teal; border-left-color: transparent;原创 2020-10-24 22:05:58 · 948 阅读 · 0 评论 -
浏览器的重排与重绘是什么意思?
为了理解重排与重绘,我们首先需要了解一点浏览器渲染的基础知识 ~网页生成分为五步:1. HTML 被 HTML 解析器解析成 DOM 树2. CSS 被 CSS 解析器解析成 CSSOM 树3. 结合 DOM 树和 CSSOM 树,生成一颗渲染树(Render Tree)4. 将所有渲染树的所有子节点进行平面合成,生成布局(flow) -- 重排(回流)5. 将布局绘制(paint)在屏幕上 -- 重绘其中 4 5 步是最耗时的,这两步就是我们常说的渲染网...原创 2020-08-06 21:47:16 · 3206 阅读 · 1 评论 -
盒子水平垂直居中五大方案_一个200*200的div在不同分辨率屏幕上下左右居中
方法一:margin 取一半长度的负值div{ width: 200px; height: 200px; background-color: pink; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px;}方法二:translate 2D 转换div{ width: 200px; height: 20原创 2020-08-06 17:46:42 · 2459 阅读 · 0 评论 -
响应式布局必懂知识_五分钟教会你响应式布局
第一:正确理解响应式布局第二:响应式设计基本步骤第三:响应式设计注意事项第四:响应式布局实现原理第一:正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端都做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端,由于终端分辨率不同,所以你.原创 2020-08-05 21:12:04 · 3649 阅读 · 1 评论