Q: CSS 有哪些样式可以给子元素继承!
- 可继承的:
font-size,font-weight,line-height,color,cursor等 - 不可继承的一般是会改变盒子模型的:
display,margin、border、padding、height等
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: 常见的定位object.style.position？
1. static（默认）：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2. relative：相对定位的元素在文档中是正常流，它原先在什么位置，定位之后就相对于原先的位置移动；它原本所占的空间仍保留。
3. absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
4. fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- 行内:
input,span,a,img以及display:inline的元素 - 块级:
p,div,header,footer,aside,article,ul以及display:block这些 - void:
br,hr
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
9.块元素和行元素的区别
block块元素：独占一行，宽默认为父元素的100%，自动填满父元素，可以设置margin和pading以及高度和宽度；
inline行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失，宽即所包含的文字或图片之宽。
inline-block：和其他元素共处一行，宽度为内容的宽度，不会填满父元素；可设宽、高、行高、顶和底边距离；
注：当块元素没有填满父元素宽度时，用margin自动填充。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q：关于垂直居中的问题：
我感觉这个可以单开一篇随笔。
https://www.cnblogs.com/liwenchi/p/10675677.html
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: CSS3实现一个扇形
- 思路跟画实体三角形一个道理,只不过多了一个圆角属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>扇形</title> <style> .sector { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: #f00 transparent transparent; border-radius: 50px; } </style> </head> <body> <div class="sector"></div> </body> </html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: box-sizing常用的属性有哪些? 分别有啥作用?
box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),
这个css 主要是改变盒子模型大小的计算形式
可能有人会问padding-box,这个之前只有 Firefox 标准实现了,目前50+的版本已经废除;
用一个栗子来距离,一个div的宽高分别100px,border为5px,padding为5px
<style> .test { box-sizing: content-box; border: 5px solid #f00; padding:5px; width: 100px; height: 100px; } </style> <div class="test"></div> <!-- content-box的计算公式会把宽高的定义指向 content。border和 padding 另外计算, 也就是说 content + padding + border = 120px(盒子实际大小) 而border-box的计算公式是总的大小涵盖这三者, content 会缩小,来让给另外两者 content(80px) + padding(5*2px) + border(5*2px) = 100px -->
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q：什么是BFC？
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
什么情况会产生BFC？
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
作用
1. 消除margin重叠
2. 清除内部浮动
3. 多栏布局（那为什么不用flex布局呢？）
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: 清除浮动的方式有哪些?比较好的是哪一种?(单冒号和双冒号的区别)(BFC)
常用的一般为三种 1伪元素, 2 clear:both, 3 overflow:hidden;（这个方法其实是创建了一个BFC）
比较好是 .clearfix,伪元素万金油版本...后两者有局限性..
第二个是我一直在用的，就不说了，主要说一下第一种
<!DOCTYPE html> <html lang="en"> <head> <style> #father{ background: red; } #left{ float: left; width: 100px; height: 100px; background: blue; } #right{ float: right; width: 100px; height: 100px; background: blue; } #father::after{ content: ''; clear: both; display:block; } </style> </head> <body> <div id="father"> <div id="left">123</div> <div id="right">456</div> </div> </body> </html>
这里顺便说一下伪类和伪元素
单冒号是伪类，例如：
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover 鼠标移动到链接上 /
a:active / 选定的链接 */
---------------------
作者：想吃可爱多
原文：https://blog.csdn.net/weixin_43739375/article/details/88698498
主要为样式，不能指定内容content
双冒号是伪元素
::after
::before
可以指定内容content，但对于css2以前就有的伪元素可以使用单冒号。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: CSS 中transition和animate有何区别? animate 如何停留在最后一帧!
这种问题见仁见智,我的回答大体是这样的..待我捋捋.
transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)
而animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态;
过渡的开销比动效小,前者一般用于交互居多,后者用于活动页居多;
至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就可以了
animation-fill-mode: forwards;
<!--backwards则停留在首帧,both是轮流-->
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
11.visibility=hidden，opacity=0，display:none的区别
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
| 元素不可见 | 不脱离原位置 | 触发元素的绑定事件 | |
| opacity | T | T | T |
| visibility | T | T | F |
| display | T | F | F |
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: 说说样式权重的优先级
规则
1. css选择规则的权值不同时，权值高的优先；
2. css选择规则的权值相同时，后定义的规则优先；
3. css属性后面加 !important 时，无条件绝对优先；
权值等级划分
第一等级：代表 内联样式，如 style=""，权值为 1000；
第二等级：代表 ID选择器，如 #id=""，权值为 100；
第三等级：代表 calss | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type]，权值 10；
第四等级：代表 标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 1；
权重 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；
这里要注意，这里不是简单的加和再比大小。理解如下：
怎么说呢，可以理解为相同长度的数字比较大小，比如a，b两个4位数比大小，如果千位数a比b大，那么后面就不用比了。
如果a元素的第一等级选择器 * 个数，比b元素的大，那么后面就不用比了，哪怕b的第二元素选择器有无穷多个。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q: 对HTML语义化的理解
根据要做的事情使用最合适的标签，相当于在合适场合使用合适的标签。
简言之:就是不滥用标签、随意嵌套。
比如滥用div标签、 span下嵌套div。
类的命名要合理, 利于浏览器解析乃至引擎收录,也利于团队协作和维护。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3.link标签和import标签的区别
- link属于html标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
- link方式样式的权重高于@import的。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.画一条0.5px的线
-
采用meta viewport的方式
-
采用 border-image的方式
-
采用transform: scale-Y()的方式：设置一个div给一个底部border：1px solid #000;然后设置transform：scale-Y(0.5);
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4.transition和animation的区别
transition: [property] duration [timing-function delay];
分别是，动作设置的属性（比如宽、高），动作持续时间，时间曲线，延迟执行，时间
animation: name duration timing-function delay iteration-count direction;
分别是keyframe名称、动画持续时间、动画时间曲线、延迟执行、重复次数、是否应该轮流反向播放动画
他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的