html03

快速开发指南：
1.新建页面之后，编写外部样式表文件，引入到HTML页面中
2.用浏览器打开页面->F12->sources->打开css文件
右边编写样式，左边查看效果
3.样式编写完成将样式文件整体复制到自己项目的css文件中保存
css中Ctrl+/注释 (只在F12调试工具中能用)
Elenemts->Style->img 方向键上下调值
border是行内元素，不能设置宽度，必须display：line-block;

水平居中需要宽度
垂直居中需要高度
border:1px solid; 大部分情况下用来调试的
css中Ctrl+/注释
/*有宽度的盒子的水平居中用margin*/
margin:0 0 0 0;

=====================================================================
1.居中问题（水平居中问题）
1）文字居中
text-align:center
2）表格的整体居中
align：center
3）（已知宽度的）盒子居中
margin:0 auto;
原理：里面盒子的margin-left=（外width-内width）/2
2.margin 外边距
margin-top;
margin-right;
margin-bottom;
margin-left;
合并写法：
margin:margin-top margin-right margin-bottom margin-left; 4个值时
margin:margin-top margin-right&margin-bottom margin-left; 3个值时
margin:margin-top&margin-left margin-right&margin-bottom; 2个值时
margin:margin-top&margin-left&margin-right&margin-bottom; 1个值时 4方向
padding 内边距 ->会撑开盒子宽高

3.元素的分区
块级元素（div h1 table ul）
独占1行，可以设置宽高，默认布局从上往下
行内元素（span label）
可以跟其他元素共享一行，但是不可以设置宽高，默认布局从左往右
行内块（既是行内元素，又是块元素 如：img input）
可以设置宽高，并且可以跟其他元素共享一行

*可以通过display属性，修改元素的分区形式（显示形式）
*display
block ：块级元素
inline: 行内元素
inline-block:行内块
none:表示隐藏(隐藏状态可以释放空间)
ps:opacity:0 (透明度，设置0，可隐藏，但是不释放空间)

标签分类 （块级元素 行内元素）
块级元素有行高 （如：div）
行内元素没有宽高 （如：span） 只能由内容撑开

4.定位的问题
标准文档流（ 默认 又叫流布局： 从上往下，从左往右）
（块元素从上往下，行内元素从左往右）
定位：指定元素相对于（它自己）正常位置应该出现的位置
*position： -> 通常结合top，right，bottom，left一起使用
relative ->相对定位 ->不脱离标准文档流（不会让出原来的位置）
相对于原本应该出现的位置移动
absolute ->绝对定位 ->脱离标准文档流（会让出原先的位置）
相对于定位了的祖先节点移动
外层盒子，相对定位。里面盒子绝对定位
fixed ->固定定位 ->脱标
用bottom不会错，相对于屏幕定位
通常固定定位结合bottom一起使用

5. z-index 堆叠
z-index:10 数值越大，距离用户越近

6.浮动定位 ->脱标
float：left float：right
可以用浮动将li显示在同一行，结合list-style:none使用
overflow:hidden; 清除浮动
clear:both; 清除左右浮动

*浮动的元素无法撑开父盒子的高度
此时需要清除浮动带来的影响
清除的方式3种
1）给父盒子添加overflow属性，给一个hidden
2）给父盒子添加固定高度
3）给父元素添加用来清除浮动的节点（元素），该节点添加clear属性，给一个both
4）css3提供的伪元素法（使用最多） div:after