随笔分类 -  CSS 总结

上一页 1 2
记录 CSS 相关的基础知识
CSS实现垂直水平居中的五种方法
摘要：实例 See the Pen center middle by wmui (@wmui) on CodePen. 固定宽高的垂直水平居中 上面的例1和例2，是固定宽高的垂直水平居中，例1采用定位结合margin负值。例2巧妙的利用定位结合 。最后三个例子都是不固定宽高的垂直水平居中，上面五种方法中我 阅读全文
posted @ 2021-09-30 13:47 wmui 阅读(707) 评论(0) 推荐(0)
理解margin负值，实现经典布局
摘要：margin负值 block元素可设置四个方向的值，无论正负。 inline元素上下margin值无效，左右无论正负均有效 inline block元素，当 为`baseline`时，上下margin负值无效，其他情况正负均有效。 元素重叠 两个块级元素发生重叠，后面的元素能覆盖前面元素的背景，无法 阅读全文
posted @ 2021-09-30 13:47 wmui 阅读(77) 评论(0) 推荐(0)
CSS外边距属性，深入理解margin
摘要：margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距，外边距是透明的，默认值0。这是一个简写属性，属性值最多为4个，例如 ，分别表示上外边距、右外边距、下外边距、左外边距。属性值也可以是3个，例如 ，表示上外边距、左右 阅读全文
posted @ 2021-09-30 13:46 wmui 阅读(1350) 评论(0) 推荐(0)
CSS列表属性
摘要：list style type list style type表示定义列表标记的类型，默认值 表示一个实心圆点。一些常用的属性值： 无任何标记， 实心圆， 空心圆， 实心方块， 从1开始的数字(1,2,3等)， 以0开头的数字(01,02,03等), 小写英文字母（a, b, c等）, 大写英文字母 阅读全文
posted @ 2021-09-30 13:45 wmui 阅读(204) 评论(0) 推荐(0)
CSS字体属性
摘要：font family 该属性定义文本使用哪种字体，字体相关的属性都是有继承性的，所以通常只需要为body元素设置font family。上面的代码中写了很多字体，这是为了保证一种回退机制，如果用户的电脑根本没有第一种字体或者浏览器不支持第一种字体，那么浏览器就会使用第二种字体，以此类推直到找到一个 阅读全文
posted @ 2021-09-30 13:44 wmui 阅读(334) 评论(0) 推荐(0)
CSS内容生成介绍
摘要：quotes quotes定义嵌套引用类型，简单点说就是为内容添加引用符号，用什么符号完全自定义，它默认是有继承性的，属性值可以是 。 结果： q { quotes: "\"" "\"" "(" ")"; } 你好我的朋友 在上面的嵌套引用中， 表示外部引用的符号，转义后的双引号， 表示内部的嵌套内 阅读全文
posted @ 2021-09-30 13:44 wmui 阅读(92) 评论(0) 推荐(0)
CSS尺寸属性汇总
摘要：height 定义元素的高度，默认值auto，非 元素都可以直接定义高度，高度只包括内容区，不包括padding，border，margin的值，属性值可以是百分比，百分比是基于包含它的块级元素的高度，可以是CSS长度（如px，em，rem），可以使用 继承父元素的高度。 max height 定义 阅读全文
posted @ 2021-09-30 13:43 wmui 阅读(255) 评论(0) 推荐(0)
深入理解border-image
摘要：在CSS3中我认为border image算是一个比较复杂的属性，虽然平时用到的情况较少，但还是有必要深入学习下。 border image See the Pen border image by wmui (@wmui) on CodePen. border image用于定义带有背景图片的边框样 阅读全文
posted @ 2021-09-30 13:42 wmui 阅读(725) 评论(0) 推荐(0)
CSS背景属性汇总
摘要：background color See the Pen background by wmui (@wmui) on CodePen. 说明：该属性为元素设置背景色，填充区域包括内容区，内边距，边框。默认值 表示透明，属性值可以是颜色名字（如red），可以是十六进制表示（如 ff0000），可以用R 阅读全文
posted @ 2021-09-30 13:41 wmui 阅读(273) 评论(0) 推荐(0)
深入理解border-radius
摘要：圆角是CSS中一个很复杂的属性，彻底理解后可以创造出很多奇妙的效果，先看一个demo： See the Pen border radius by wmui (@wmui) on CodePen. 例1是正方形，例2是矩形，他们的圆角值都是50%，既然是百分比就有相对元素，其实百分比是相对于元素自身的 阅读全文
posted @ 2021-09-30 13:41 wmui 阅读(731) 评论(0) 推荐(0)
CSS动画属性汇总
摘要：@keyframes See the Pen keyframes by wmui (@wmui) on CodePen. 说明：@keyframes用于定义动画，其实动画原理很简单，就是不同的时刻改变css的样式，以百分比规定改变发生的时间，它有两个关键词即 和`to`,from等价于0&表示起始位 阅读全文
posted @ 2021-09-30 13:40 wmui 阅读(783) 评论(0) 推荐(0)
CSS选择器汇总
摘要：前言 工作中部分选择器总是忘记其具体的含义，这在开发项目时很影响效率，我始终相信每个选择器无论简单复杂，既然诞生了就必定有他的使命，虽然常用的选择器就那么几个就够用了，但系统的掌握所有的选择器还是很有必要的，特别是如果你想开发一个属于的UI框架时，会发现合理的使用选择器，可以大量减少类名的使用。以下 阅读全文
posted @ 2021-09-30 13:39 wmui 阅读(175) 评论(0) 推荐(0)

上一页 1 2