1.标签选择器(如:body,div,p,ul,li)
2.类选择器(如:class=“head”,class=“head_logo”)
3.ID选择器(如:id=“name”,id=“name_txt”)
4.全局选择器(如:*号)
5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如:div p,注意两选择器用空格键分开)
9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link visited active hover。)
10.字符串匹配的属性选择符(^ $ _三种,分别对应开始、结尾、包含)
11.子选择器 (如:div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承> 浏览器默认属性
3.什么是css hack? ie 6,7,8的hack分别是什么?6,7,8,9 _ ,+, \0 ,\9
例: #test{
width: 300px;
height: 300px;
background-color: blue;
background-color: red\9; /_ all ie _/
background-color: yellow\0; /_ ie8 _/
+background-color: pink; /_ ie7 _/
_background-color: orange; /_ ie6 _/
:root #test{
background: purple\9; /_ ie9 */
}
@media all and {min-width: 0px} #test{background-color: black\0;} /* opera */
@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */
}
@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面,@media是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器宽度和高度重新渲染页面。
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,让它能够同时兼容不同的浏览器,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
4.透明效果 rgba()和opacity的区别
首先来看rgba:
R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
再看opacity:
后面的取值为从 0.0 (完全透明)到 1.0(完全不透明)。
两者的区别:opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。
opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或背景色。设置rgba透明的元素的子元素不会继承透明效果。
5.px与em区别
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em的值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em, 10px = 0.625em。
px是像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。
这个单位与em有什么区别呢?
区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
6.描述一个“reset”的css文件并如何使用它。知道normalize.css吗?你了解他们的不同之处吗?
重置样式非常多,凡是一个前端开发人员肯定会有一个常用的重置css文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢?
原因是不同的浏览器对一些元素有不同的的默认样式,如果你不处理,在不同浏览器下回存在必要的风险,或者更有戏剧性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理,但不扰乱其他的东西(如粗体的标题)。
7.CSS的content属性有什么作用?什么应用?
知道。CSS的content属性专门应用在before/after伪元素上,用来插入生成内容。
最常见的应用是利用伪类清除浮动:
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:“.”; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after伪元素通过content在元素的后面生成一个点的块级元素,再利用clear: both清除浮动。
8.字体 虚线 下划线
Font-size dotted text-decoration
1.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?
块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示。
width、height、padding(内边距)、margin(外边距)都可控制。
内联元素(inline)特性:
宽度、高度、内边距的padding-top/padding-bottom和外边距的margin-top、margin-bottom都不可改变(也就是padding和margin的left和right是可以设置的)。
这里还有其他问题。浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些元素是天生inline-block元素?
它们是<input>、<img>、<button>、<textare>、<label> 。
2.CSS中可以让文字在垂直和水平方向重叠的两个属性分别是什么?
垂直方向:line-height。设置成比字体高度还小就可以让两行重叠
水平方向:letter-spacing。设置为负值即可实现重叠。
3.Sass、Less是什么?大家为什么要使用他们?
他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。
例如Less是一种动态样式语言。将CSS赋予了动态语言的特性,如变量,继承,运算,函数。Less即可以在客户端上运行(支持IE6+,Webkit,Firefox),也可以在服务端运行(借助Node.js)。
Sass变量必须是$开始,而Less变量必须使用@符号开始。
为什么要使用它们?
1结构清晰,便于扩展。
2可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无异议的机械劳动。
3可以轻松实现多重继承。
4完全兼容CSS代码,可以方便地应用到老项目中。Less只是在CSS语法上做了扩展,所以老的CSS代码也可以与Less代码一同编译。
4.display:none和visiblity:hidden的区别是什么?
display:隐藏对应元素但不挤占该元素原来的空间。
visiblity: 隐藏对应的元素并且挤占该元素原来的空间。
即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置任然存在。
5.盒子模型在不同浏览器上的区别
http://www.cnblogs.com/ylliap/p/6119740.html
盒子模型有两种,分别是IE盒子模型和标准W3C盒子模型。
w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。
IE盒子模型的范围也包括margin、border、padding、content,
和标准w3c盒子模型不同的是:ie盒子模型的content部分包含了border和padding。
IE盒模型的宽度或者高度计算方式为:
width/height = content + padding + border,
W3C盒模型的宽度或者高度计算方式为:
width/height = content。
例如:
一个盒子的margin为20px,border为1px,padding为10px,content的宽为200px、高为50px,加入用标准盒子模型解释,那么这个盒子需要占据的位置为:
宽:20_2 + 1 * 2 + 10_ 2 + 200 = 262px, 高:20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。
盒子的实际大小为:宽1_2 + 10 * 2 + 200 = 222px,高1_ 2 + 10 * 2 + 50 = 72px。
假如用IE盒子模型,那么盒子需要占据的位置为:
宽:20 * 2 + 200 = 240px,高:20 * 2 + 50 = 70px。
盒子的实际大小:宽200px,高50px。
一般推荐使用W3C盒子模型,怎样才算是选择了标准W3C盒子模型呢?
就是在网页上加DOCKTYPE声明。如果不加,那么各个浏览器会根据自己的行为去理解网页。
CSS3增加了box-sizing属性,值包括content-box|border-box|inherit。
默认值为content-box。如果值为content-box,那元素遵循的是W3C盒模型;如果值为border-box,那元素遵循的是IE盒模型;如果值为inherit,该属性的值应该从父元素继承。
在我们的重置样式文件中一般也会重置这个属性,把box-sizing设置成border-box方便于排版。
1.display
display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
block
常用的块级元素包括div、 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等。
inline
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span>
包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素,它可以被用作链接。
none
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它,例如 script 。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden; 还会占据空间。
其他 display 值
还有很多的更有意思的 display 值,例如 list-item 和 table 、 inline-block 和 flex 。
2.margin: auto;
#main {
width: 600px;
margin: 0 auto;
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
8)]
[外链图片转存中…(img-UBlrbeaQ-1714843374228)]
[外链图片转存中…(img-kK0pA62e-1714843374228)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!