css常用知识

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：和其他元素共处一行，宽度为内容的宽度，不会填满父元素；可设宽、高、行高、顶和底边距离；

行内元素：行内元素只能嵌套行内元素，不能嵌套块级元素。

块级元素：块级元素可以嵌套行内元素。块级元素之间也可以进行嵌套，但是，并不是块级元素之间可以随意的嵌套。p元素是不能嵌套任何块级元素的，div可以嵌套任意的元素，但是div并不是能够被所有的块级元素嵌套的。

注：当块元素没有填满父元素宽度时，用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>

View Code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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>

View Code

这里顺便说一下伪类和伪元素

单冒号是伪类，例如：

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可以一帧一帧的

css常用知识

Q: CSS 有哪些样式可以给子元素继承!

Q: 常见的定位object.style.position？

Q: 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

9.块元素和行元素的区别

Q：关于垂直居中的问题：

Q: CSS3实现一个扇形

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Q: box-sizing常用的属性有哪些? 分别有啥作用?

Q：什么是BFC？

Q: 清除浮动的方式有哪些?比较好的是哪一种?(单冒号和双冒号的区别)(BFC)

Q: CSS 中transition和animate有何区别? animate 如何停留在最后一帧!

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

11.visibility=hidden，opacity=0，display:none的区别

Q: 说说样式权重的优先级

Q: 对HTML语义化的理解

3.link标签和import标签的区别

2.画一条0.5px的线

4.transition和animation的区别

推荐阅读

Q: 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

Q: `box-sizing`常用的属性有哪些? 分别有啥作用?

Q: CSS 中`transition`和`animate`有何区别? `animate` 如何停留在最后一帧!