CSS-盒子四周阴影效果
摘要：CSS-盒子四周阴影效果 属性box-shadow, <style type="text/css"> .fei { margin-left: 230px; width: 100px; height: 100px; border: 1px solid #eee; /** 主要属性box-shadow
阅读全文
posted @ 2022-08-19 20:55
随笔分类 - CSS
CSS中16进制和透明度
摘要：CSS中16进制和透明度 透明度从00-FF，一共256个梯度 下面以黑色为例，标准黑色是#000000，透明度加在最后面，即#000000XX（XX代表透明度）；实际效果如下： <div class="fei" style="display: flex"> <div style="backgrou
阅读全文
posted @ 2022-03-02 10:48
svg简单使用
摘要：svg简单使用 利用直线画个长方形 <?xml version="1.0" encoding="UTF-8"?> <svg width="121px" height="32px" viewBox="0 0 121 32" version="1.1" xmlns="http://www.w3.org/
阅读全文
posted @ 2022-01-29 16:45
CSS里不为人知的秘密(03)之常见小布局
摘要：CSS里不为人知的秘密(03)之常见小布局 01)CSS 上下布局 情景描述: 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度方案; 利用 flex 和 flex-grow 实现 <style> html, body { height: 100%; p
阅读全文
posted @ 2021-05-15 16:32
Chrome 和 FireFox 查看伪类:active,:hover,:focus样式
摘要：Chrome 和 FireFox 查看伪类:active,:hover,:focus样式 Chrome 控制台查看样式 或者选中 :hov Firefox 控制台查看样式 或者选中 :hov
阅读全文
posted @ 2021-05-06 10:12
为什么需要清除浮动float,及解决办法
摘要：为什么需要清除浮动float,及解决办法 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属 于文档流中的普通流，当元素浮动之后， 不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮 动框不存在一样的布局模式。当包含框 的高度小于浮动框的时
阅读全文
posted @ 2021-04-30 17:40
CSS里不为人知的秘密(02)之常见属性使用
摘要：CSS里不为人知的秘密(02)之常见属性使用 01) vertical-align垂直对齐 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 针对 inline-block 内联块元素的时候,需要一个参考对象(必须2个元素) 内联块元素水平垂直居中 verti
阅读全文
posted @ 2021-04-27 19:23
JavaScript 中放大缩小transform: scale(1);
摘要：JavaScript 中放大缩小transform: scale(1); 被scale放大的元素,看起来很大,但是实际占据的位置还是原来的大小 <style> .da-fei { width: 200px; height: 200px; background-color: #c0c0c0; outl
阅读全文
posted @ 2020-09-24 10:50
特殊字符Unicode编码 -HTML -CSS -JavaScript
摘要：特殊字符Unicode编码 -HTML -CSS -JavaScript 使用demo: 在每个li后面添加一个星星 <style> li:after { content: "\2605"; } </style> <span>在每个li后面添加一个星星</span> <ul> <li>飞飞</li>
阅读全文
posted @ 2020-08-28 10:40
CSS里不为人知的秘密(01)之常见属性使用
摘要：CSS里不为人知的秘密(01)之常见属性使用 01) border 和 outline 区别 轮廓不占据空间，绘制于元素内容周围。根据规范，轮廓通常是矩形，但也可以是非矩形的 div{ outline:3px solid red;/* 查看网页布局的时候很方便 */} outline属性 02) c
阅读全文
posted @ 2020-07-19 16:10
css 属性值 display
摘要：css 属性值 display /* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-block; */
阅读全文
posted @ 2020-07-19 14:22
ul 元素引发的思考 margin-inline-start 和 margin-block-start
摘要：ul 元素引发的思考 margin-inline-start 和 margin-block-start 兼容文字阅读方向 margin-inline-start <style> .rtl-tb { direction: rtl; /*margin-block-start: 50px; */ /* 文
阅读全文
posted @ 2020-07-03 11:03
CSS 权重和优先级
摘要：CSS 权重和优先级 权重从高到低 !important 内联样式[ 行内样式 ] id选择器 类选择器,属性选择器,伪类 元素选择器,伪元素
阅读全文
posted @ 2020-07-03 10:00
MDN站点 使用技巧
摘要：MDN站点 使用技巧 01) 查看某个css的属性 比如查看 font-size 的是否继承属性 其他: 官网地址 MDN web Docs
阅读全文
posted @ 2020-07-03 09:54
css 选择器
摘要：css 选择器 项目和实际中使用频率高的 后代选择器 和 子代选择器 和 伪元素 01) 后代选择器 (以空格分隔) <!-- 后代选择器(以空格分隔) 选择div 元素内的所有p 元素 中的 所有span 元素 --> <style> div p span{ color: #ff0000; } <
阅读全文
posted @ 2020-06-21 01:23
ant-design-vue1.3.7 和 vue-draggable-resizable2.2.0 之间引起的表格拖拽问题
摘要：ant-design-vue1.3.7 和 vue-draggable-resizable2.2.0 之间引起的表格拖拽问题 现象:拖拽的时候,会覆盖掉紧挨着的列的数据 [ 注意版本 ] 01) 解决方案一: 升级 ant-design-vue 到1.4版本以上,官网在1.4版本的时候解决这个问题,
阅读全文
posted @ 2020-06-10 09:09
css3自适应关键字: max-content
摘要：css3自适应关键字: max-content 01) max-content width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行 <style> .outer{ width:-webkit-max-content; wi
阅读全文
posted @ 2020-06-09 20:01
css 之 text-align 文本对齐
摘要：css 之 text-align 文本对齐 <style> .box{ background-color: #00ff00; text-align: center; /** 让inner中内容居中对齐,不是对inner的div居中*/ } .inner{ background-color: #9b5
阅读全文
posted @ 2020-06-07 23:28
ubuntu 命令窗口背景颜色 #300a24 _fei
摘要：ubuntu 命令窗口背景颜色 #300a24 HTML中常用颜色 01) HTML中常用颜色 #c0c0c0 silver（银） 02) HTML中常用颜色 #808080 gray[*]（灰） 03) HTML中常用颜色 #eee8aa palegoldenrod（灰菊黄） 04) HTML中常
阅读全文
posted @ 2019-11-20 17:37
