CSS 基础总结

CSS基础

Doctype

声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

在标准模式中，浏览器根据规范呈现页面；

在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。(影响样式)

最简单的Doctype头

<meta charset="UTF-8"> 代替了 < meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，

比如div默认display属性值为“block”，成为“块级”元素 span默认display属性值为“inline”，是“行内”元素。

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素(即一个标签的元素)：

<br> <hr> <img> <input> <link> <meta>

鲜为人知的是：

area base col command embed keygen param source track wbr

块级元素和行内元素的区别

最大的区别是块级元素一行一个 行内元素则是接着前一个摆 其次行内不能设置高宽 行内的padding margin只有左右才生效

行内元素

使用inline-height可以设置高度

注意 比如一行字 默认高18px 使用inline-height:30px之后 占据的空间会变成30px

但在chrome中查看高度只有18px(且background看也是18px) 但是与上下元素的距离可以看到确实是30px

替换元素 如input ing等

替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。

对于表单元素，浏览器也有默认的样式，包括宽度和高度。

link 和@import 的区别是？

• link属于XHTML标签，而@import是CSS提供的;
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载(不被建议使用 阻塞了渲染);
• import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
• link方式的样式的权重 高于@import的权重.

常见兼容性问题？

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

盒子模型

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

http://www.w3cplus.com/css/front-end-web-development-quiz.html

行内元素没有margin-top marigin-bottom

行内非替换元素的外边距(margin-top和margin-bottom)不会改变一个元素的行高。

padding-top和padding-bottom不会增加行内元素的尺寸，如背景延伸所示，他们重叠在一起了。

• position的值static、fixed、absolute和relative inherit 默认是static
• static正常文档流 top left等值不起作用
• relative正常文档流 可用 top left right z-index 但是没有bottom
• fixed absolute都是脱离文档流 不过fixed是相对于窗体定位
• absolute 若没有发现含有relative的父元素的时候也是相对窗体定位
• padding和margin百分比 其结果都是按照包含块的宽度来计算

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
• 绘画 canvas
• 用于媒介回放的 video 和 audio 元素
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
• sessionStorage 的数据在浏览器关闭后自动删除
• 语意化更好的内容元素，比如 article、footer、header、nav、section
• 表单控件，calendar、date、time、email、url、search
• 新的技术webworker, websockt, Geolocation
• 移除的元素
  
  纯表现的元素：basefont big center font s strike tt u；

渲染过程:

生成DOM树 --> 生成渲染树 --> 布局树 --> 呈现

回流(重排)与重绘

• 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
• 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
  
  注：从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。

引发回流的操作

1. 改变窗囗大小
2. 改变文字大小
3. 添加/删除样式表
4. 内容的改变，如用户在输入框中敲字(这样-_-||)
5. 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
6. 操作class属性
7. 脚本操作DOM
8. 计算offsetWidth和offsetHeight ()
9. 设置style属性 (不要1个1个改变元素的样式属性，最好直接改变className)

语义化标签

http://www.cnblogs.com/yexiaochai/p/3158443.html

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的

Strong就是逻辑元素，他是强调文档逻辑的，并非是通知浏览器应该如何显示。同样，I是Italic(斜体)，而em是emphasize(强调)。

优点

使网页结构更清晰 搜索引擎优化

HTML5的语义化标签 article section nav aside header

HTML5的新标签 section article main aside header footer nav

figure代表了代表了一个独立的内容流

figcaption可以用作内容流的标题

template可以用于声明一块可用于克隆与插入的HTML片段

注：这替代了我们常见的方案textarea、script type="text/html"、script type="text/template"

audio video progress mark canvas datalist(实现搜索框自动补全的效果)

选择器

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li: nth - child）

选择器优先级

元素, 伪元素: d (0,0,0,1)

类 伪类 属性: c (0,0,1,0)

Id: b (0,1,0,0)

Style属性: a (1,0,0,0)

important最高

import < link < 内联

link加入的important也是可以被style中得important覆盖

CSS3新特性

新伪类

:enabled :disabled 控制表单控件的禁用状态

:checked 单选框或复选框被选中

nth-child:(n) 仅与第1-n个有关 与元素类型无关

p:first-of-type 等同于 p:nth-of-type(1) 即第一个出现的p元素使用的样式

p:only-of-type 若p元素在该容器中只出现一次, 则应用此样式

p:only-child 该p元素是容器中的唯一元素,则应用此样式

CSS3新特性

• :not(selctor) 等选择器
• @font-face 可使用系统没有的字体
• text-overflow样式
• 多列布局
• radius gradient shadow
• flex
• transition transform animation
• 圆角（border-radius:8px）
• 阴影（box-shadow:10px）
• 对文字加特效（text-shadow）
• 线性渐变（gradient）
• 旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
• 增加了更多的CSS选择器
• 多背景
• rgba

margin 和 translate

使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件(但是margin就影响)。他是一个2D的transform，但他不能让元素在Z轴上进行移动。不过在3D的transform函数可以让元素在Z轴上进行缩放效果。

关于样式资源

http://www.w3cplus.com/css/front-end-web-development-quiz.html

如果没有用到该的样式 该样式引用的资源不会被加载

如果该元素(或者所在的父元素)display none 那么该元素样式中的引用资源也不会被加载

但是对于img标签的src属性, 不论父元素是否display none都会发请求加载的

样式继承

可继承的样式(仅列出了部分)

文本类

font-family, font-size, font-style,

font-variant, font-weight, font, letter-spacing,

line-height,

text-align, text-indent, texttransform,

word-spacing

列表类

list-style-image, list-style-position,

list-style-type, list-style

• 不可继承的样式：border padding margin width height ;

iframe 缺点

• iframe会阻塞主页面的Onload事件；
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

inline-block间距

字体造成的 同样对于img标签也是有间距的且img标签上下也有间距

参考http://ued.taobao.org/blog/2012/08/inline-block/

折行被定义为一个回车符（ ），一个换行符 line feed ( )，或者一个回车、换行的组合。所有的折行构成了空白符

解决方案

• 去掉折行
• 容器设置fontsize为0

浮动解决方案

要么父元素也浮动 要么父元素overflow:auto 或者 hidden 要么加一个元素并clear 要么伪元素clear

通常伪元素clear是这样的

xx:after{

content:' ';

clear: both;

height: 0;

display:block;

visibility: hidden;

}

Micro clearfix

http://www.jianshu.com/p/7521ec9d8f24

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

"micro clearfix"生成伪类元素，并将其display属性设置为table，这样就会创建一个匿名table-cell，同时生成了新的BFC，这样意味着

:before伪类会阻止上边距折叠，:after伪类用于清除浮动，好处是不用隐藏产生的内容了，所需要的css代码就变少了。

BFC

什么是BFC

W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

BFC针对相对定位

BFC 解决的问题: float高度塌陷 父容器和第一个子元素margin重叠 浮动元素和非浮动元素重叠

BFC主要是消除两个相邻元素间的影响

在同一个bfc中 相邻且无分隔(指这个元素的margin挨着另一个元素的margin 他们没有padding border作为间隔)元素垂直margin会折叠

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，浮动元素也参与计算。

内部的Box会在垂直方向，从顶部开始一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box叠加。

触发BFC

float 除了none以外的值

overflow 除了visible 以外的值（hidden，auto，scroll ）

display (table-cell，table-caption，inline-block, flex, inline-flex)

position值为（absolute，fixed）

fieldset元素

@Css reset

浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的(ul ol)，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

HTML XHTML区别

XHTML 元素必须被正确地嵌套 (HTML中有些元素即使没有正确嵌套也能显示 比如li在ul之外)

XHTML 元素必须被关闭，空标签也必须被关闭，如
必须写成

XHTML 标签名必须用小写字母

XHTML 文档必须拥有根元素

XHTML 文档要求给所有属性赋一个值

XHTML 要求所有的属性必须用引号""括起来

XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示

XHTML 文档不要在注释内容中使“--”

XHTML 图片必须有说明文字

XHTML 文档中用id属性代替name属性

详情http://hi.baidu.com/ddbzj/item/516436a5903f4f2b8919d313

伪类和伪元素有什么异同，并写出几个常见的伪类和伪元素

before,after,first-line,first-letter都是伪元素，而像link,visited,hover,active,first-child,lang,focus等都是伪类

相同点

他们的共同点在于，他们都属于CSS选择器的范畴，CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化造成伪类和伪元素混淆的最基本原因，就是他们俩可以使用相同的语法进行添加：

不同点

伪类时根据元素所具有的不同状态来添加相应的样式，而伪元素则是对元素中特定的内容添加相应的样式

伪元素和伪类使用语法可以不同，伪元素可以使用::before这样的双冒号来使用（当然使用单冒号也可以），而伪类不行

伪元素和伪类进行选择器优先级计算时不同，伪元素与标签选择器的优先级为0001，而伪类的优先级与类选择器的优先级一样为0010

a标签的target属性

_blank 在新窗口中打开被链接文档。

_self 默认。在相同的框架中打开被链接文档。

_parent 在父框架集中打开被链接文档。

_top 在整个窗口中打开被链接文档。

framename 在指定的框架中打开被链接文档。

SVG的好处是什么？

SVG是一种基于矢量的图像格式。这是一个有效的格式（文件小）。你可以对他们进行缩放和任何尺寸下保持清晰（提及到小尺寸下光栅占优势可以加分）。你可以使用CSS和JavaScript来修饰他们以及使用SVG指定的滤镜做很多事情，比如说模糊效果。

ellipsis

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

遮罩层

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(5, 5, 5, .6);

float 和 inline block 区别

http://blog.csdn.net/cdream_me/article/details/25862949

那些不同将决定谁更适合使用。假如你在垂直对齐或者水平定位上有问题，你可能会使用一个行内块。假如你相对单个元素有更多的控制，并且其他元素怎样对它反应，你可能谁使用浮动

换行 文字断开

http://lingyu.wang/2014/03/20/js-interview-2/

word-break: 设置或检索对象内文本的字内换行行为

word-wrap：设置或检索当内容超过指定容器边界时是否断行

white-space：设置或检索对象内空格的处理方式

强制不换行

.no-wrap {

white-space: nowrap;

}

不截断单词换行

.wrap {

white-space: normal;

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

.wrap-break-word {

white-space: normal;

word-wrap: break-wrod;

word-break: break-all;

}