随笔分类 -  CSS

前端工程化中Less第三方库中@Import的“~”和“@”用法
摘要：在前端工程化开发中经常会用到less第三方css库，其中@import指令中的~符号和@符号用于指定模块化路径，常见于Webpack等构建工具中。下面介绍使用方法： 路径解析规则： ~符号：表示模块请求，构建工具会将其解析为node_modules目录或配置的别名路径 。 ‌ @符号：通常指向项目源 阅读全文
posted @ 2025-11-07 11:22 消逝的风i 阅读(84) 评论(0) 推荐(0)
前端常见布局之圣杯布局及双飞翼布局
摘要：在前端开发中，要实现一个布局：三列布局——左右列宽度固定，中间列内容优先渲染且中间列宽度自适应一般有两种实现方式，圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wing Layout）。两者都是用来实现三列布局左右列固定宽度、中间列自适应并且中间列在文档流中优先渲染。以下 阅读全文
posted @ 2025-03-29 22:05 消逝的风i 阅读(510) 评论(0) 推荐(0)
css移动端布局单位介绍之rem
摘要：本文主要写给刚接触移动端开发的同鞋们。 首先先将几个主要概念讲一下； 什么是移动端？ 移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。 什么是布局？ 前端开发中布局是将主要的html结构布置好。 rem是什么？ rem是一种长度单位，是而且仅 阅读全文
posted @ 2020-07-29 23:15 消逝的风i 阅读(3077) 评论(0) 推荐(0)
CSS几种简单方法实现文字竖向排版
摘要：下面介绍几种使用Css实现文字竖向排版的方法： 1.一个句子的竖向排列 如图： <!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { width: 20px; m 阅读全文
posted @ 2020-07-29 22:18 消逝的风i 阅读(19866) 评论(0) 推荐(0)
CSS中使用text-align:justify让内容两端对齐并兼容IE及主流浏览器的方法
摘要：我们做登录页面时有时需要用户名和密码俩端对齐，这样显得美观一点，下面介绍一下几种实现方法： 一、使用 text-align属性（只兼容谷歌、火狐浏览器）： html <ul> <li>密码</li> <li>用户名</li> <li>身份证号</li> </ul> css ul li{ width: 阅读全文
posted @ 2020-07-29 22:12 消逝的风i 阅读(1092) 评论(0) 推荐(0)
Css中水平垂直居中的几种解决方法
摘要：在控制元素的水平、垂直居中问题时，有很多种解决方法，下面介绍几种解决办法： 水平垂直居中： 第一种：css3的transform .ele{// 父元素 /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*left 50%*/ left: 阅读全文
posted @ 2020-07-28 20:55 消逝的风i 阅读(169) 评论(0) 推荐(0)
解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）
摘要：移动端布局有很多种，这里我们最常使用到rem+百分比的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。页面在加载未完成前会出现瞬间错乱的现象，虽然时间不 阅读全文
posted @ 2020-07-27 23:52 消逝的风i 阅读(1563) 评论(0) 推荐(0)
CSS flex 布局快速入门
摘要：以前已经学过flex了，一直没做笔记，现在做下笔记再回忆下。 首先，flex布局的迷之属性们，如果一知半解，机械记忆的话，那不到半个月基本忘光光。先感受一下这12个flex布局属性，是不是很“迷”人。 父容器属性 flex-flow flex-direction flex-wrap justify- 阅读全文
posted @ 2019-06-28 08:41 消逝的风i 阅读(707) 评论(0) 推荐(0)
CSS Grid 布局完全指南(图解 Grid 详细教程)
摘要：CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项 阅读全文
posted @ 2019-02-15 20:08 消逝的风i 阅读(7673) 评论(5) 推荐(3)
CSS-对于IE的兼容问题处理
摘要：css兼容问题 兼容问题 1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定 line-height 。确保所有文字都有默认的 lin 阅读全文
posted @ 2018-07-29 09:17 消逝的风i 阅读(6857) 评论(0) 推荐(0)
CSS中border和outline的区别
摘要：border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为：border:1ox solid #ccc; outline: outline-width:1px; outline-style:solid; outline 阅读全文
posted @ 2018-07-29 09:03 消逝的风i 阅读(568) 评论(0) 推荐(0)
CSS中list-style详解
摘要：取消默认的圆点和序号可以这样写list-style:none;, list的属性如下: list-style-type:square;//正方形 list-style-position:inside;//inside,outside(项目符号内置还是外置) list-style-image:url( 阅读全文
posted @ 2018-07-29 08:45 消逝的风i 阅读(1589) 评论(0) 推荐(0)
css设置input获得焦点的样式
摘要：input:focus{ 样式; } 这样就ok 阅读全文
posted @ 2018-07-17 12:04 消逝的风i 阅读(2725) 评论(0) 推荐(0)