我都知道的CSS

最新推荐文章于 2022-06-27 00:34:58 发布
最新推荐文章于 2022-06-27 00:34:58 发布
阅读量186 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allen_he_123/article/details/119478163
版权

我本来想凑齐20个我知道的CSS，看着体面些，后来发现我都知道的CSS是因为我知道的太少了。

 

1、css盒模型

box-sizing 属性：border-box、content-box

context-box：W3C的标准盒子模型(默认)、

盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。

border-box：IE传统盒子模型。

盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。

2、常见一些的兼容性问题

2.1 Chrome 中文界面下设置小于 12px 的文本显示

解：

p{
    font-size:12px;
    -webkit-transform:scale(0.5);//0.5是缩放比例，即设置显示6px
} 

复制代码

2.2 超链接访问过后hover样式就失效

原因：因为被点击访问过的超链接样式也就不再具有hover和active了

解：改变CSS属性的排列顺序为：L-V-H-A

a:link {} 
a:visited {} 
a:hover {} 
a:active {}
复制代码

3、伪类和伪元素

常见伪类，如2.2中a标签的:link、:visited等
常见伪元素，::after ::before

简单理解：目视区别 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 从字面理解意思 伪类就是假的类，伪元素就是假的元素。

定义区别：

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息

当然，上面的你看起来可能有点难以理解，这说的啥玩意儿啊，那么下面我们从功能上来理解

伪类的两种功能：

  1. 格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
  2. 不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素：可以创建一些文档语言无法创建的虚拟元素 我们可以在其中添加内容或样式。如常见的利用伪元素清除浮动。

总结，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
 

4、当margin与padding的值设置为百分比时相对于谁？

当margin和padding的值设置为百分比时，是指相对于最近的块级父元素width（非总宽度）的相应百分比的值，即使是margin-top、margin-bottom、padding-top、padding-bottom，设置为百分比时也是以最近块级父元素的width（非总宽度）为基准，而非height。

5、 li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔。

解：

  1. 制造无空白条件，将<li>代码全部写在一排；
  2. 利用浮动，浮动li中float：left；
  3. 在ul中用font-size：0（谷歌不支持）；
  4. 设置 ul{letter-spacing: -4px;};li{letter-spacing: normal;}

6、行内元素和块级元素的具体区别？行内元素的 padding 和 margin 是否可设置？

块级元素( block )：

老大哥，总是独占一行；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

内联元素(inline)特性：

患难兄弟，和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变即只有padding和margin的left和right是可以设置的。

7、rgba() 和 opacity 的透明效果有何区别？

都能实现透明效果，opacity（一人得道鸡犬升天的意味）作用于元素，以及元素内的所有的元素的透明度，rgba()只作用于元素的颜色或其背景色。

8、CSS引入的方式使用Link和@import有什么区别？

两者都为外部引用CSS的方式，但是存在一定的区别

  1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS；
  2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载；
  3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

9、"nth-child"和"nth-of-type"的区别

简单的字面理解：“nth-of-type” type即指定类型， 而**“nth-child”**，只要是其子代即可

“nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；“nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。

10、CSS选择器的匹配规则？为什么？

CSS选择器的匹配是从右向左进行的

因为考虑性能问题，所以需要考虑的是如何在选择器不匹配时提升效率。从右向左匹配正是为了达成这一目的的，通过这一策略能够使得CSS选择器在不匹配的时候效率更高。

11、line-height: 2; 和 line-height: 200%; 有什么区别?

  1. 父元素设置line-height:2会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。即父、子元素各自计算。

  2. 父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。 即父元素计算，子拿来即用

举个栗子：
比如父元素设置属性：font- size：14px;line-height: 2 , child设置font-size:26px;

那么父元素：line-height = 14px * 2 = 28px， 子元素：line-height = 26px * 2 = 52px。

父元素设置属性：font-size:14px;line-height:200%,child设置font-size:26px;

那么父元素：line-height = 14px * 200% = 28px，子元素：line-height = 父元素的line-height = 28px

12、Canvas 和 SVG 有什么区别？

Canvas

  • 通过 JavaScript 来绘制 2D 图形。
  • 是逐像素进行渲染的。
  • 位置一旦发生改变，将重新进行绘制
  • 依赖分辨率
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 弱的文本渲染能力
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 使用XML描述的2D图形的语言
  • SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
  • 不依赖分辨率
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

说了那么多，俺觉得还是丢链接实在Canvas 和 SVG 有什么区别？

13、啥是聚焦环，正确的解决方案？

当使用按钮或链接标签获得焦点时，会得到一个可见的外边框，这就是聚焦环。它的种类依赖于根据浏览器提供商，但通常会显示一个蓝色的外边框包围在元素的周围，以表明它当前获得了焦点。

在过去，许多人指定outline: 0;来去除元素上的聚焦环。然而，由于不可见会对键盘用户访问性造成困扰。当不指定时，它会形成一个不吸引人的蓝色环显示在元素周围。

然而:focus-visible可以很好的解决这个问题，他是非常年轻的一个伪类，目前仅Chrome浏览器标准支持，关于这个伪类具体可看这里CSS :focus-visible伪类让我感动哭了

14、关于重绘与重排，以及一些优化问题？

感觉俺要写不动了，这里看到有篇文章讲的不错 浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]

 

15、说说@media属性的四种类型

  1. print，指用于打印机的不透明介质。
  2. scren，指屏幕设备
  3. tv，电视类型媒体
  4. all，所有媒体设备

16、transition和animation的区别

这两货大部分属性相同，都是随时间改变元素的属性值，主要区别在于transitionn 需要触发一个事件才能改变属性，而animation不需要，animation和gif动态图差不多，立即播放。

同时可以这样理解，transition是从：hover延伸出来的，不管是动态设置的还是非动态设置的过渡效果，只要过渡效果指定的属性值发生了变化就会触发过渡效果。animation是从flash延伸出来的，使用关键帧的概念，

17、CSS 通用兄弟选择器和相邻兄弟选择器区别？

通用兄弟选择器 ~ 会选择指定元素所有的兄弟元素

举个栗子：下例会选择 <div>元素所有的 <p>兄弟元素

div ~ p {
    background-color:cyan;
}
复制代码

相邻兄弟选择器 +会选择指定元素相邻的兄弟元素

举个栗子：下例会选择 <div>元素后的 <p>元素

div + p {
    background-color:cyan;
}
复制代码

整那么多都没用，简单字面理解就完事，通用兄弟选择就是一条船上，生死患难，大家都得是兄弟，相邻兄弟就是邻居比亲兄弟还亲。

顺便推荐下我的小说网站，免费在线无弹窗阅读，没有中间商赚差价，欢迎收藏哟

虫鱼小说网

知秋小说网 

沉睡的小五郎
关注
你未必知道的JavaScript和CSS交互的5种方法
01-19
用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？可以的，使用JavaScript也可以访问页面中的伪元素。 代码如下:...
学习CSS需要知道的CSS基础知识
12-01
一、可设置的CSS属性包括：字体属性、文本属性、颜色及背景属性、边框属性、容器属性（边距属性、填充属性）、分类属性、鼠标属性。 　二、基础属性 字体属性：font-family font-style font-variant font-weight ...
25、CSS基础——选择器补充
lvh98的博客
06-27 480
补充一些伪类选择器和伪元素选择器
CSS属性书写顺序,css的布局流程
TimeFriends
07-10 1548
CSS属性书写顺序 CSS属性书写顺序 1.布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式) 2.自身属性:width/height/margin/padding/border/background 3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word 4.其他属性(CSS3):conten
CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器
励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！
04-26 5365
总览1.元素关系2.关系选择器一、元素关系1.元素关系1：父子· 父元素：直接包含子元素的元素叫做父元素· 子元素：直接被父元素包含的元素叫做子元素2.元素关系2：祖先后代 · 祖先元素：直接或间接包含后代元素的元素叫做祖先元素 · 后代元素：直接或间接被祖先元素包含的元素叫做后代元素 3.元素关系3：兄弟 · 兄弟元素：拥有相同父元素的元素叫做兄弟元素 4.举例说明： · 父子关系： div > p1号 div > span2号 p > span1号 · 祖先后代关系：
HTML中父元素、子元素、后代元素和兄弟元素
qq_46241430的博客
08-01 7955
HTML文档中的元素有着明确的关系。 包含另一个元素的元素是被包含元素的父元素；反过来说，被包含元素是包含元素的子元素。 一个元素可以有多个子元素，但只能有一个父元素。 包含在其他元素中的元素也可能包含有别的元素，这些别的元素是其他元素的后代元素。 但这些后代元素并不是其他元素的子元素，子元素是关系最近的后代元素。 具有同一个父元素的几个元素互为兄弟元素。 <!DOCTYPE HTML> <html> <head> <title>.
深藏的5个你可能不知道的CSS属性
12-13
每年都有新的CSS属性被标准化，并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松，创造出新颖美丽的网站。 在这篇文章中，我将介绍5个相对较新的CSS属性，你可能从来没有听说过，我觉得很有趣。 本文的...
Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)
03-28
第一步，我们需要安装Firefox30,不能...如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我，每一次页面跳转，CSS Usage 都会自动增加页面的扫描次数
选择器
weixin_51654260的博客
12-07 564
1、标签选择器 1、选择器的功能是选中要添加样式的标签元素。 2、标签选择器：通过标签名直接选择相应的标签 格式：标签名{ 声明； } 例如： div{ color:red; } p{ color:black; } 2、ID选择器 1、ID选择器是选中页面中唯一的一个标签。 格式：#ID值{ 声明； } 【注】： 1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。 2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能
css属性顺序
liang0000zai的专栏
03-31 4991
css属性顺序是css良好编码风格的一部分，有助于提高代码可读性，便于发现代码问题，有利于团队合作。下面总结一些比较受欢迎的css属性顺序。 1. 传说中Mozilla建议的css属性书写顺序（实为fantasai建议的顺序）： ? 1 2 3 4 5 6 7 8 9 10 11 12
css3 transtion 从右向左过渡
qq_34870529的博客
08-09 8447
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="https://www.cnblogs.com/jizuiku"/> <title></title> <st...
css聚焦放大
学如逆水行舟，不进则退
05-07 1160
多个div元素 当选中某个div元素的时候进行放大 ng-class = focus; .foucus { transform: scale(5, 5) } div元素中的div元素如若还要放大 .foucus div { transform: scale(5, 5) }
CSS样式表的作用顺序，覆盖顺序
Mark的博客
10-15 4022
CSS样式表的作用顺序，覆盖顺序本文主要参考了MdN Design Interactive的关于CSS适用顺序文章1。如果不注意CSS的作用顺序和覆盖顺序的话，就会遇到”怎么回事，明明设置了，却不起作用“的困扰。目录CSS样式表的作用顺序覆盖顺序 目录 覆盖顺序后面覆盖前面的 优先顺序是important指定ID指定Class指定HTML Tag指定覆盖顺序：后面覆盖前面的设定对象和项目相同的时候，
html 元素兄弟元素_正文（HTML元素）
culi3182的博客
08-13 800
html 元素兄弟元素 描述 (Description) The body element wraps around all of the content that will be displayed on screen (or in other media, such as print), such as headings, paragraphs, images, tables, and so ...
纯css动画-div从左到右出现
热门推荐
weixin_34414196的博客
08-07 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
css从左到右弹出的效果,Vue transition实现从屏幕右边往左进入过渡效果
weixin_36393239的博客
08-03 1943
想要实现这个div.good从右往左出现到屏幕的过渡效果，实现不了，我觉得应该是css的问题，不知道怎么修改。代码如下：标签内的js代码可忽略。 export default {props: {food: {type: Object}},data () {return {showFlag: false};},methods: {show () {this.showFlag = t...
【JavaScript+CSS+tampermonkey】动态加载样式——还你一个干净无广告的CSDN博客
等时钟成长
06-28 8279
知识能不能改变命运我不清楚，但知识可以屏蔽CSDN广告！ 1. 简洁版CSDN 打开浏览器控制台（Chrome是按F12），在Console里粘贴下面代码回车，然后关闭控制台就行了，当然，刷新会失效，你需要重新执行代码。 var style = document.createElement("style"); style.type = "text/css"; var text = document...
CSS布局革命：你所知道的都是错的
4. **ConsideringOlderBrowsers**：考虑到并非所有用户都使用最新版本的浏览器，作者讨论了如何在保持设计一致性的同时，确保对老版本浏览器的支持。这可能涉及使用渐进增强、优雅降级等策略，以及如何编写兼容性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值