随笔分类 -  CSS

一行代码实现页面全屏黑白
摘要：1、实现页面全屏黑白的示例 百度 今日头条 阿里 腾讯 从上面的实现方式可以看到，关键技术是利用了 CSS 的 filter 技术，也就是 CSS 的滤镜功能。 2、CSS中的filter 我们看看 MDN 关于 filter 的描述： The filter CSS property applies 阅读全文
posted @ 2022-12-05 00:19 wenxuehai 阅读(706) 评论(0) 推荐(0)
关于字体侵权问题
摘要：1、font-family 属性的字体侵权问题 font-family 属于前端css属性中最基础的一个属性，用来定义字体名称。当我们打开一个网站，浏览器会读取 font-family 中的字体名称，并去检索用户电脑系统中的字体，如果有的话就显示，没有的话检索下一个。所以，如果前端代码中写了字体比如 阅读全文
posted @ 2020-08-16 16:24 wenxuehai 阅读(2493) 评论(0) 推荐(0)
CSS中的line-height和vertical-height
摘要：1、line-height（行间距） line-height 设置的是行高，指的是段落中每行文字间的距离。一般来说，将 line-height 设置为 div 元素的高度，则 div 内部的文字将会垂直居中显示。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间 阅读全文
posted @ 2020-04-27 14:37 wenxuehai 阅读(417) 评论(0) 推荐(0)
CSS中的复合属性
摘要：1、background 属性 background 属性负责给盒子设置背景图片和颜色，它是一个复合属性，可以分解成以下几个设置项： background-color 设置背景颜色 background-image 设置背景图片地址 background-repeat 设置背景图片如何重复平铺（re 阅读全文
posted @ 2020-03-03 10:37 wenxuehai 阅读(1973) 评论(0) 推荐(0)
CSS小技巧
摘要：1、行元素在块级元素中浮动，块级元素无法实现居中 比如说：li 元素在 ul 元素中浮动，ul 元素是块级元素，宽度为页面的宽度，难以实现 li 元素在 ul 中居中对齐。 可以将 ul 元素设为 inline-block，宽度为 auto，这样ul元素的宽度就会是 li 元素宽度的总和，并且将 u 阅读全文
posted @ 2020-01-22 10:00 wenxuehai 阅读(388) 评论(0) 推荐(0)
CSS中的自适应单位vw、vh、vmin、vmax
摘要：1、vw、vh、vmin、vmax各单位的意义 上面的自适应单位可以统称为视口单位。 可以先了解一下视口指的是什么？ 在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal 阅读全文
posted @ 2019-10-09 11:05 wenxuehai 阅读(1524) 评论(0) 推荐(0)
CSS中的 , > + ~
摘要：1、群组选择器（','） /* 表示既h1，又h2 */ h1, h2 { color: red; } 2、后代选择器（空格） /* 表示 h1 下面的所有 span 元素，不管是否以 h1 为直接父元素 */ h1 span {} 3、子元素选择器（'>'） 选择直接子元素 /* 表示 h1 下面 阅读全文
posted @ 2019-09-02 22:20 wenxuehai 阅读(8186) 评论(0) 推荐(2)
CSS中浮动属性float及清除浮动
摘要：1、float属性 CSS 的 Float（浮动），会使元素向左或向右移动，由于浮动的元素会脱离文档流，所以它后面的元素会重新排列。 浮动元素之后的那些元素将会围绕它，而浮动元素之前的元素将不会受到影响。比如如果一个图像向右浮动，下面的文本流将环绕在它左边。 <div> <p>哈哈哈哈哈哈哈哈哈哈哈 阅读全文
posted @ 2019-03-31 14:48 wenxuehai 阅读(554) 评论(0) 推荐(0)
CSS中属性百分比的基准点
摘要：1、属性百分比的基准点 1.1、基于包含块 以下的关于包含块（含块）的概念，不能简单地理解成是父元素。 如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 不是static的父元素，比如为absolute，relative，或者 fix 阅读全文
posted @ 2019-03-26 18:10 wenxuehai 阅读(918) 评论(0) 推荐(0)
CSS中的单位
摘要：1、px 绝对单位，页面按精确像素展示 2、em em 是相对长度单位，是相对于字体大小这个属性来计算的。参考的是父节点字体的大小，1 em 也就是父节点字体大小是多少，则1 em就是多少。如果自身定义了字体大小 font-size 则参考自身的字体大小，如果父节点和本身都没有定义字体大小，则参考浏 阅读全文
posted @ 2019-03-25 13:19 wenxuehai 阅读(292) 评论(0) 推荐(0)
css居中问题
摘要：1、水平居中 1.1、行内元素直接水平居中（text-align） 只要父元素设置该属性值，所有的行内子元素都会水平居中。且该属性有继承性 2、确定宽度的块级元素实现水平居中 2.1、自动边距实现水平居中（margin） 具有宽度的块级元素设置上面属性后就会在父元素中左右居中 2.2、绝对定位和负边 阅读全文
posted @ 2019-03-11 21:32 wenxuehai 阅读(278) 评论(0) 推荐(0)
CSS中的position属性
摘要：1、position 属性 position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法，共有4个属性值，分别是 static、fixed、relative、absolute、sticky。 1.1、static 属性值（默认定位，占据空间） static定位是 HTML 元素的默认值， 阅读全文
posted @ 2019-03-07 12:47 wenxuehai 阅读(472) 评论(0) 推荐(0)
CSS中的flex布局
摘要：1、flex 布局的概念 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，行内元素也可以通过 inline-flex 使属性值用 Flex 布局。 inline-flex 和 inline-block 一样，对设置 阅读全文
posted @ 2019-03-06 19:02 wenxuehai 阅读(25204) 评论(0) 推荐(1)
CSS中的盒模型
摘要：1、盒模型的概念 CSS 盒子模型又称框模型，包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素 1.1、标准盒模型和 IE 盒模型 盒模型是有两种标准的，标准盒模型和 IE 盒模型 标准盒模型（box-sizing: content-bo 阅读全文
posted @ 2019-03-06 17:27 wenxuehai 阅读(364) 评论(0) 推荐(0)
CSS中的一些伪类
摘要：一、:nth-child 和 :nth-of-type （1）:nth-child() :nth-child(n) 选择器选取某任意一父元素的第 n 个子元素（ p:nth-child(n) 即选中任意父元素的第n个元素是p的元素 ） 示例：http://www.runoob.com/try/try 阅读全文
posted @ 2018-08-10 11:26 wenxuehai 阅读(241) 评论(0) 推荐(0)

//右下角添加目录