摘要:标签大集合语义化标签页面内锚点我跳跳到这里来可用于回到顶部功能。表格中表示行,和表示列。当超出时会自动换行。属性清除浮动通用方案实际上是添加了一个看不见的点号。
1.
里的 一定要放在第一行 ,如果放在了
我跳! ...跳到这里来!
可用于“回到顶部”功能。
5.标签一般要求写上alt属性6.HTML5中可以用标签插入视频,用标签插入音频
7.总记不住row表示行,column表示列。表格中tr表示行(table row),th和td(table data cell)表示列。
8.语义化的好处(1)SEO(Search Engine Optimization)搜索引擎优化
(2)提高可访问性,使盲人使用屏幕阅读器更好的访问。
(3)提高代码可读性,便于多人修改维护,提高开发效率。
> < ...
10.css引入
11.属性选择器伪类选择器: 一个冒号right
//css [disabled] { ... } input[type="text"] { ... } //属性值不加双引号也可以哎 [type=text] { ... } //关于是否需要使用引号:当属性值包含空格或者有特殊符号时,必须要使用引号 [class^="section"] { ... } //这样可以选中以class属性以"section"开头的元素,即上面的input 和 p
12.a标签上的伪类选择器顺序从上到下不能变:link visited hover active
13.li:nth-child(even) { ... } 或 li:nth-child(2n) { ... } 选中偶数项li元素
14.:not(p) 不包含p元素。
:not(.class-a) 不包含class值有class-a的元素。
15.::first-letter { ... } 第一个字母或汉字
16.::first-line { ... } 第一行
17.::before 和 ::after
p::before{ content: "before"; }//在元素前添加内容 p::after{ content: "after"; }//在元素后添加内容
18.::selection{ ... } 应用于被用户选中的内容的样式
19.兄弟选择器 h1+p { ... } 选中h1后面同级的紧邻着的一个p元素
20.多个兄弟选择器 h1~p { ... } 选中h1后面同级的所有p元素,不需要紧邻着
21.继承属性:color , font , text-align , list-style
22.非继承属性:background , border , position
如何从文档中知道当前属性是否可以继承?文档中Inherited为yes即为可以继承。
23.选择器优先级
https://jsfiddle.net/DarcyAn/... 奇怪,这个咋是伪元素选择器优先级比伪类的高呢?
注意伪类与类优先级相同,伪元素与标签优先级相同。
24.优先级最高: p { color: red !important; }
CSS文本25.font属性至少要设置font-size 和 font-family.
26.text-indent属性原本用于设置首行缩进,一般设置为2em,也可设置负值然后配合overflow: hidden;来达到隐藏文本的效果。
27.white-space:
nowrap不换行。
pre 完完整整保留了tab和空格,超出时也不会换行。
pre-wrap 保留了tab和空格。当超出时会自动换行。
28.word-wrap: break-word; 长单词超出时换行。属性名现由word-wrap改为overflow-wrap。
29.text-shadow: 1px 2px pink; 文字阴影:x轴偏移 y轴偏移 [阴影模糊半径]? [颜色]?。
30.text-overflow: clip | ellipsis;
一定要配合 overflow: hidden; white-space: nowrap; 同时服用。
盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline
31.margin合并(1)相邻元素的margin会合并
(2)父元素与子元素的margin会合并。(前提是父子元素之间没有padding、border和其他元素)
MDN外边距合并
圆角的水平半径是宽度的50%,垂直半径是高度的50%,所以是一个圆。
33.box-shadow: 4px 4px 3px 3px red可以只设置前两个值.
还可以设置 inset 内阴影,以及多阴影(用逗号隔开即可)。
CSS背景34.background-attachment: scroll | local ; 设置当内容滚动时,背景图片的状态。
scroll: 背景图不动。
local: 背景图随与内容一起滚动。
35.background-position: 20% 50%; 设置为百分比的值要特别注意。
上述语句意思是:x轴上图片的20%在容器的20%的位置,y轴上图片的50%在容器的50%的位置,看图:
如果这样设置:background-position: 50% 50%;, 就居中了。也等于background-position: center center;
可以设置负值,这在sprite雪碧图中经常用到。
36.线性渐变 linear-gradient() 可以用来画出渐变背景。
background: linear-gradient(to bottom, white,black);
向下渐变
37.background缩写: position与 size 之间要加 / 不然会冲突。
CSS布局布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)
38.position定位,如果同时设置top和bottom,那么元素会被撑开变大。
39.z-index 存在一个栈的概念。
红色元素的父元素z-index 为 9 ,蓝色元素的z-index为1,所以虽然蓝色元素z-index为100大于红色的1,但是因为红色的参照物的z-index高,所以红色还是在蓝色上面。相当于两副扑克牌上下叠加,下面那一副扑克牌不管内部怎样调整,都无法跑到上面那副扑克牌上面。
40.position: relative; 参照物为元素本身,最常用的使用场景为绝对定位元素的参照物(=゚ω゚)ノ
41.position: absolute; 默认宽度是内容宽度,脱离文档流。
42.position: fixed; 常用场景:遮罩mask。
43.clear属性清除浮动通用方案:.clearfix:after{ ... } 实际上是添加了一个看不见的点号。
主要代码:
.clearfix: after { content: "."; display: block; clear: both; //到这为止的前三条是用于清除浮动:设置了clear:both的块级元素可以清除浮动 height: 0; overflow: hidden; visibility: hidden; //后面三条是为了让点号不可见 }
将clearfix这个class添加到浮动元素的父元素上,就清除了因为子元素浮动缩成一条的父元素的影响,完整代码见:
jsfiddle栗子
44.flex布局 实现三行自适应+两列自适应
东西略多,放到这里了:
https://segmentfault.com/a/11...
45.transform: translate(20%,20%); 移动。这里的20%参照物是本元素的宽和高
46.transform: skew(30deg); 倾斜。
y轴负方向 向 x轴正方向倾斜, x轴正方向 向 y轴负方向倾斜。
一张相当直观的图在这里:
47.transform: translate(100px) rotate(45deg); 先移动,再旋转。
与 先旋转,再移动:transform: rotate(45deg) translate(100px); 效果是不一样的。
因为旋转后,x轴与y轴方向已经发生了变化。
48.transition语法:
transition:[, ]; //可包含多个动画 //每个动画的变化 :
eg1:transition: color 2s ease 3s, left 2s;
eg2:transition: 2s; 等价于 transition: all 2s ease 0;
49.animation 与 transition区别:
(1)transition需要hover或click或js去触发,而animation是自动运行的。
(2)animation可以做多帧动画。
50.animation语法:
animation:[, ] //每个动画包含: : ; @-webkit-keyframes abc { 0%{ left:0; top: 0;} 50%{ left: 250px; top: 100px; } 100%{ left: 500px; top: 0; } } // 0% 等价于 from , 100% 等价于 to @-webkit-keyframes flash { //闪动效果 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.1; } }
eg1: animation: abc 2s ease 0s infinite reverse both running;
eg1: animation: abc 2s, abcd 2s both;
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50680.html
摘要:标签大集合语义化标签页面内锚点我跳跳到这里来可用于回到顶部功能。表格中表示行,和表示列。当超出时会自动换行。属性清除浮动通用方案实际上是添加了一个看不见的点号。 1. 里的 一定要放在第一行 ,如果放在了下面可能会有问题。 2.标签大集合 showImg(https://segmentfault.com/img/bVMaUw?w=1366&h=767); 3.HTML5语义化标签...
摘要:面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为,有哪些一般人我都告诉他,但是他都不听的忠告如何面试前端工程师 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...
摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...
阅读 1930·2019-08-30 15:54
阅读 3578·2019-08-29 13:07
阅读 3097·2019-08-29 12:39
阅读 1770·2019-08-26 12:13
阅读 1526·2019-08-23 18:31
阅读 2134·2019-08-23 18:05
阅读 1825·2019-08-23 18:00
阅读 1025·2019-08-23 17:15