第一章 CSS样式

CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。
CSS语法：选择器名{属性名:属性值;}

CSS选择器：为了简化代码，使html元素快速改变样式，故把代码写到css里，无需存写在html中，通过link标签在头文件中引入映射文件
引入CSS的方法：嵌入式 内联式 外联式

选择器

.class 或 #id：类选择器 ID选择器

html中：
    <span id="three">333</span>
    <span class="three">333</span>
css中：
    #three{color:green;}
    .three{color:green;}

html中：
		<div class="box">盒子</div>
css中：
		.box{
		color:blue;
		font-size:15px;
		}

html中：
		<div class="pink font20">盒子1</div>
		<div class="font20">盒子2</div>
css中：
		.pink{
		color:pink;
		}
		.font20{
		font-size:20px;
		}

两种方法效果都一样，区别不大，只是命名规则上，id独一无二，常用以定义布局名，class用以定义散件的类名；

* ：所有的都改变
elem,elem：分组多选，使用逗号可选择多个元素统一更改
[attribute]：属性选择器，对拥有指定属性及属性值的元素来更改
x contextual：派生选择器，对指定元素的上下文检索并选择下一元素更改样式
- elem elem：后代选择器，可选择父元素下的所有层级的某个子元素更改
- elem>elem：子元素选择器，只对其直接子级元素进行更改，范围变小且对孙元素无效
- elem+elem：相邻兄弟选择器，只对所属父层级之下的同辈级进行改变
elem:pse-class：伪类选择器，用于向某些选择器添加特殊的效果
- a:hover：悬停选择器，当鼠标悬停在所指内容上时样式改变
- a:active：点击选择器，点击访问时链接所改变的样式
- a:link：未访问选择器，未点击访问时链接默认样式
- a:visited：已访问选择器，已点击访问过链接样式
- x:focus：焦点锁定，目标被选中后（获得焦点）锁定一个样式
- x:first-child：第一子元素选择器
- x:lang：向带有指定lang属性的元素添加样式
elem:pse-elem ：伪元素选择器，用于向某些选择器设置特殊效果
- x:first-line：首行选择器，用于向指定元素的首行文本设置特殊样式
- x:first-letter：首字母选择器，向指定元素的文本首个字母设置特殊样式
- x:before：可以在元素的内容前面插入新内容
- x:after：可以在元素的内容之后插入新内容

CSS 优先级和权重

全局优先级：id＞class＞html
css的优先级：最新最底下的部分会优先使用并覆盖之前的部分，即服从后者
html的优先级：link＜style标签＜style属性，即内＞外（越靠近越优先）
link映射css文件的优先级：同样服从后者
明确程度优先级：所属关系越明确，即子集越所多，优先级会更高
!important：特权最高级的破坏规则者，无视其他优先级，最优先更改，慎用！
继承：父标签定义的样式会继承给子子孙孙
权重规则
1. 一等权值1000：内联样式表 style=""；
2. 二等权值0100：ID选择器 #content
3. 三等权值0010：类 .bar、伪类 :hover、属性选择器 [type="text"]
4. 四等权值0001：标签 div 、伪元素 ::first-line
5. 五等权值0000：通配符 *、子选择器 >、相邻选择器 +
6. 继承样式无权值

CSS 基本属性

字体属性 font
- 字体大小 font-size
  
  font-size:1em/40px/100%/smaller/larger/inherit;
  
  未设定字体的默认大小是 16 像素，推荐使用em
- 字体系列 font-family
  
  font-family:Microsoft YaHei/微软雅黑,serif,'New York';
  
  可单独规定也可按排序存在字体的优先级，如没微软雅黑，则会显示serif字体，引号表示字体名中带有空格使用要包含起来
- 字体粗细 font-weight
  
  font-weight:normal/bold/bolder/lighter/100~900;
- 字体风格 font-style
  
  font-style:normal/italic/oblique/inherit;
- 大写字母样式文本 font-variant
  
  font-variant:normal/small-caps/inherit;
背景属性 background
- 背景颜色 background-color
  
  background-color:red/#f60/rgb(255,0,0);
- 背景图片 background-image
  
  background-image:url(bg.jpg);
- 背景图片重复方式 background-repeat
  
  background-repeat:repeat/repeat-x /repeat-y/no-repeat;
- 背景定位 background-position
  
  background-position:center/left top /20px 80px/66% 33%;
  
  // 通过规定x与y的横纵位置来定位背景
- 背景固定 background-attachment
  
  background-attachment:fixed/scroll;
  
  // 固定背景图像，使其不随页面其余部分的滚动而移动
- 合并简写方式
  
  background:#ff6600 url(bg.jpg) no-repeat fixed 20px 80px;
- 背景裁剪（CSS3）
  
  background-clip: border-box|padding-box|content-box;
- 背景相对坐标对象选择（CSS3）
  
  background-origin: padding-box|border-box|content-box;
文本属性
- 水平对齐方式 text-align（盒子里的内容水平对齐，而不是让盒子进行对齐）
  
  text-align：left/center/right/justify;
- 首行缩进 text-indent
  
  text-indent:40px/inherit;
- 字符大小写转换 text-transform
  
  text-transform:none/uppercase/lowercase/capitalize;
- 首行缩进 text-indent
  
  text-indent:5em/-5em/20%;
- 文本下划线装饰 text-decoration
  
  text-decoration:none/underline/overline/line-through/blink;
- 文本颜色属性 color
  
  color:green/#ff6600/#f60/rgb(255,0,0)/rgba(255,0,0,0.6);
  
  // 颜色名十六进制简写 rgb值 rgba透明值
- 文本行高 line-height
  
  line-height:20px/50%;
  
  行距 = line-height - font-size
  
  baseline字体基线之间的距离
- 字符间距
  
  letter-spacing:normal/10px/-8px/inherit;
  
  word-spacing:30px/-0.5em;
  
  一个是字母间隔（letter），另一个是单字/单词间隔（word），作用不同
- 文本书写方向 direction
  
  direction:ltr/rtl;
- 空白符处理 white-space
  
  white-space:normal/pre/nowrap/pre-wrap/pre-line;
  
  设置如何处理元素内的空白
列表属性 list
- 标记类型 list-style-type
- 标记位置 list-style-position
- 图片标记 list-style-image
- 标记简写方式 list-style
表格属性
- 表标题位置 caption-side
  
  caption-side:bottom/top;
- 空表格隐藏 empty-cells
  
  empty-cells:hide/show;
- 表格布局宽度算法 table-layout
  
  table-layout:fixed/automatic;
  
  控制表格是否随表格中内容的增加而扩张

第二章盒子模型

CSS盒模型（box model）本质上是一个封装周围的HTML元素的盒子，它包括边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒模型基本属性

内边距、边框和外边距都是可选的，默认值是零

内边距 padding
- 可用值 10px 0.25em 2ex 20%，但不接受负值
- 单边内边距属性
  
  padding-top padding-right padding-bottom padding-left
- 内边距的百分比数值是相对于其父元素的width宽度来计算的
外边距 margin
- 接受任何长度单位、百分数值与负值
- 单边外边距属性
  
  margin-top margin-right margin-bottom margin-left
  
  另外，margin-left:20px; 等效于margin:auto auto auto 20px;

！注意！！！块元素的垂直外边距会发生合并，合并后会取最大值，详看相关文档！

※ 外边距合并说明

边框 border
- 边框宽度 border-width
  
  border-width:10px/thin/medium/thick;
  
  单边边框宽度 border-top-width border-right-width border-bottom-width border-left-width
  
  无边框：把样式设成border-style:none;，即可取消边框显示
- 边框风格 border-style
  
  border-style: none/solid/dashed/dotted/double/outset;
  
  单边边框 border-top-style border-right-style border-bottom-style border-left-style
- 边框颜色 border-color
  
  border-color:red;
  
  单边边框颜色 border-top-color border-right-color border-bottom-color border-left-color
  
  默认边框颜色为元素本身的前景色；若未声明边框颜色，它将与元素的文本颜色相同，若无文本则会继承父元素的文本颜色
  
  设置一个透明且占宽度的边框 border-color:transparent;
- 边框合并 border-collapse
  
  border-collapse:collapse;
- 边框轮廓 outline
  
  outline outline-color outline-style outline-width

盒模型定位

布局属性
- 定位方式 position
  
  开启相对定位relative 根据父元素（绝对）定位absolute 根据窗口固定定位fixed 没有定位static 继承inherit
- 离页面顶点距离 left right top bottom
- 层覆盖先后顺序（优先级）
  
  z-index:0 1
- 显示属性 display（可以内联块级转换）
  
  层不显示且不占位none 块级显示block 内联显示inline 具有宽高的行内块元素inline-block
- 显示效果visibility
  
  可见visible 隐藏并占位hidden
- 溢出处理 overflow（子元素大小超过父元素的大小）
  
  溢出可见visible 溢出隐藏hidden 强制滚动scroll 溢出自动按需滚动auto
- 浮动属性 float
  
  left right
- 清除浮动 clear
  
  none left right 清除影响最大的浮动both
- 透明度opacity:0~1; 使元素背景透明
  
  不支持IE8即以下浏览器，可使用filter:alpha(opacity=0~100);属性代替
  
  支持IE6，但IE Tester软件中无法测试（bug)
说明：
- 不同的浏览器对外边距（margin）有不同的默认值，故为适应不同浏览器，开始可使用*{margin:0;}来消除浏览器默认的外边距
- 所有元素都是矩形
box-sizing：限制边框的大小，不会使因内容的宽和高更改而改变一般写box之前会添加一个*{box-sizing:border-box;}来先限定填写内容的位置大小，方便之后的更改，原始默认的content-box会覆盖掉，此时边框就不会随内容宽和高的增加而往外扩张
normalize.css：初始化元素样式的css文件，解决不同浏览器兼容问题的规范标准，统一规则。
max-width：定义一个最大宽度，只要设备超过这个极限都按此极限显示。
边距重叠：在网页中垂直方向的相邻外边距会发生重叠，即相邻垂直外边距会取最大值而不是取和；且子元素的外边距也会传递给相邻的父元素
内联元素的盒模型：不能设置width和height，可以设置内边距和边框，但垂直方向的内边距和边框不会影响页面布局，即会悬在上方；同时只支持水平外边距

浮动 float

文档流Normal flow：默认的一种排列方式（从上到下从左到右）即最底层的板块
脱离文档流：脱离之后，将不再在文档流中占据空间，而是处于浮动状态
float 浮动的特点：
- 使盒子块悬空起来，脱离文档流，不排队
- 原空间被后面的元素占用（相当于自行另起一个图层悬浮），即其他元素向上移
- 当其他元素也跟随前者浮动时，其将会跟着前者排队（左浮排在后，右浮排在前）
- 若浮动元素前者是一个未浮动元素（本身为块元素），则其不会超过前者
- 全部浮动，可实现横向排列
- 块元素浮动后宽度和高度都被内容撑开；内联元素浮动后自身会变成块元素
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，故有时可通过浮动来设置环绕图片效果

解决高度坍塌问题

在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高则父元素就多高；当子元素浮动脱离文档流后，此时会导致子元素无法撑起父元素的高度，父元素会坍塌失去高度，即底层没有了内容；跟着父元素之后的所有元素都会向上移动，将导致页面混乱，所有在开发中一定要避免出现高度坍塌的问题。

对于上诉问题，我们有两种解决方案：

可以将父元素高度写死，但写死后父元素将不能自动适应子元素，故此方法不推荐
开启BFC（对IE6无效）
设置zoom（IE6专用）
清除浮动（并非把浮动代码删除，而是处理浮动产生的糟糕布局）

开启BFC

根据W3C标准，在页面中的元素都隐含一个默认关闭的属性叫BFC（Block Formatting Context），当开启BFC以后，元素将会具有如下的特性：

父元素的垂直外边距不会和子元素重叠

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC：（无法直接开启，只能间接开启）

设置元素浮动（可以撑开，但是会失去宽度，且后元素会前移）

设置元素 absolute定位或fixed（问题同上）

设置元素为 inline-block 或 flex（可以撑开，会失去宽度，但后元素不会前移）

将元素的 overflow 设置为一个非visible的值，如 overflow:hidden;（副作用最小，推荐）

IE6中没有BFC，但具有另一个隐含属性hasLayout，该属性的作用和BFC类似，开启方式很多，但副作用最小的方式是添加 zoom:1;（即放大倍数）

BFC：块级作用域 / IFC：内联作用域 / GFC：Grid作用域 / FFC：Flex作用域

清除浮动

由于受到 子盒子 浮动的影响，父盒子整体会塌陷而向上移动，此时我们希望清除掉 子盒子 浮动产生的影响，故要使用clear属性，当清除浮动影响后，父元素会回到 子盒子 浮动前的位置。

清除浮动对后面元素方法与影响：
在浮动元素之后的div元素的样式中添加clear:both;（上边距设置会显示无效）

在浮动元素后面添加一个空的div元素，设置样式为clear:both;（但添加无意义结构会过于累赘）
通过after伪类向元素的最后添加一个空白块伪元素，然后清除浮动，既可解决margin-top和父元素失去高度的问题，又不会添加多余div（推荐使用）
.clearfix::after{
	content: '';
	display: block;
	clear: both;
}
但由于IE6不支持after伪类，在后添加一个zoom:1即可解决问题

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after { /* 普通浏览器用 */
		content: "";
  	display: block;
  	height: 0;
  	clear: both;
  	visibility: hidden;
}										
.clearfix { *zoom: 1; } /* IE6/7专用 */
/* 由于IE6/7不支持:after伪类，需要使用zoom:1触发hasLayout */
/* “*”只能被IE浏览器特定识别 */

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

使用before和after双伪元素清除浮动

使用方法：

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

优点：代码更简洁

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

定位

即将元素摆放到页面的指定任意位置

position:relative; 相对定位
- 开启相对定位：相对于元素在文档流中原来位置进行定位
- 若不设置偏移量，元素则不会发生变化
- 当开启元素定位（即非static值）时，可通过left right top bottom四个属性来设置元素的偏移量，一般只需要两个偏移量即可进行定位
- 相对定位元素并不会脱离文档流，依然占用原位置，只是灵魂出窍了
- 相对定位会使元素提升一个层级，会覆盖住文档流上的内容
- 相对定位不会改变元素本身性质，块依然是块，内联还是内联
position:absolute; 绝对定位
- 开启绝对定位，会使元素脱离文档流
- 若不设置偏移量，元素则不会发生变化
- 绝对定位相对于离它最近的祖先元素进行定位的，若所有的祖先元素都未开启定位，则叫相对于浏览器窗口进行定位（一般情况，开启元素绝对定位时都会同时开启父元素的相对定位）
- 绝对对定位也会使元素提升一个层级
- 绝对对定位会改变元素本身性质，内联会变成块，块元素的宽和高默认都被内容撑开
position:fixed; 固定定位
- 固定定位是一种特殊的绝对定位，大部分特点和绝对定位相同
- 不同点：
  - 永远相对于浏览器窗口进行定位
  - 会固定显示在浏览器窗口某个位置，不会随滚动条滚动
  - IE6不支持固定定位
z-index:1/2/3;元素层级
- 若元素全都开启了定位，则从结构上，最靠下的元素会盖住上面的元素
- 此时可通过z-index设置来提高层级数，越高越优先显示
- 只有开启定位的元素才能使用z-index，即对static无效
- 父元素的层级再高，也不会盖住子元素

盒模型特殊属性

使div内文字居中

.nav{
text-align: center; /*div内文字水平居中*/
line-height: 高度; /*div内文字垂直居中*/
}

第三章 Flex布局

弹性盒子（Flexible Box）：用来为盒装模型提供最大的灵活性，任一容器都可以指定为Flex布局。
flex布局：在父级标题下使用.box{display:flex;}或者 .box{display: inline-flex;}

注意，设为Flex布局以后，子元素（项目）的float、clear和vertical-align属性将失效。
flex容器（flex container）：即采用Flex布局的元素。它的所有子元素自动成为容器成员，称为Flex项目（flex item）

容器属性（整体）

flex-direction：决定主轴的方向，即项目的排列方向

row/row-reverse/column/column-reverse
flex-wrap：决定对应的换行方式

nowrap/wrap/wrap-reverse
flex-flow：flex-direction与flex-wrap的合并简写形式
justify-content：定义项目在主轴上的水平对齐方式

flex-start/flex-end/center/space-between/space-around
align-items：定义项目对应项目垂直对齐方式

flex-start/flex-end/center/baseline/stretch
align-content：定义多根轴线的对齐方式

flex-start/flex-end/center/stretch/space-between/space-around

项目属性（单独）

order：定义项目的排列顺序，即为单个项目定序号，序号越小越排前，默认值为0
flex-grow：定义项目的相对放大比例，即占据容器比例，默认值为0
flex-shrink：定义项目的相对缩小比例，默认值为1
flex-basis：定义在分配多余空间前，项目占句的主轴空间
flex：flex-grow、flex-shrink与flex-basis的合并简写形式
align-self：允许单个项目有与其他项目不一样的对齐方式，即某项目的垂直对齐方式（可覆盖align-items属性）

auto/flex-start/flex-end/center/baseline/stretch

第四章响应式布局

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

<meta name="viewport" content="width=device, initial-scale=1.0">
	<!--viewport视窗 宽度=设备宽度 初始1倍缩放-->
	
<link rel="stylesheet" href="common.css">

<link media="(orientation:landscape)and(min-width:500px)" rel="stylesheet" href="desktop.css">
当手机横向landscape或纵向portrait和屏幕小于

<link media="max-width:500px"rel="stylesheet" href="mobile.css">

媒体查询 Media query

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机

CSS 基础知识（全网最实用总结）