CSS基础知识快速入门

前端开发基础知识

By 小叉

2011.12.01

新浪微博：@技术宅小叉

个人网站：204cea474a7302768f993900

前端开发基础知识打好基石，才能攀得更高

By 小叉

2011.12.01

新浪微博：@技术宅小叉

个人网站：204cea474a7302768f993900

知识要点

1.盒模型

2.选择器

3.布局

4.CSS Reset

5.CSS 优化

6. 标签&语义

7.块元素&行内元素

8.HTML5 简单应用

9.图片优化

1.盒模型

元素实际占用尺寸= width(height) + padding + border + margin

2.选择器

元素选择器E 伪类选择器E:link E:visited E:active E:hover E:focus

2.1 CSS1 定义的选择器

ID选择器

#id

类选择器

E.class

包含选择器

E F(中间有一个空格)伪元素

E:first-link E:first-letter

2.选择器

通配选择器* (星号)伪类选择器E:lang(fr)

2.2 CSS2.1 增加的选择器

子包含选择器

E > F

相邻兄弟选择器E + F

伪元素

E:before E:after 属性选择器

E[foo]

E[foo="bar"] E[foo~="bar"] E[foo|="bar"]结构伪类选择器E:first-child

2.选择器

2.3 优先级

.list li的优先级更高，所以浏览器会显示.list li设置的样式

3.布局

3.1 浮动(float)

1

float:none 2float:none 3float:none 不浮动( 默认)

3.布局

3.1 浮动(float)

2

float:none 1float:left 3float:none 黄框左浮动绿框被黄框遮住了

3.布局3.1 浮动(float)

2 float:none 1 float:right

3

float:none 黄框右浮动

3.布局3.1 浮动(float)

1 float:left

3

float:left 2

float:left

全部左浮动

3.布局3.1 浮动(float)

1 float:left 3 float:left 2 float:left

全部左浮动宽度不足时

3.布局

3.1 浮动(float)

1float:left 3

float:left 2float:left 全部左浮动各元素高度不一样时

本文来源：https://www.bwwdw.com/article/udjq.html