![](https://img-blog.csdnimg.cn/20200406105410240.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css3学习笔记
文章平均质量分 68
个人学习笔记,仅做参考,勿做商用
程序员的脱发之路
在脱发的路上越走越远
展开
-
前端修改浏览器记住密码时输入框背景样式
前端修改浏览器记住密码时输入框背景样式。原创 2022-09-02 14:47:04 · 716 阅读 · 0 评论 -
解决flex-direction: column 之后元素宽度自动变为100%
我们知道在flex中align-self和align-items的作用差不多,不过align-self是设置子元素自己的对齐方式,而align-items是设置所有子元素的对其方式。当我们设置父元素flex-direction为column后,他的子元素如果我们没有设置具体宽度(可能我们希望子元素宽度由内容撑开),这时就会发现,所有的子元素宽度默认是100%了。,也就是当我们不设置子元素的宽度时,它就会拉伸子元素填充满父元素。设置除auto和stretch之外的值就行。)而stretch的作用是。...原创 2022-07-28 11:34:09 · 5225 阅读 · 0 评论 -
前端超出换行-white-space
这里写目录标题一、属性介绍1. 属性值二、具体使用1. normal2. nowrap3. pre4. pre-wrap5. pre-line三、文本换行案例一、属性介绍white-space 属性设置处理元素内的空白-Space(空格)、Enter(回车)、Tab(制表符)我们在开发中应该知道,在div中无论我们敲多少空格和回车,显示在页面上的都会是一个空格。那么空格和回车具体应该怎么显示?这就是white-space 属性存在的意义注:当前文章只使用中文文本举例,英文或者数字文本还受word-原创 2022-04-24 10:46:53 · 5440 阅读 · 0 评论 -
webstorm使用postcss的Autoprefixer模块解决css浏览器兼容问题
使用postcss的Autoprefixer模块解决css浏览器兼容问题一、插件安装二、具体配置三、使用一、插件安装1、安装Autoprefixer打开cmd控制台,输入下面一行npm命令,安装Autoprefixer模块:-g是全局安装,如果不加会安装在当前目录。npm install autoprefixer -g2、安装postcss-cliAutoprefixer其实是postcss的插件npm install postcss-cli -g3、安装 postcssnpm ins原创 2020-12-28 16:50:50 · 608 阅读 · 3 评论 -
css波纹特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } bod...原创 2020-04-08 16:29:52 · 694 阅读 · 0 评论 -
flex弹性布局
文章目录#1.flex介绍Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。#2.容器属性2.1 flex-direction属性:决定主轴的方向.box { flex-direction: row | row-reverse | column | column-reverse;}row(默认值):...原创 2020-04-08 11:25:13 · 100 阅读 · 0 评论 -
css小项目1
这个css小项目是我实习期间师傅给我的第一个任务,网页图片如下我主要是用css实现,也可以使用js或者jquery之类,仅是我个人想法主要代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...原创 2020-04-07 17:11:11 · 618 阅读 · 0 评论