css基础

1. CSS：层叠样式表，是用来美化网页的。做到结构（HTML）和表现（CSS）分离。2.基本语法：3. css引用方式：行间样式、内部样式、外部样式、导入外部样式。4. css选择器分类：5. 选择器的分组6. 选择器的继承7. 样式权重8. css字体9. css背景10. css伪类选择器11. 属性选择器12. 关系选择器13. css伪元素14. 浮动15. 盒子模型16. 盒子的真实尺寸17. display属性：用来设置元素的显示方式。18. table样式19. 列表样式20. 轮播图21. 定位（position）22. 定位分类（属性值）23. z-index24. 网站开发策略：先整体再局部，自顶向下，逐步细化。25. BFC&IFC

1. CSS：层叠样式表，是用来美化网页的。做到结构（HTML）和表现（CSS）分离。

2.基本语法：

    选择器{
        属性:属性值;
}

3. css引用方式：行间样式、内部样式、外部样式、导入外部样式。

行间样式：直接在标签上书写样式
内部样式：在文件的内部书写样式
​
        <style type="test/css">
            样式内容
        </style>
        
外部样式：（1）先创建一个css文件；（2）再用link标签引入这个文件。
导入外部样式：（1）先创建一个css文件；（2）在style标签中用import导入这个样式文件。

以上四种css引用的区别： 行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。 在实际项目开发中，最好使用外部样式。

外部样式分为link引入和import引入两种方式。这两种方式区别： 1. link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；@import属于css范畴，只能加载css。 2. link引用css时，在页面载入时同时加载；@import需要页面网页完全载入后加载 3. link是XHTML标签，无兼容问题；@import是在css2.1提出，低版本浏览器不支持 4. link支持使用JavaScript控制DOM去改变样式；而@import不支持

4. css选择器分类：

1. （*）：匹配HTML中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用）
2. 标签选择器：用来匹配对应的标签
3. （.）类选择器：用来选择class命名的标签
4. （#）id选择器：用来选择用id命名的标签
5. 派出选择器：根据上下文来确定选择的标签
6. 伪装选择器（后面学）
7. 伪元素选择器

5. 选择器的分组

让多个选择器（元素）具有相同的样式，一般用于设置公共样式。

6. 选择器的继承

子元素可以继承父元素的样式，反之不可以。

7. 样式权重

！important（10000）>内联样式(1000)>id选择器(100)>类、伪类选择器和伪元素选择器(10)>标签选择器(1)

8. css字体

1. font-size：字号
2. font-family：字体
3. font-style：字体样式（normal/italic/oblique)
4. font-weight：文本加粗(normal/bold/bolder/lighter/100-900)
5. line-height：行高(px/数字/em等)
6. color：文字颜色(颜色的单词/rgb()->r:0-255,g:0-255,b:0-255/16进制（以#开头、后跟6位（#rrggbb)或3位(#rgb)16进制数)）
7. text-decoration：文字修饰(none/underline/overline/line-through)
8. text-align：文本对齐方式(left/right/center)
9. text-transform：字母大小写(capitalize/uppercase/lowercase/none)
10. text-indent：文本锁紧(px/em/%/pt等)
​
tip：
font复合属性：
    font：font-style font-variant font-weight font-size/line-height font-family；
​
注意：
    1）属性值的位置顺序
    2）除了font-size和font-family之外，其他任何一个属性值都可以省略
    3）font-variant：normal/small-caps(让大写字母变得小一些)

9. css背景

1. background-color：背景色（transparent/color）
2. background-img：背景图（none/url)
3. background-repeat：背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
4. background-position：设置对象的背景图像位置({x-number  |  top  |  center  |  right})：控制背景图片在元素的位置：x轴、y轴。其铺排方式为no-repeat。
5. background-attachment：设置对象的滚动位置（scroll/fixed）
6. background：设置背景的复合写法
    background：color image repeat attachment position

10. css伪类选择器

伪类：专门用来表示元素的一种特殊状态。
常用伪类选择器：
	1）a标签的伪类：
		：link/：visited/：hover/：active
	2）：focus 获得焦点
	3）：first-child/：last-child/：nth-child(number)

11. 属性选择器

[属性名]：包含有指定属性名的元素（常用）
[属性名=值]：属性名的值为指定值的元素（常用）
[属性名~=值]：属性名的值包含指定值的元素
[属性名^=值]：属性名的值以指定值的开头的元素
[属性名$=值]：属性名的值以指定值的结尾的元素

12. 关系选择器

1. 空格：后代选择器
2. >：只选择儿子元素
3. +：兄弟选择器

13. css伪元素

1）css伪元素与伪类的区别： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。 伪类用于当己有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说我们可以通过before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

2）伪元素&伪类的特点： 伪元素和伪类都不会出现在源文档或者文档树中 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面伪元素名和伪类名都是大小写不敏感的 有些伪类是互斥的,而其它的可以同时用在一个元素上。(在规则冲突的情况下，常规层叠顺序决定结果）

3）：before/：after/：frist-letter/：frist-line：前面可以是一个冒号也可以是双冒号 ：：selection/：：placeholder/：：backdrop：前面只能是双冒号

---

14. 浮动

1、什么是浮动？

浮动就是让块级标签不独占一行。目的：把块级标签元素可以排在一行。

2、浮动的原理

就是让元素脱离文档流，不占用标准流。

3、float的属性值：

left：左浮动

right：右浮动

none：不浮动

4、浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。

5、清除浮动

目的：让后面的元素自动掉到下一行。

方法：

1.添加空标签，并设置样式：

	clear:left;清除左浮动
	clear:right;清除右浮动
	clear:none;左右浮动都不清除
	clear:both;清除左右浮动

2.在要清除浮动的父级添加样式：overflow：hidden

overflow：hidden：超出部分隐藏，也可以实现部分浮动。

3.在要清除浮动的父级添加伪元素，并设定样式：

父元素：after{
    content:"";
    display:block;
    clear:both;
}

注意：在实际项目开发中，一般使用第二种方案。

15. 盒子模型

每个元素都是一个盒子，一个盒子由margin（外边距）、border（边框）、padding（内边距）和content（内容）组成。

区别外边距和内边距是以边框为参照。

系统默认外边距为8px。

1.外边距margin：指边框线之外的距离。

	margin：可用来设置任意一边的边距，可以带1-4个参数。
		1个(apx)：表示上下左右都有这样的外边距
		2个(apx bpx)：表示上下为apx,左右为bpx
		3个(apx bpx cpx)：表示上为apx,左右为bpx,下为cpx
		4个(apx bpx cpx dpx)：表示上为apx,右为bpx,下为cpx，左为dpx
	margin-left：左边距
	margin-right：右边距
	margin-top：上边距
	margin-bottom：下边距

2.内边距padding：指元素的文本内容与边框的距离。

	用法与margin完全一样

3.边框（border）

	border-width：边框线宽度
	border-style：边框线样式
	border-color：边框线颜色
	复合写法：
		border:border-width border-style border-color;
		注意：border-width border-style border-color这三个参数没有位置之分。

16. 盒子的真实尺寸

盒子宽度 = width + padding左右 + border左右

盒子高度 = height +padding上下 +border上下

17. display属性：用来设置元素的显示方式。

属性值：

none：不显示元素
block：块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后，行级标签也可以设置宽高）
inline：行内显示，将块级标签转换为行级标签，同时删除换行符。
inline-block：将块级或行级标签转换为行内块级标签。

display:block
	block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
	block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
	block元素可以设置margin和padding属性。
display:inline
	inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
	inline元素设置width,height属性无效。
	inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
	简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

18. table样式

table一般不用来布局，主要用来格式化数据。

属性：

width：宽度
height：高度
border-collapse: collapse; 单线边框
border：边框线

td、tr属性：

width：宽度
height：高度
border：边框线
text-align: 文本左右对齐（left默认/center/right;
vertical-align: 文本垂直对齐（top/middle默认/bottom）

19. 列表样式

不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等。

1、列表类型

无序（ul）、有序（ol）和用户自定义（dl）列表

ul和ol的列表项都是li表示，dl是由一个dt和一个或多个dd组成。

dl一般用来设定一个定义，比如名词解释等。dt：标题，dd：描述，用来对dt的内容解释说明。

2、样式（用来修改标识类型）

list-style-image：用图像表示标识

list-style-position：标识的位置（inside/outside默认）

list-style-type：标识类型

简写：

list-style:list-style-image list-style-position list-style-type;
list-style的值可以按任意顺序列出，而且可以任意忽略，只要提供一个值，其他的都自动默认

list-style-typed的属性值：

无序：disc（默认）/circle/square

有序：decimal（默认）/decimal-leading-zero/lover-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-latin/upper-latin

有序和无序：none

20. 轮播图

作用：主要用于产品或公司相关宣传

组成：

1、轮播的组图（至少两张以上，不能太多）

2、控制器

3、计数器

21. 定位（position）

设定元素在文章中的位置。会将标签（元素）转换为块级。

22. 定位分类（属性值）

1、static：静态定位

默认值，没有定位，不能设置偏移值（left/right/top/bottom），占用标准流（文档流）

2、relative：相对定位

占用标准流（文档流），它会出现在文档流中它该出现的位置。可以设置偏移值改变其位置。它相对于自身所占的位置做偏移。

3、absolute：绝对定位

脱离文档流，相对于body做偏移。

绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素。relative的元素必须是absolute的父级。

在项目开发中，一般用relative+absolute结合使用

4、fixed：固定定位

脱离文档流，相对于浏览器窗口左上角（0,0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。一般在开发中用于固定导航栏。

23. z-index

当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。

文档流默认的z-index的值为0。

用在static和relative元素上无效。

24. 网站开发策略：先整体再局部，自顶向下，逐步细化。

一、双飞翼布局：由三列组成，两端固定，中间自适应。

双飞翼布局的优点：

1、兼容性好，兼容所有主流浏览器，包括万恶的IE6

2、因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。

二、圣杯布局

由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。

不就是与双飞翼比增加定位和偏移设置

三、侧边栏布局

1、两栏布局

a.左侧固定，右侧自适应

b.左侧自适应，右侧自适应

c.左右都固定

2、三栏布局

a.左侧固定，右侧固定，中间自适应

b.左侧自适应，中间、右侧固定

c.左侧、中间固定，右边自适应

25. BFC&IFC

FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染 区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 分为：BFC和IFC。

1、BFC：块级格式上下文

A. 形成BFC的条件

a.浮动元素（float除none之外的值）

b.定位元素（position（absolute/fixed））

c.display（值为inline-block/table-cell/table-caption）

d.overflow（值为hidden/auto/scroll）

B. BFC特性（规则）

a.内部的盒子会在垂直方向上一个接一个的放置

b.垂直方向的距离是最大的margin值（如果不需要重合，就需要将该盒子变成独立的盒子）

c.BFC的区域不会与float元素区域重叠

d.计算BFC元素的高度时浮动元素也参与计算

e.BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素

C. BFC的作用

a.解决margin重叠的问题（添加BFC）

b.解决浮动高度塌陷的问题（在父级添加overflow：hidden）

c.解决侵占浮动元素的问题（添加overflow：hidden清除浮动）

2、IFC：内联（行级）格式上下文

A. 形成IFC的条件

a. font-size

b. line-height

c. height

d. vertical-align

B. IFC特性（规则）

a. IFC的元素会在一行中从左至右排列

b. 在一行上的所有元素会在该区域形成一个行框

c. 行宽的高度为包含框的高度，高度为行框中最高元素的高度

d. 浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度

e. 行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框

f. 行框的元素遵循text-align和vertical-align