前端
文章平均质量分 68
君临_
怕输的人已经输了
展开
-
CSS | 水平垂直居中都有哪几种方式
我把一个子元素在父元素中水平垂直居中的实现方式分为三类,第一类是宽度已知,第二类是宽度未知,第三类是图片水平垂直居中。 第一类 宽度已知 第一种方式:采用绝对定位 原理 元素开启绝对定位后,水平方向和垂直方向分别要满足下列等式 水平方向:left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块内容区的宽度 垂直方向:top+margin-top+border-top.原创 2022-04-02 17:58:38 · 1113 阅读 · 0 评论 -
CSS | 关于Spirit
图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载。浏览器加载外部资源是按需加载的,用则加载,不用则不加载。 像一个按钮的三种状态,link会首先加载,而hover和active会在触发时才会加载。这样当link向hover切换时,hover向active切换时,由于图片的加载,会出现闪白的问题(只有浏览器第一次加载的时候会出现,之后加载会有缓存) 为解决这个问题,雪碧图应运而生。把按钮的三种状态图片放到一张图中,当link状态图首先加载的时候,会把其他状态的图片都加载完毕 雪碧图使用场景 静原创 2022-03-17 10:19:55 · 192 阅读 · 0 评论 -
css | 常用背景相关样式说明
开发中,常用的背景样式有下面几个: background-color background-image background-repeat background-size background-position background-clip background-origin background-attachment background背景的简写属性 话不多说,直奔主题。。。 background-color 作用:用于设置背景颜色 示例 代码 <!--HTML代码--> &l原创 2022-03-02 12:24:16 · 398 阅读 · 0 评论 -
css布局系列1——盒模型布局
明确基本概念 网页的布局类似于在一个大盒子中摆放各不相同的小盒子。在布局之前,首先要明确几个概念: 1. 块元素:在页面中独占一行,高度默认被内容(子元素)撑开,宽度默认为父元素的100%,也即auto(width和height的默认值不是0,而是auto)。 2. 内联(行内)元素:在页面中不独占一行,只占自身内容的大小,不能设置宽和高。 3. 文档流:网页是一个多层结构,一层摞着一层。我们通过屏幕看到的网页就是网页的最顶部,而文档流是最底下的一层。块元素和行内元素都摆放在文档流中(在不开启浮动、绝...原创 2020-12-17 03:39:37 · 458 阅读 · 0 评论