CSS
文章平均质量分 77
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
CSS的伪类/元素选择器,我也想你知道!!!
说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)作者:小只前端攻城狮、掘金:小只前端攻城狮的主页、GitHub:P-J27、CSDN:PJ想做前端攻城狮著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。场景引入前端攻城狮们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。这些在真实场景上出现的...原创 2021-09-08 11:19:26 · 492 阅读 · 20 评论 -
☀️详解Flex布局,从理论到案例实践(二)
前言上一篇说到了容器属性,本文就接着来讲项目属性。上一篇传送门如何理解容器属性和项目属性?容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li。ul这个容器里面放了很多li项目。我是这么来理解的。好了,言归正传,xdm准备好了么?项目属性order取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。flex-grow取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。假..原创 2021-08-07 14:55:56 · 418 阅读 · 27 评论 -
☀️详解Flex布局,从理论到案例实践(一)
前言最开始接触flex布局,就是在接触居中布局时,看见 justify-content:center与align-items:center。完全看不懂。于是就去学flex。我想除了我之外的大部分人,也都是在被flex垂直水平居中方式所惊艳后才对其有所了解,以至于在日常开发中对于flex的使用,也确实更偏向于元素对齐方式的使用。这里我就想做一个系列来好好的讲一讲flex布局。Flex布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。..原创 2021-08-05 17:45:37 · 383 阅读 · 35 评论 -
关于overflow:hidden实现的这些功能你都知道了么?溢出隐藏、清除浮动、解决外边距塌陷...
简介overflow:hidden主要有三大作用:溢出隐藏、清除浮动、解决外边距塌陷溢出隐藏给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。<!DOCTYPE html><html lang="en"><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=原创 2021-04-12 20:20:54 · 415 阅读 · 0 评论 -
webpack-less文件的处理
官方文档传送门继续在官方中查找,我们会找到less-loader相关的使用说明首先,还是需要安装对应的loader注意:我们这里还安装了less,因为webpack会使用less对less文件进行编译npm install --save-dev less less-loader其次,修改对应的配置文件添加一个rules选项,用于处理.less文件使用对象(Object)的形式传递 options 给 Less。module.exports = { module.原创 2021-03-30 00:55:31 · 873 阅读 · 0 评论 -
webpack中使用的css文件的配置
什么是loader?webpack关于loader的文档https://webpack.docschina.org/loaders/#stylingCSS文件处理准备工作开始打包css-loader作用:·载 CSS 文件并解析 import 的 CSS 文件,最终返回 CSS 代码npm install --save-dev css-loaderstyle-loader作用:将模块导出的内容作为样式并添加到 DOM 中...原创 2021-03-30 00:37:01 · 528 阅读 · 0 评论 -
CSS基础
前言之前假期累积的CSS学习笔记终于有时间整理发出来了,本篇文章着重梳理之前所学的CSS基础知识点,由于都是基础就不拆分发出来了,就一篇汇总,有着自己的总结,方便以后的复习,也希望对大家有帮助。????????pink老师教程传送门接下一篇 HTML和CSS进阶CSS构造块「1. HTML的局限性」HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。操作html属性不方便HTML里面添加样式带来的是无尽的臃肿和繁琐「2. C原创 2021-02-24 10:49:56 · 1096 阅读 · 0 评论 -
HTML与CSS进阶
查漏补缺」HTML与CSS进阶前言本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容,CSS3方面介绍动画及转换。H5新增内容「1. 什么是HTML5」定义:HTML5定义了HTML标准的最新版本,是对HTML的第五次重大修改,号称下一代的HTML。两个概念:是一个新版本的HTML语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指:HTML5、CSS3、JavaScript,这也是广义上的HTML5。「2. HT...原创 2021-02-24 09:40:39 · 1378 阅读 · 0 评论