web前端入门学习笔记——css基础（传智播客）
第二部分：CSS基础
１ Css概念
CSS 指层叠样式表 (Cascading StyleSheets)(级联样式表)
Css是用来美化html标签的，相当于页面化妆。
◆样式表书写位置
２ 选择器
２.1 写法
选择器是一个选择谁（标签）的过程。
选择器{属性:值； 属性:值;}
属性 | 解释 |
Width:20px; | 宽 |
Height:20px; | 高 |
Background-color:red; | 背景颜色 |
font-size:24px; | 文字大小 |
text-align:left | center| right | 内容的水平对齐方式 |
text-indent:2em; | 首行缩进 |
Color:red; | 文字颜色 |
３ 选择器
３.1 基础选择器
◆标签选择器
标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
★颜色的显示方式
◎直接写颜色的名称
◎十六进制显示颜色
0-9 a-f
#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
◎rgb
◎rgba
A代表alpha 不透明度 值 0-1
◆类选择器（重点）
写法
.自定义类名{属性:值; 属性:值；}
特点： 谁调用，谁生效。
一个标签可以调用多个类选择器。
如：<div class=”boxlsq”>
Class里面空格隔开，而不是用两次class=
多个标签可以调用同一个类选择器。
★类选择器命名规则
◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性或者属性的值来定义类名
◆ID选择器
写法
#自定义名称{属性:值;}
特点： 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
◆通配符选择器
*{属性:值;}
特点：给所有的标签都使用相同的样式。
★不推荐使用，增加浏览器和服务器负担。
３.2 复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
◆交集选择器
标签+类（ID）选择器{属性：值；}
特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
◆后代选择器（重点）
选择器+空格+选择器{属性：值;}
后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：无限制隔代。
只要能代表标签，标签、类选择器、ID选择器自由组合。
◆子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素。
◆并集选择器
选择器+，+选择器+，选择器{属性:值;}
４ 文本元素
４.1 属性
font-size:16px; 文字大小
Font-weight: 700 ; 值从100-900，文字粗细，不推荐使用font-weight:bold;
Font-family:微软雅黑; 文本的字体
Font-style: normal | italic; normal 默认值 italic 斜体
line-height: 行高
４.2 文本属性连写
font: font-stylefont-weight font-size/line-height font-family;
◆：注意：font:后边写属性的值。一定按照书写顺序。
文本属性连写文字大小和字体为必写项。
Font:italic 70016px/40px 微软雅黑;
４.3 文字的表达方式
◆直接写中文名称。
◆写字体的英文名称。
◆unicode 编码
第一步：f12
第二步：找到console
第三步：输入escape(“宋体”) 注意英文的括号和双引号。
５ 样式表书写位置
◆内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
◆外链式写法
写在head里，<link rel=”stylesheet” href=”1.css”>
◆行内样式表
◆三种写法特点:
★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
６ 标签分类(显示方式)
６.1 块元素
典型代表,Div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
６.2 行内元素
典型代表 span ,a, ,strong , em, del, ins
特点：★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
６.3 行内块元素(内联元素)
典型代表 input img
特点：★在一行上显示
★可以设置宽高
６.4 块元素、行内元素
◆块元素转行内元素
display:inline;
◆行内元素转块元素
display:block;
◆块和行内元素转行内块元素
display:inline-block;
７ css三大特性
７.1 层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
７.2 继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
７.3 优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
◆优先级特点
★继承的权重为0
★权重会叠加
８ 链接伪类
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接**的状态
：focus{属性:值；} 获取焦点
８.1 文本修饰
text-decoration: none | underline 下划线 | line-through删除线
９ 背景属性
９.1 background-color 背景颜色
９.2 background-image 背景图片
９.3 Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
９.4 Background-position left | right | center | top | bottom 背景定位
★方位值只写一个的时候，另外一个值默认居中。
★写2个方位值的时候，顺序没有要求。
★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
９.5 Background-attachment 背景是否滚动 scroll | fixed
９.6 背景属性连写
★：连写的时候没有顺序要求，url为必写项。
１０ 行高
◆浏览器默认文字大小
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。
１０.1 行高的单位
行高单位 | 文字大小 | 值 |
20px | 20px | 20px |
2em | 20px | 40px |
150% | 20px | 30px |
2 | 20px | 40px |
总结:单位除了像素以外，行高都是与文字大小乘积。
行高单位 | 父元素文字大小 | 子元素文字大小 | 行高 |
40px | 20px | 30px | 40px |
2em | 20px | 30px | 40px |
150% | 20px | 30px | 30px |
2 | 20px | 30px | 60px |
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
◆推荐行高使用像素为单位。
１１ 盒子模型
１１.1 边框 border
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
◆边框属性的连写
特点：没有顺序要求，线型为必写项。
◆四个边框值相同的写法
特点：没有顺序要求，线型为必写项。
１１.2 边框合并 border-collapse:collapse;如在做细线表格就可一键搞定。
１１.3 获取焦点
label for id 获取光标焦点
１１.4 内边距
Padding-left | right | top | bottom
◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆内边距撑大盒子的问题
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
１１.5 外边距
margin-left | right | top | bottom
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2给父盒子overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
行内元素可以定义左右的内外边距，上下会被忽略掉。
行内块可以定义内外边距。
１２ Fireworks的基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
显示辅助线：从标尺里面往外拉，就会显示辅助线了。拖回去就会消失
清除辅助线： 视图---辅助线----清除辅助线
放大镜 z 放大镜状态下alt+鼠标左键 缩小
抓手 快捷键 空格
测量距离 ★先拉出2根辅助线
★切换到指针工具
★将光标放到2根辅助线之间，按住shift键
取颜色：
点开左下取色工具，移动鼠标位置，即取出移动到的位置的颜色，有十六进制和RGB颜色
１３ 文档流（标准流）
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
１４ 浮动布局
float: left | right
特点：
★元素浮动之后不占据原来的位置（脱标），下一个会占据这个元素的位置（位于下方）
★浮动的盒子在一行上显示
★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display:inline-block;）
１４.1 浮动的作用
◆文本绕图（本来就是为了解决这个问题，故文字不会跑到图片下面，所以才能实现文本绕图。）
◆制作导航
◆网页布局
１５ 清除浮动
（使用目的：既不给父盒子设置高度（因为有的高度不清楚），又要使下面的盒子不会被上面父盒子中浮动的盒子覆盖。）
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
clear: left | right | both
工作里用的最多的是clear:both;
★额外标签法
在最后一个浮动元素后添加标签<div style=”clear:both”></div>
★给父集元素使用overflow:hidden; bfc
如果有内容出了盒子，不能使用这个方法。
★伪元素清除浮动 推荐使用
１６CSS初始化（设默认值）
为了考虑浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化，往往会出现浏览器之间的页面差异。所以，编写网页的第一步应该是先初始化，使不同浏览器呈现的页面效果是一样的。
腾讯：
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","ArialNarrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
新浪：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-family:"SimSun","宋体","ArialNarrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
淘宝：
body, h1, h2, h3, h4, h5,h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select,textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%;}
address, cite, dfn, em, var{ font-style:normal; }
code, kbd, pre, samp {font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover {text-decoration:underline; }
sup {vertical-align:text-top; }
sub{vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select,textarea { font-size:100%; }
table {border-collapse:collapse; border-spacing:0; }
１７ Overflow溢出
１８ 定位
定位方向: left | right | top | bottom
◆position:static; 静态定位。默认值，就是文档流。
◆绝对定位
Position:absolute;
Left/right/top/bottom:30px;
特点：
★元素使用绝对定位之后不占据原来的位置（脱标）
★元素使用绝对定位，位置是从浏览器出发。
★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）
调整元素的层叠顺序：属性
z-index:2;后面的值越大，越在上面。可设置0:999.用于元素被覆盖时使用
◆相对定位
Position: relative;
特点：
★使用相对定位，位置从自身出发（left：20px表示据原来的定位左边差20,即往右走20px.）。
★还占据原来的位置。
★子绝父相（父元素相对定位，子元素绝对定位）工作中用的最多
可以保证父元素不脱标。
★行内元素使用相对定位不能转行内块
◆固定定位（不随浏览器滚动而消失，如导航栏）
Position:fixed;
特点：
★固定定位之后，不占据原来的位置（脱标）
★元素使用固定定位之后，位置从浏览器出发。
★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）
定位的盒子居中显示
★:margin:0auto; 盒子居中，只能让标准流的盒子居中对齐。
（text-align 是内容的对齐方式）
★定位的盒子居中：先左/右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
１９ 标签包含规范
◆div可以包含所有的标签。
◆p标签不能包含div h1等标签。
◆h1可以包含p，div等标签。
◆行内元素尽量包含行内元素，行内元素不要包含块元素。
详细的包含规范见下图
flow:所有的文档流，即块元素、行内元素
２０ 规避脱标流
◆尽量使用标准流。
◆标准流解决不了的使用浮动。
◆浮动解决不了的使用定位。
规避浮动和定位的一个小方法：同理margin:0 auto;为盒子居中
２１ 图片和文字垂直居中对齐
vertical-align垂直对齐，对inline-block最敏感。默认属性是:vertical-align:baseline;
更详细的可看一个个人网站：www.zhangxinxu.com
２２ Css可见性
overflow:hidden; 溢出隐藏 当内容出了盒子之外就隐藏。
结合锚点使用，可用于鼠标放置显示，移开不显示
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
Display:block; 元素可见
Display:none 和display:block ；常配合js使用。
css之内容移除（网页优化）
◆使用text-indent:-5000em;
◆将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。
Css精灵图
１０ 属性选择器
选中标签及其属性
２３ emmet快捷键：
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
１２ html:
１２.1 生成结构的快捷键：
！+ tab,可以生成html5的结构代码。
１２.2 生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
１２.3 生成同级元素：
标签名+标签名+标签名 “+”tab
１２.4 生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
１２.5 带固定数量的标签:
ul>li*5+tab
１２.6 带有序号名称
ul>li.abc$*3 +tab
１２.7 生成带有内容的标签：
ul>li>a{item}*5
１３ css
width:30px==>w30+tab
Height:30px==>h30+tab
Margin:30px==>mg30+tab
Padding:30px==>pd30+tab
Line-height:12px==>lh12px+tab
Background==>bg+tab