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:和其他元素共处一行,宽度为内容的宽度,不会填满父元素;可设宽、高、行高、顶和底边距离;
注:当块元素没有填满父元素宽度时,用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可以一帧一帧的