前端必会css整理
1.设置css样式的三种方式？
外部样式表，引入一个外部css文件
内部样式表，将css代码放在<head>标签内部
内联样式，将css样式直接定义在html元素内部
2.css有哪些选择器？
id选择器
类选择器
标签选择器
又可以细分为：
派生选择器（包括后代选择器、子元素选择器、相邻兄弟选择器）
伪元素选择器
属性选择器
群组选择器
通配符选择器
css优先级定义？
一般而言，选择器越特殊指向越准确，优先级越高；
计算方法：
标签选择器优先级为1
类选择器优先级为10
id选择器优先级为100
行内样式优先级为1000
！important 无限大；
（c附：ss选择器执行效率与兼容性详列：http://www.cnblogs.com/xiaowuzi/p/3726835.html）
3.css中属性定义，使得dom元素不显示在浏览器可视范围内？
1.display属性为none、visibility设为hidden（但是仍然占据页面空间）
2.设置宽高为0/透明度0/z-index位置-1000(附：该属性仅在定位元素中生效)；
（附：display：none和visibility：hidden的区别）
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”，但是其他浏览器不能支持（也就是说可以利用这个特性恶心一下还在使用老版本的用户，哈哈）（“\9”测试网址http://www.jb51.net/css/24944.html）
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定义在前面。因为写在后面代码如果被识别会覆盖前面识别的。
（hack参考大全：http://blog.csdn.net/freshlover/article/details/12132801）
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折叠；
(详细链接：https://www.zhihu.com/question/19823139)
8.rgba()和opacity()的透明效果的区别？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
（css样式继承拓展：http://www.cnblogs.com/thislbq/p/5882105.html）
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；
原文地址：http://www.qdfuns.com/notes/38026/8e1b4794c7af07cad88a75a0ea11d819.html
前端必会css整理的更多相关文章
- 前端HTML 与css 整理（未完）
HTML 中的标签存放于文本文件中 需要按照以下固定的文档结构组织:<!DOCTYPE HTML><html> <head>头部相关信息 </head> ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试
原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...
- web开发前端面试知识点目录整理
web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...
- 前端必学内容：webpack3快速入门 1-23节内容参考
前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...
- 2018 BAT最新《前端必考面试题》
2018 BAT最新<前端必考面试题> 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- 常用前端布局，CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- 前端必学---JavaScript数据结构与算法---简介
前端必学---JavaScript数据结构与算法---简介 1. 数据结构: 数据结构是相互之间存在一种或者多种特定关系的数据元素的集合.---<大话数据结构> 1.1 数据结构的分类 1 ...
随机推荐
- 用Gitolite 构建 Git 服务器
转载 Gitolite 构建 Git 服务器 作者: 北京群英汇信息技术有限公司 网址: http://www.ossxp.com/ 版本: 0.1-1 日期: 2010-10-07 14:52:19 ...
- Struts2在Action中访问WEB资源
什么是WEB资源? 这里所说的WEB资源是指:HttpServletRequest, HttpSession, ServletContext 等原生的 Servlet API. 为什么需要访问WEB资 ...
- sizeof 字符数组
比较 #include <stdio.h> #include <string.h> int main(int argc, const char *argv[]) { char ...
- JDBC学习笔记(6)——获取自动生成的主键值&处理Blob&数据库事务处理
获取数据库自动生成的主键 [孤立的技术是没有价值的],我们这里只是为了了解具体的实现步骤:我们在插入数据的时候,经常会需要获取我们插入的这一行数据对应的主键值. 具体的代码实现: /** * 获取数据 ...
- UVA 796 - Critical Links （求桥）
Critical Links In a computer network a link L, which interconnects two servers, is considered criti ...
- internet访问局域网内部方法之----------路由器端口映射
很多人每天都问为什么要端口映射?例如:通过路由器上网的,网站自己可以访问,但是别人就不能:输入127.0.0.1可以访问,别人还是看不到:输入localhost可以看到,但是别人就是看不到,气人啊-没 ...
- [iOS UI进阶 - 4.0] 涂鸦app Demo
A.需求 1.超简易画图,只有一种画笔 2.清屏功能 3.回退功能 4.保存功能 5.使用了cocos2D code source: https://github.com/hellovoidwor ...
- Linux(Centos)全自动异地备份数据（WEB+Mysql）
文章开始之前,先问下各位站长一个问题:什么东西对于站长是十分重要的?其实对于站长而言,很多东西都是很重要的.但我们现在排除外在因素,把范围缩小到网站系统本身,哪些是非常重要的呢?网站数据就是其中之一了 ...
- 判断滑动方向UITableView
CGFloat lastContentOffset; //ScoreView 滑动位置 -(void)scrollViewWillBeginDragging:(UIScrollView*)scrol ...
- 转载 JQuery.data()方法学习
转载原地址 http://hanchaohan.blog.51cto.com/2996417/1271551 转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.ht ...