css知识体系你知多少?(前端技术)

Mrsongsong Mrsongsong     2023-03-29     509

关键词:

1、有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项?

modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一篇博文HTML5系列四(特征检测、Modernizr.js的相关介绍)

2、常用的html标签,它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline,这些标签显示的时候和block/inline有何区别?

具体display属性值有如下:

inline可以理解为是流,这是没有大小和形状的,它的宽度取决于父容器的宽度。针对inline的标签,你设置宽度和高度是无效的。

如何把inline元素转换为块级元素

  1. 对inline元素设置display:block

  1. 对inline元素设置float

  1. 对inline元素设置position:absolute/fixed

简单一点的说,一般的文字、图片它们是inline的,div是block的,而一般的一般的button、input是inline-block的。

所以说inline-block的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。

3、一个表格的第一行显示红色背景,最后一行显示蓝色背景,中间行使用灰色/白色间隔的背景,如何写?

利用结构化伪类,就会如下这样写

这里插一句,如果要在各个菜单之间加下划线,如下图所示效果

一般人都会用

ul li

border-bottom: 1px solid #ccc;

ul li:last-child

border-bottom: 0px;

但是事实上还有一种更加方便的方式(如果你对结构化伪类很了解的话)

ul li + li

border-top: 1px solid #ccc;

这里补充说明一下如下两个结构化伪类:

  1. 选择某一个元素紧挨着的兄弟节点,例如 li + li…

  1. 选择某一个元素的所有同胞节点,例如 span ~ a…

4、伪元素 ::before、::after 是否用过?都是在哪些地方用的?

清除浮动、为一个div增加一个“三角”

事实上很多图标一般都很小(它本身就应该是很小的),但是我需要在这个小图标上增加事件绑定,那在手机端就更加糟糕了,用户根本点击不到,那怎么办,就可以利用before after可以来增加容器的大小

这里还提一句就是css中属性content只会在before after里面起作用,在其它属性中都没有效果。所以有时候不要给自己的代码写一些无用的属性,增加浏览器的解析时间。

5、css——层叠样式表,其中的“层叠”该如何理解?

这个没有什么好说的,事实上看到很多博文上都是说ID代表100,class代表10,Element代表1,我表示对这种解释不太赞同,如果想真正了解的话可以去看一下《CSS权威指南》,也可以去看一下CSS--结构和层叠

6、盒子模型的width其实是指内容的宽度,不包括padding、border、margin。其实这样对我们做css布局是很不利的,有什么方法可以让width是全部的宽度?

box-sizing

....

其它还有挺多问题,我一一总结

学习css的思路

浏览器是怎么工作的?

浏览器加载了html之后只为一件东西——dom树,浏览器把html变为dom树结构,就完成了对html的结构化。

浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式

至于后来对视图的渲染,p是block、br换行,那是整合了css之后的事情。而浏览器整合css又是另一个路线,和解析html是分开的。

html的解析是一条线,css的解析是一条线,两者会在某一点结合,形成最终的视图。

如果我们以CSS为重点看,从上图中我们可以总结出学习CSS的三个突破点。

  1. 浏览器如何加载和解析CSS——CSS的5个来源;

  1. CSS和html如何结合起来——选择器;

  1. CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等;

事实上如果我们从如上三个方面来了解css的话,思路就豁然开朗了。利用原文博主的一句话就是说借助别人的力量来提高自己,站在巨人的肩膀上才能看得更远。

css样式来源

我之前一直到《css权威指南》里面说的用户代理样式一词很不了解,看了博主的文章后才明白,在一些浏览器是可以自定义字号和字体的(用户在这里设置了字体和字号之后,它们会覆盖掉浏览器默认的样式)。

布局相关

display:table具有包裹性,除了display:table之外,float及position:absolute也都具有包裹性,什么叫包裹性,简单一点的说就是宽度会根据内容而定,包裹的特性其实主要有三个表现:收缩、坚挺、隔绝。

在没有css3的column-count之前,大家都习惯用display:table-cell来实现多列布局,但是众所周知table-cell IE6、7不兼容。

纵向margin是会重叠

用div画下三角

div

border: 10px solid;

border-color: #333 transparent transparent transparent;

div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器。

被设置了float的元素会脱离文档流。

“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。事实上这些空格并没有真正消失,只是位于float元素的后面罢了。

清除浮动的方法

  1. 为父元素添加overflow:hidden

  1. 浮动父元素

  1. clear:both

  1. 兼容各浏览器的clear both方法

.clearfix:after

content: '';

display: table;

clear: both;

.clearfix

*zoom: 1;

国内最火的htmlcssjavascript开源项目top榜,你知多少?

...ipt是三项必备的基础技能。而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势。本文盘点国内评分最高且收藏量超过100的前端技术开源项目,希望可以帮助更多的开发者扩展学习。 1.极简... 查看详情

这些芯片知识,你知多少

“无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。”关于芯片... 查看详情

这些芯片知识,你知多少

“无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。”关于芯片... 查看详情

这些芯片知识,你知多少

“无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。”关于芯片... 查看详情

装修弱电,强电施工知识你知多少?

  家里的配电箱强电箱一般开发商都是预先安装在门后的,不适宜自己随便改动位置。但要注意是否安装了保护装置(空气开关,也称断路器)。这样发生短路或超负荷时,能自动跳闸,防止漏电意外。配电箱内的空气开关... 查看详情

前端知识体系-01

前端语言:HTML(超文本标记语言)  CSS(层叠样式) CSS+DIV(布局)前端框架:bootstrap(web前端开发框架)客户端脚本语言:JavaScript + JQuery(JavaScript的框架) +Ajax(异步提交处理)+JSON(数据传输对象)  查看详情

前端开发知识体系部

1.前言  本文把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html、css、js)的认识——做web前端需要的比这三大块要多得多。  在看内容之... 查看详情

前端知识体系

1.布局框架:Bootstrap: http://getbootstrap.com/Foundation: http://foundation.zurb.com/Uikit: http://www.getuikit.com/WebComponents:http://css-tricks.com/modular-future-web-components//2.构建工具 查看详情

前端知识体系

1.布局框架:Bootstrap: http://getbootstrap.com/Foundation: http://foundation.zurb.com/Uikit: http://www.getuikit.com/WebComponents:http://css-tricks.com/modular-future-web-components//2.构建工具 查看详情

前端知识体系

1.HTMLHTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6bug,和一些定位写法cssjs放置位置和原因什么是渐进式渲染html模板语言metaviewport原理-2.CSS盒模型,box-sizingCSS3新特... 查看详情

前端工程师的知识体系

下图是前端工程师图解:7e7ec141gdf7d4810f25f&690 前端开发的核心是HTML+CSS+JavaScript。本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。HTML1.... 查看详情

前端工程师的知识体系

 前端开发的核心是HTML+CSS+JavaScript。本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。HTML1.标签的分类标签表示一个元素按性质划分:Block-L... 查看详情

前端工程师的知识体系

前端开发的核心是HTML+CSS+JavaScript。本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。HTML1.标签的分类标签表示一个元素按性质划分:Block-Level... 查看详情

2021你应该了解的前端知识体系

没有经过系统的学习、归纳和总结,任何知识都是掌握不牢固的。对于始终要保持学习的程序员来说,学习的新技术不仅要进行实践,还要经常进行反思和复盘,然后通过笔记或者博客将自己的思考记录下来,只有这样做才能真... 查看详情

阿里巴巴前端知识体系详解

1.布局框架:Bootstrap:http://getbootstrap.com/Foundation:http://foundation.zurb.com/Uikit:http://www.getuikit.com/WebComponents:http://css-tricks.com/modular-future-web-components//2.构建工具及包管理器:Grunt:http:/ 查看详情

bim技术在各阶段应用的软件你知多少?

目前,在政府大力推广BIM的前提下建筑行业正处在加速的转型的高峰期,BIM技术的应用已经慢慢逐步被应用到各大项目中,就比如应用BIM技术的很有代表性的建筑中国尊。因此BIM在工程建设的全生命周期各阶段的应用,都需要相... 查看详情

前端工程师知识体系

...鉴:http://www.cnblogs.com/sb19871023/p/3894452.html 扩展类 知识体系:1、后端程序 node、php、java2、UI素材&n 查看详情

小鹿线怎么样?

...到瓶颈,这个时候小伙伴就应该通过不断的学习开发技术知识,来提升自身的开发技术水平,那小伙伴应该怎么来学习呢?1.梳理清楚知识体系框架学习前端开发技术,不管是入门还是进阶,一定都要有知识体系建设的想法。就... 查看详情