随笔分类 - 06-01. CSS
摘要：第一种 关键属性：aspect-ratio: 2/1 例子：让元素保持 宽/高 为 2比1 .box { aspect-ratio: 2/1; } 第二种 关键属性：width: 100%; padding-top: 100%; 例子： .img_box { width : 100%; paddin
阅读全文
摘要：文章一开始推荐一个相关技术事项的非常牛的网站http://www.species-in-pieces.com/慢慢欣赏 animation 基础信息 默认值： none 0 ease 0 1 normal 继承性： no 版本： CSS3 JavaScript 语法： object.style.an
阅读全文
摘要：要想给元素设置z-index样式，必须先让它变成定位元素，即要设置position属性，值包括relative，absolute，fixed 如果不想给本元素设置，那么可以给他的父元素设置position属性，效果是一样的
阅读全文
摘要：浮动 使元素浮动和绝对定位，都会脱离文档流 使元素浮动： 设置 float 属性，不为 none。 虽然脱离了文档流但是仍然会占据位置。 设置 position: absolute;。脱离文档流并且不占位。 浮动的好处 文字环绕效果 双飞翼布局 ... 清除浮动 清除浮动的方式有很多，这里就介绍些我
阅读全文
摘要：区别 1. border 占用空间，outline 不占用空间，不会影响元素的尺寸和位置。 2. border 可应用于几乎所有有形的 html 元素，而 outline 是针对链接、表单控件和 ImageMap 等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 f
阅读全文
摘要：css 常用的长度单位： em：是相当于父级元素或者自身的 font-size 值，如果自身有 font-size 优先走自身；一个中文字 = 2em，一个英文字符 = 1em。 rem：是一个像素单位（root（根 --> html）em）；是相对于页面 HTML 的 font-size 1rem
阅读全文
摘要：transform: 变形。改变 语法：transform: none|transform-functions; 旋转 rotate 2D 旋转：rotate(angle) 顺时针旋转给定的角度，允许负值 rotate(30deg) 3D 旋转：rotate3d(x,y,z,angle) 沿着 X
阅读全文
摘要：所有属性 值说明CSS background-color 指定要使用的背景颜色 1 background-position 指定背景图像的位置 1 background-size 指定背景图片的大小 3 background-repeat 指定如何重复背景图像 1 background-origin
阅读全文
摘要：参考W3C手册：http://www.w3school.com.cn/cssref/css_selectors.asp css选择器分为简单选择器，伪元素选择器和组合选择器。 简单选择器又分为：标签选择器（元素选择器），类选择器，ID选择器，通配符选择器，属性选择器和伪类选择器。 css中权重最高的
阅读全文
摘要：能用 HTML 描述的效果都可以找到对应的 CSS 来表达 效果 HTML CSS 上划线 null text-decoration: overline 中划线 <del>￥59</del> text-decoration: line-through 下划线 <u>这是下划线</u> text-de
阅读全文
摘要：问题1：父元素没有被子元素撑开？ 解决：保证父元素没有 宽度/高度 限制，溢出隐藏，还不行的话，给父元素加浮动：float:left 溢出生成滚动条：overflow-x: scroll overflow-y: scroll 改变滚动条的样式：xxx::-webkit-scrollbar{...}
阅读全文
摘要：@常用字体对应表： HTML，CSS，font-family：中文字体的英文名称 宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB
阅读全文
摘要：小白上手： 1. 简单的排版，调试一下属性值就行了。 .box { display: flex; justify-content: space-evenly; //左右对齐方式 flex-flow: wrap-reverse; //排序方式、是否折行的综合属性。 } .item { flex: 1;
阅读全文
摘要：常用的几种鼠标样式： cursor: auto; // 光标 cursor: crosshair; // 十字 cursor: default; // 默认 cursor: e-resize; // 左右 cursor: help; // 箭头+小问号 cursor: move; // 移动，上下左
阅读全文
摘要：CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox
阅读全文
摘要：菜鸟教程网址链接： https://www.runoob.com/cssref/css-functions.html 函数 描述 css版本 attr() 返回选择元素的属性值。 2 calc() 允许计算 CSS 的属性值，比如动态计算长度值。 3 linear-gradient() 创建一个线性
阅读全文
摘要：一. 让图片（行内块元素）垂直居中： 1.在父级设置：行高 等于 高度，字体大小为0 line-height: 1rem; height: 1rem; font-size: 0; 2.图片自己设置： vertical-align: middle; Table 合并行了之后，需要文字居中，也可以使用。
阅读全文
摘要：visibility 对比 display 两者效果类似，用法一样，但 display 与 transition 之间有冲突，而 visibility 则不会。 style ：属性的 display 被隐藏的控件不再占用显示时占用的位置 visibility ：隐藏的控件仅仅是将控件设置成不可见了，
阅读全文
摘要：速食上手： <div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOO
阅读全文
摘要：单行文字变省略号： .box{ /* 1.固定宽度 */ width: 100px; /* 2.空白处理：不折行 */ white-space: nowrap;//<p> 中用: white-space:nowrap; /* 3.溢出隐藏 */ overflow: hidden; /* 4.文本超出
阅读全文
浙公网安备 33010602011771号