HTML/CSS
- 1. CSS权重及其引入方式
- 2. a标签全部作用
- 3. 用CSS画三角形
- 4. 未知宽高元素水平垂直居中（方案及比较）
- 5. 元素种类的划分
- 6. 盒子模型及其理解
- 7. 定位方式及其区别（文档流）
- 8. margin塌陷及合并问题
- 9. 浮动模型及清除浮动的方法
- 10. CSS定位属性
- 11. display及相关属性
- 12. IFC与BFC
- 13. 圣杯布局和双飞翼布局的实现
- 14. Flex布局
- 15. px、em、rem的区别
- 16. Less预处理语言
- 17. 媒体查询
- 18. vh与vw
- 19. H5的语义化作用及语义化标签
- 20. Web Worker和Web Socket
- 21. CSS3及相关动画
- 22. 如何实现响应式布局
- 23. SEO的概念及实现
- 24. HTML5的新特性
- 25. Less和Sass使用
题目作者：AmbitionC
题目链接： https://www.nowcoder.com/discuss/258810?channel=-1&source_id=profile_follow_post_nctrack
来源：牛客网
1. CSS权重及其引入方式
https://juejin.cn/post/6844903810993750029
相同的权重，后面的规则覆盖前面的规则
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
</style>
</head>
<body>
<div class="green red blue" >div</div>
</body>
权重大的 css 生效
如下，由于 body div 的权重(2)大于 div 的权重(1)，因此 div 的背景色为蓝色。
<style>
body div {
background: blue;
}
div {
background:red;
}
</style>
</head>
<body>
<div>div</div>
</body>
2. a标签全部作用
https://blog.csdn.net/Slueia/article/details/109698380
作用1 超链接
作用2 锚点
<div id="runtop"></div>
通过返回顶部能够实现一个常见的返回顶部的功能。
作用3：打电话或者发邮件
<a href="tel:123456">打电话给号码为123456的人</a>
<a href="mailto:123456@789.com">发邮件给给号码为123456@789.com的人</a>
作用4：协议限定符
<a href="javascript:alert("强制运行的javascript代码")">
这样就能够在<a>标签被点击的时候强制运行href属性里面的代码</a>
IE盒子模型(怪异盒模型)
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
在线练习a标签
https://learn.freecodecamp.one/
3. 用CSS画三角形
https://www.jianshu.com/p/fe2074729251
一个盒子无宽高，有border时浏览器的显示模式，如下：
div{
width: 0;
height: 0;
border-left:50px solid red;
border-top:50px solid blue;
border-right:50px solid green;
border-bottom:50px solid yellow;
}
相对的就是把border-color设置为transparent来实现其他三个三角形透明得到单个三角形。
代码文章 三角形、梯形、圆
4. 未知宽高元素水平垂直居中（方案及比较）
https://juejin.cn/post/6844903933350150158
1、flex
display: flex;
justify-content: center;
align-items: center;
flex布局优点在于其容易上手，根据flex规则很容易达到某个布局效果；
缺点是浏览器兼容性比较差，只能兼容到ie9及以上。
2、flex + margin
父级元素设置 flex，子元素设置 margin: auto;
兼容性：,IE7及之前版本不支持
3、transform + absolute
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
常用于图片的居中显示
浏览器兼容性（适合移动端）
厂商前缀
可能与其他transform属性冲突
4、table-cell
display: table-cell;
text-align: center;
vertical-align: middle;
html层级多
5、absolute + 四个方向的值相等
使用绝对定位布局，设置 margin:auto;，并设置 top、left、right、bottom 的 值相等即可（不一定要都是 0）。
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.wrapper > p {
width: 170px;
height: 20px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
6、writing-mode
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
writing-mode: vertical-lr;
text-align: center;
}
.wrapper > .wrapper-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
兼容性上还有些小瑕疵，但大部分浏览器，包括手机端已支持 writing-mode 的写法了
7、grid
父级display: grid;
.wrapper > p {
align-self: center;
justify-self: center;
}
但它在兼容性上不如 flex，特别是 IE 浏览器，只支持 IE10 及以上。
8、::after
.wrapper {
width: 300px;
height: 300px;
text-align: center;
}
.wrapper::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.wrapper > img {
vertical-align: middle;
}
9、::before
另一种是配合 font-size: 0; 共同施展的魔法。
.wrapper {
width: 300px;
height: 300px;
text-align: center;
font-size: 0;
}
.wrapper::before {
display: inline-block;
vertical-align: middle;
font-size: 14px;
content: '';
height: 100%;
}
.wrapper > img {
vertical-align: middle;
font-size: 14px;
}
font-size: 0; 的神秘之处在于，可以消除标签之间的间隙。另外，因为伪元素搭配的，都是最基础的 CSS 写法，所以不存在兼容性的风险。
5. 元素种类的划分
一、块元素
- 常用块元素标签有：div，p，ul，li，h1~h6，dl，dt，dd等
- 支持全部样式
- 可以设置宽高，如果没有设置宽度属性，则宽度默认为父级宽度的百分之百
- 盒子占据一行，即使设置了宽度
二、内联元素（行内元素）
注意：常见的内联元素：a，span，em，b，strong，i
-
不支持宽高，margin上下、padding上下，如图 .box2已设置margin上下，但并未生效。padding上下因为其不生效所以设置为0，如果强行设置反而会导致渲染bug，padding左右已生效
-
宽高由元素内容决定，如果是图片就为图片大小，如果字体30就按照30
-
盒子并在一行中
-
代码换行时盒子会自动产生间距
-
子元素是内联元素，父元素可用text-align设置对其方式
解决办法：
将父元素中的font-size设置为0，再重新设置子元素的font-size：
三、内联块元素（块元素+内联元素）
- 支持全部样式
- 可以自己设置宽高，如果元素没有设置宽高，则由内容决定
- 盒子并在一行
- 代码换行，盒子产生间距
- 父元素可用text-align设置子元素对其方式
可用display将内联元素转换为内联块元素，使其可以设置宽高，margin上下以及padding上下
元素中添加：inline-block，即可将内联元素转化为内联块元素
https://juejin.cn/post/6930795725143932936
6. 盒子模型及其理解
W3C盒子模型(标准盒模型)
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度
IE盒子模型(怪异盒模型)
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
https://www.imooc.com/article/68238
7. 定位方式及其区别（文档流）
定位：
inhert:规定从父元素继承position属性的值。
static：默认值，没有定位，元素出现在正常的流中。
relative:无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。
absolute:绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。由于绝对定位和文档流无关，所以绝对定位的元素可以覆盖页面上的其它元素，可以通过z-index属性控制叠放顺序。
fixed:不包含在普通文档流中。
https://blog.csdn.net/qq_27381193/article/details/53442240
8. margin塌陷及合并问题
说明
代码中设置了子盒子margin 垂直为25px，但实际效果为父盒子向下移动了25px，子盒子未动，该现象称之为margin垂直塌陷。可以将该现象理解为css中的一个重大BUG。
解决方法
方法一：给父盒子增加一个上边框或者设置内边距
方法二：触发BFC规则
解决margin垂直塌陷问题，可以通过设置父盒子边框方法解决，但该方案一般不作为解决手段，因为设置boder值或者设置内边距都有可能使盒子大小改变，与设计相违背。我们一般通过触发BFC的方法来实现。
float不为none
position不为relative和static
overflow为auto、scroll和hidden
display的值为table-cell或inline-block
什么是margin外边距合并?
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有
上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的
较大者这种现象被称为相邻块元素垂直外边距的合并。
添加一个父元素等于修改了整个html结构，该方案慎用，最好还是只设置一个盒子的margin值为需要的理想值。这样可以不需要修改html结构
https://juejin.cn/post/6907238888037842958
9. 浮动模型及清除浮动的方法
https://juejin.cn/post/6901903789197197325
10. CSS定位属性
static，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。
inherit，规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
fixed，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
absolute，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
relative，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。
https://juejin.cn/post/6844903516897542158
11. display及相关属性
12. IFC与BFC
一、BFC的布局规则
1、内部的Box会在垂直方向，由上到下一个接一个地放置。
2、同一个BFC的两个垂直相邻的元素margin会发生重叠，同时会取margin的最大值做重叠部分。
3、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
4、BFC的不会与已经float的元素发生重叠。
5、计算BFC的高度时，浮动元素也参与计算。
如何生成BFC
1、float：设置浮动
2、overflow：auto，hidden
3、position：设置absolute或者fixed
4、display：inline-block、flex、inline-flex、table-cell、table-caption、
https://juejin.cn/post/6919059789411123214
二、 IFC的概念和应用
1、IFC的概念
IFC的全称是Inline Formatting Contexts，也就是“内联格式化上下文”。
2、IFC的生成条件：
IFC的生成条件非常简单，就是块级元素内仅包含内联元素。
需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
3.IFC的渲染规则：
子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素可以不同形式对齐（vertical-align）
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动元素来决定。
IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
4. IFC的应用
水平居中，当一个块要在当前环境水平居中，设置display:inline-block,会在外层生成一个IFC，通过设置text-align:center既可使其居中
垂直居中，创建一个IFC，用其中一个元素撑开高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
https://www.jianshu.com/p/cd69a407fe40#comments
https://blog.csdn.net/qq_22253617/article/details/79053766
13. 圣杯布局和双飞翼布局的实现
14. Flex布局
https://segmentfault.com/a/1190000011650901
15. px、em、rem的区别
https://www.runoob.com/w3cnote/px-em-rem-different.html
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
