随笔分类 - CSS
摘要：flex布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width
阅读全文
摘要：图片设置模糊样式 .head-img{ width: 100%; height: 320rpx; /* 图片模糊效果 */ -webkit-filter:blur(20px); }
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：关于flex:1详解；https://blog.csdn.net/qq_40138556/article/details/103967529 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 CSS属性 flex
阅读全文
摘要：报错信息如下： Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API
阅读全文
摘要：问题一； 1.，display:flex;不会让容器本身取消它的块装的属性，但它的子元素会变成行内块的的属性 2.display: inline-flex;父级是变成行内块元素，他的子元素也是行内块元素，并且自动换行 <!DOCTYPE html> <html lang="en"> <head> <
阅读全文
摘要：问题；基线问题， 图片会和离得最近的图片基线对齐，图片的基线在图片底部，文字的基线在文字底部的上面一点点 只需要对文本设置顶部基线对齐即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vie
阅读全文
摘要：解决办法 使用disply:inline-flex, 子级开启了flex,对外是行内块元素， 对内是开启flex，也是行内块元素 <scroll-view class="navscroll" scroll-x="true"> <view class="b"> <view class="c"> <im
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：<view class="aa"> <view class="a"> <image class="b" src="https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png" mode=""></image> <text cl
阅读全文
摘要：提前声明：本文无需使用Node.js等工具 第一步，在插件处下载Easy LESS 第二步，在设置中进行配置设置（VScode左上角 文件 >首选项 >设置） 搜索栏中搜索LESS,在插件中找到Easy LESS,进行settings.json中编辑 我们看插件文档可知进如下配置 "less.com
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 9 .box1{ 10 width: 200px; 11 height: 100p
阅读全文
摘要：方法一，利用flex 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .outer{
阅读全文
摘要：一，下拉框靠近子元素 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 .a{
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style> 8 9 .a{ 10 height: 100px; 11 width: 250px; 12 background-co
阅读全文
摘要：一，高度塌陷 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
阅读全文
摘要：众所周知，less是一门css预处理语言，其他的类似还有scss、Stylus 等，和js相似度比较高的就是less了。话不多说，我们来看less的使用。 Node.js 环境中使用 Less ： npm install -g less > lessc styles.less styles.css
阅读全文
摘要：一，用flex的副轴来垂直居中对齐 1.副轴（由上到下）设置居中对齐（align-items: center;）即可 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</t
阅读全文
摘要：一、简要介绍# flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀 采用Flex布局的元素
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>像素</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background-
阅读全文