1.盒子模型
w3c标准: width: content
ie标准: width: content+padding+border
elementUi,bootstrap: box-sizing:border-box;
2.选择器优先级!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
3.BFC块格式化上下文（Block Formatting Context，BFC）
3.1 触发条件1. 根元素 1. position: absolute/fixed 2. display: inline-block / table 3. float 元素 4. ovevflow !== visible3.2 外边距塌陷
当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并,并选取margin大的
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
3.2.1 外边距塌陷情况
blue
red
3.2.2 外边距塌陷解决
blue
red
3.3 参考
https://www.cnblogs.com/ianya...
4.link与@import 4.1 区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
link引入的样式权重大于@import引入的样式。(@import引入的样式，会被层叠掉了。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠)
4.2参考https://www.jianshu.com/p/fc1...
5.如何居中一个元素 5.1 水平居中 5.2 垂直居中 5.3 水平垂直居中 5.4 参考https://github.com/ljianshu/B...
6. css继承 6.1什么是css继承继承就是指子节点默认使用父节点的样式属性。
1.可继承：颜色，文字，字体间距行高对齐方式，和列表的样式可以继承
不可继承: 其它
所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承：text-indent和text-align。 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。6.2参考
https://www.nowcoder.com/ques...
7.css选择器 7.1 参考 8.px,em,rem 8.1 pxpx:像素,px是相对于显示器屏幕分辨率而言的
1920*1024 前者是屏幕宽度总共有1920个像素宽度后者则是高度为1024个像素
8.2 emem的值并不是固定的；
em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px
.p1 {
font-size: 1em;
}
.div {
font-size: 30px;
}
.div p {
font-size: 1em;
}
我的父级是body
我的父级是div
8.3 rem
rem是css3中新增加的单位相对的只是HTML根元素，默认也是16px
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应；
区别em是根据父元素继承相应大小而不是固定的，rem是继承html根元素的大小
只有改变根元素html的值才能改变rem的值
psd设计图的宽度是750px,如何做移动端的适配?
Document
i am p
8.4 参考
https://www.jianshu.com/p/a0b...
9. 文字超出显示省略号 9.1 单行
CSS文本溢出显示省略号CSS文本溢出显示省略号
9.2 多行
CSS文本溢出显示省略号CSS文本溢出显示省略号CSS文本溢出显示省略号
10. CSS创建一个三角形的原理
11 chrome显示小于12px字体
shrink
12.transform(转换)
transform：转换
可以可以对元素进行移动、缩放、转动、拉长或拉伸
2d和3d
13. transition(过渡)过渡
四个过渡属性
规定应用过渡的 CSS 属性的名称
定义过渡效果花费的时间。默认是 0。
规定过渡效果的时间曲线。默认是 "ease"。
规定过渡效果何时开始。默认是 0。
14. animation(动画)
定义一个属性， @keyfframes + 属性
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
15 opacity: 0、visibility: hidden、display: none 优劣和适用场景
display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103946.html
摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序员应该不在少数，我也是其中之一。 为何会走向前端 非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...
阅读 2585·2021-11-17 09:33
阅读 2980·2021-10-25 09:44
阅读 1038·2021-10-11 10:59
阅读 2197·2021-09-27 13:34
阅读 2673·2021-09-07 10:19
阅读 2006·2019-08-29 18:46
阅读 1419·2019-08-29 12:55
阅读 838·2019-08-23 17:11
