关键词:
1.设置css样式的三种方式?
外部样式表,引入一个外部css文件
内部样式表,将css代码放在<head>标签内部
内联样式,将css样式直接定义在html元素内部
2.css有哪些选择器?
id选择器
类选择器
标签选择器
又可以细分为:
派生选择器(包括后代选择器、子元素选择器、相邻兄弟选择器)
伪元素选择器
属性选择器
群组选择器
通配符选择器
css优先级定义?
一般而言,选择器越特殊指向越准确,优先级越高;
计算方法:
标签选择器优先级为1
类选择器优先级为10
id选择器优先级为100
行内样式优先级为1000
!important 无限大;
3.css中属性定义,使得dom元素不显示在浏览器可视范围内?
1.display属性为none、visibility设为hidden(但是仍然占据页面空间)
2.设置宽高为0/透明度0/z-index位置-1000(附:该属性仅在定位元素中生效);
display:隐藏对应的元素不占据原来的空间。visibility:隐藏对应的元素仍占据空间位置。
4.超链接访问过后hover样式就不出现?如何解决?
改变css属性的排列顺序(LVHA)link visited hover active
5.css hack的原理?
由于不同的浏览器和浏览器各版本对css的支持及解析结果不一样,以及css优先级对浏览器展现效果的影响,我们可以据此针对不同浏览器情景来应用不同的css。
css hack的分类?
css hack有三种表现形式,css属性前缀法、选择器前缀法以及ie条件注释法(即头部引用if ie)。实际项目中css hack大部分是针对ie浏览器不同版本之间的表现差异而引入的。
5.1属性前缀法:
例:ie6能识别下划线“_”和星号“*”,ie7能识别星号“*”(以上版本并不支持),但不能识别下划线“_”,ie6~ie10都认识“\9”,但是其他浏览器不能支持
5.2选择器前缀法(选择器hack)
例:ie6能识别*html .class{},ie7能识别*+html .class{} 或者*:first-child+html .class{};
5.3ie条件注释法:
针对所有ie(ie10+已经不再支持条件注释):<!--[if IE]>ie浏览器显示的内容<![endif]-->,针对ie6及以下版本:<!--[if lte IE 6]>只在ie6及以下显示的内容<![endif]-->.这类hack不仅针对css生效,对写在判断语句里面的所有代码都会生效。
css hack书写顺序:
一般将适用范围广,能识别能力强的css定义在前面。因为写在后面代码如果被识别会覆盖前面识别的。
6.行内元素和块级元素的具体区别?行内元素的padding和margin可设置吗?
块级元素:总是独占一行,宽、高、内边距、外边距都可以控制。
内联元素:和相邻的内联元素在同一行,宽、高、上下内边距、上下外边距都不可变。
块级元素:
div、p、h1~h6、hr、ul、ol、li、dl、dt、dd、form、table、tbody、tfoot、thead、(header、article、footer、nav)
内联元素:
span、a、b、br、em、strong、img、input、abbr、button、label、textarea
(拓展:浏览器默认的inline-block元素)
<input>、<img>、<button>、<textarea>、<label>
(附:行内块元素的兼容性使用?)
div{
display:inline-blcok; //触发ie的hasLayout
display:inline;
}
div{
*display:inline;*zoom:1;
}
7:外边距重叠是什么?导致的结果是什么?
在css当中两个(普通文档流)竖直方向上的毗邻(没有被非空内容、padding、border 或 clear 分隔开)盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,所结合而成的外边距成为折叠外边距。
注意:父块级盒子与子块级盒子在垂直方向上毗邻也会导致外边距重叠;
计算规则:
两个竖直方向上相邻的外边距都是正数,折叠结果是他们两者之间较大的值。
两个竖直方向上相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个竖直方向上相邻的外边距一正一负时,折叠结果是两者的相加的和;
(附:如何使元素上下margin不折叠?)
1、浮动、inline-block、绝对定位;
2、创建块级格式化上下文(BFC)的元素,不和它的子元素发生margin折叠;
8.rgba()和opacity()的透明效果的区别?
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。
9.css中文字的水平垂直居中?
line-height 设置为盒子高度
text-align center;
10.垂直居中一个浮动元素?
.son{
background-color:#ff0000;
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
.son{
width: 200px;
height: 200px;
background-color: #ff0000;
margin:auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
附:
.father{
display:flex;
justify-content:center;
align-items:center;
}
(详解c3div水平垂直居中:http://www.cnblogs.com/shenxiaolin/p/5387623.html)
如何垂直居中一个<img>?
.father{
display:table-cell;
text-align:center;
vertical-align:middle;
}
11.px和em的区别
px和em都是长度单位。
px的值是固定的,指定多少就是多少,容易计算。em的值不是固定的,并且em会继承父级元素的字体大小。
浏览器默认字体高都是16px。在默认情况下都是:1em=16px。12px=0.75em。
12.css的content属性?有什么作用与应用?
css的content属性专门应用在before/after伪元素上,用来插入生成内容。
常用伪类清除浮动:
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1;
}
(附:清除浮动的方式?)
1、给父元素定义height
2、结尾处加空div标签clear:both;
3、父级元素定义伪类:如上;
4、父级元素定义overflow:hidden;
5、父级元素定义overflow:auto;
6、父级元素也浮动,需要定义宽度;
7、父级元素定义display:table;
8、结尾处加br标签clear:both;
第三种:after伪元素方法清理浮动,文档结构更加清晰
13.box-sizing 常用的属性?分别有什么作用?
box-sizing:content-box|border-box|inherit;
content-box:宽、高应用到元素的内容框。在高、宽之外绘制元素的内边距和边框(默认效果);
border-box:元素的任何内边距和边框都在已设定的宽度和高度内进行绘制。
此时的宽高=content+padding+border;
(完)
前端必会的html知识总结整理(代码片段)
1.浏览器内核ie:trident(三叉戟)内核firefox:gecko(壁虎)内核safari:webkit(浏览器核心)内核opera:以前是presto(急速)内核,现在是和谷歌共同开发的blink 查看详情
前端重要基础知识整理
HTML:1.什么是语义化的HTML?有何意义?为什么要做到语义化?2.行内元素和块元素分别有哪些?3.Doctype是什么?有啥作用?4.iframe的优缺点CSS:1.CSS盒子模型2.CSS优先级3.不使用js,元素垂直居中 1).简单版 2).高级版//未完 查看详情
js万字整理javascript相关基础技术面试题总结-前端面试必备-基础知识总结-秋招冲鸭(代码片段)
文章目录1.变量声明与类型1.1varletconst区别1.2数据类型1.3值类型与引用类型的区别1.4typeof能判断哪些类型1.5判断数据类型的方式1.6`===`与`==`1.7truly变量与falsely变量1.8强制类型转换和隐式类型转换1.9语句... 查看详情
前端知识总结--性能优化
前端性能优化方案大体分为网络传输优化和页面内容优化,网络方面1、减少http请求合并js文件合并css文件雪碧图的使用(csssprite)使用base64表示简单的图片2、减小资源体积gzip压缩js混淆css压缩图片压缩3、使用缓存DNS缓存CDN部署与... 查看详情
前端知识点总结
前端知识点总结 知识点一:DOCTYPE和浏览器渲染模式文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档... 查看详情
前端笔记整理(css)(代码片段)
前端基础知识CSS3新特性定位常见类型`position:absolute`和`float`属性CSS盒模型`margin`塌陷浮动.clearfixBFC常见布局水平垂直居中flex布局flex属性flexitems属性两边宽度固定、中间栏自适应三栏布局怎么能让图文不可复制px... 查看详情
前端开发知识总结
...签名必须用小写字母XHTML文档必须拥有根元素 2.前端页面 查看详情
web前端大神整理:css布局经典问题
本文来自前端大神的整理,主要对CSS布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负margin,清除浮动,居中布局,响应式设计,Flexbox布局,等等。 CSS基础知识 下面几个入... 查看详情
css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为js部分和css部分,下面是css的基础部分总结 一... 查看详情
前端知识点总结(css篇)
圣杯布局CSS合并方法盒子模型CSS定位CSS动画原理CSS3动画(简单动画的实现,如旋转等)CSS不同选择器的权重(CSS层叠的规则)flexbox布局块级元素和行内元素的异同CSS在性能优化方面的实践(比方说选择器的效率等)CSS打包压缩的... 查看详情
大型编程电视剧连载|css知识点硬核整理归纳(代码片段)
...基础,没有基础的小伙伴可以看我的这篇文章:前端HTML万字血书大总结,来看看你入门了吗?一、初识CSS1.1、HTML的缺点说起HTML,这其实是个非常单纯的家伙,他只关注内容的语义,比如<h1>表明这... 查看详情
前端知识总结--es6新特性(代码片段)
ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。整理下ES6的新特性,具体用... 查看详情
前端个人知识总结
前端知识我都总结到github上啦,前端个人知识总结-gitbook,觉得不错请点个⭐ 查看详情
前端知识点简要总结
1.HTML(超文本标记语言) -行内标签(行内标签不能设置宽高,但是input,img可以) ai(斜体)strongbeminputlabelspanbuttontextareaimg -块级标签(独占一行) divph1~h6ullitableformdlolselect 2.CSS(层叠样式表) -第一种:<divstyle=""><... 查看详情
前端知识整理(代码片段)
前端知识整理代码千万行,安全第一行;前端不规范,运营两行泪*HTML HTML语义化HTML语义化是指仅仅从HTML元素上就能看出页面的大致结构,比如需要强调的内容可以放在<strong>标签中,而不是通过样式设置<span>... 查看详情
(面经总结)冲刺大厂之面经总结
...大厂没问题加油!!!!文章目录一、JVM知识点整理二、Java基础知识整理三、Java高并发知识点整理四、Java相关内容补充五、Java框架知识五、数据库知识点整理六、计网知识点整理七、操作系统八、分布式九、Red... 查看详情
前端工作中常用css知识点整理
1.1文字溢出省略号:文字单行溢出:overflow:hidden;//溢出隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:nowrap;//规定段落中的文本不进行换行多行文字溢出:overflow:hidden;//溢出隐藏text-overflow:ellipsis;//溢出用省略号显示display:-webkit-box... 查看详情
css样式常用属性整理
...兴起的一门高薪职业,人们的专注度越来越高。 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--《CSS样式常用属性》 *******CSS常用属性********* z-index: ... 查看详情