前端必会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 ...
随机推荐
- Tkinter教程之Text篇(3)
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811348 '''Tkinter教程之Text篇(3)''''''14.自定义tag的两个内置 ...
- ubuntu14.04.03 vsftpd
apt-get install vsftpd /etc/vsftpd.conf配置Example listen=YES anonymous_enable=NO local_enable=YES wri ...
- 第二百四十三天 how can I 坚持
制定的计划完成不了了,好多问题啊.又想当然了,晚上加了会班. 今天雾霾好严重,一出地铁大裤衩怎么没了.雾霾爆表啊. 还好现在刮大风了. 准备看<芈mi月传>了. 睡觉.
- curl命令的基本用法
我们知道在linux环境下,可以调用curl下载网页. 但curl有些高级的应用,只需要几行命令行,可能比你写多行php.python.C++的程序要快些. 下面从问题驱动的角度来谈谈curl的用法 ...
- iOS本地数据存取
应用沙盒 1)每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒 2)应用沙盒的文件系统目录,如下图所示(假设应用的名称 ...
- POJ 3660 Cow Contest （floyd求联通关系）
Cow Contest 题目链接: http://acm.hust.edu.cn/vjudge/contest/122685#problem/H Description N (1 ≤ N ≤ 100) ...
- HDU 1272 小希的迷宫 （并查集）
小希的迷宫 题目链接: http://acm.hust.edu.cn/vjudge/contest/123393#problem/L Description 我们的小伙伴Bingo身为大二学长,他乐于 ...
- String中的Indexof,LastIndexOf, Indexofany,LastIndexOfAny 的区别
本文转载自 http://www.cnblogs.com/qinying/archive/2008/09/22/1295730.html 定位子串是指在一个字符串中寻找其中包含的子串或者某个字符.在S ...
- Java Thread Basic
一.Java的多线程有三种实现方式. 1.继承创建. a.定义子类,重写run方法 b.创建Thread子类的实例(即现成对象) c.调用start() 方法启动现成 特征:不可以共享变量. publ ...
- 根据powerdesigner的OO模型生成C#代码
2007-05-15 08:34:11| 分类: 转贴部分 | 标签:学习帖子 |字号 订阅 习惯了用Powerdesigner设计数据库模型,XDE设计类图.因此我一般的设计方法是用PD做分析模 ...