一、标准流和display属性：
1.标准流：浏览器对标签默认的布局方式就是标准流
2.标准流布局原则：
块级：a.块级标签一个占一行(不管标签的宽度是否是父标签的宽度)。
b.默认宽度是父标签的宽度，默认高度是内容的高度
c.直接设置宽高有效
行内块标签：
a.多个行内块可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高有效
行内标签：
a.多个行内可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高无效
3.display属性：转换标签的性质
block:块级
inline:行内
inline-block:行内块
注意：行内块标签和其他标签之间默认有间隙而且这个间隙无法消除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.display属性*/
#div1{
background-color: salmon;
width: 100px;
height: 100px;
}
#div2{
background-color: seagreen;
width: 100px;
height: 100px;
}
div{
display: inline-block;
}
img{
display: inline;
width: 100px;
height: 100px;
background-color: saddlebrown;
}
a{
display: block;
background-color: slateblue;
width: 200px;
}
</style>
</head>
<body>
<!--默认块级-->
<div id="div1">
aaa
</div>
<div id="div2">
aaa
</div>
<!--默认是行内-->
<a href="">百度一下</a>
<a href="">百度一下</a>
<!--默认是行内块-->
<img src="img/luffy4.jpg"/>
<img src="img/luffy4.jpg"/>
</body>
</html>
二、浮动：
1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动。浮动会让标签脱流。
浮动的目的就是让竖着显示的可以横着来(针对块)
2.浮动的效果:
a.所有的标签浮动后，一行可以显示多个；默认的宽高是内容的大小；可以设置宽度和高度
b.一行显示不了的时候才会自动换行
3.注意事项:
()
a.如果同一级的标签，后边的需要浮动，前面的也要浮动，否则可能会出现显示的问题
b.浮动的标签不占池底位置，只占水面的位置；不浮动的既占池底又占水面
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="div1" style="background-color: rgba(255,255,0,0.3); width: 50%; height: 100px; float: left;">
</div>
<div id="" style="background-color: slateblue;width: 40%; height: 150px; float: left;">
</div>
<div id="div2">
</div>
</body>
</html>
三、浮动（文字环绕）：
文字环绕效果：
被环绕的标签浮动，文字对应的标签不浮动。就会自动产生文字环绕的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/luffy4.jpg" alt="" style="float: left; width: 100px; height: 100px;"/>
<p>来自：http://blog.csdn.net/lethwei/article/details/4334728
因为项目需要, 要更改 TreeView 的 StateImageList 大小, 试了下, 更改绑定的 StateImageList.ImageSize 没有作用, 显示大小始终是 16x16
在网上搜了搜, 相关资料比较少, 终于在 CodeProject 上找到问题原因:
http://www.codeproject.com/KB/tree/customstatetreeview.aspx?display=PrintAll&fid=313614&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=1519145
附文:
Underlying comctl treeview uses a zero image index, indicating no state image is displayed.
Thus comctl state imagelist must have a dummy as first image.
.NET copies the passed StateImageList to a new NET internal imagelist.
The first image is duplicated, serving as dummy and the copy is passed to comctl.
TreeNode.StateImageIndex values passed to comctl are then increased by 1.
This might have been a nice feature, but WinForms Team blundered using a constant 16 x 16 size for the copy.
If you want different size, use code below and add a dummy as first image.</p>
</body>
</html>
四、清楚浮动：
-
清除浮动：清除浮动不是将标签的浮动给去掉，而是清除因为浮动而产生的高度塌陷的问题
高度塌陷：父标签不浮动，子标签浮动，并且不设置父标签的高度，就会产生高度塌陷的问题(父标签)
方案一：添加空盒子，在高度塌陷的标签(父标签)的最后添加一个空的div,并设置样式clear的值为both
方案二：给父标签添加样式设置overflow的值为hidden
方案三: 万能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案二：设置overflow*/
/*#father{
overflow: hidden;
}*/
/*方案三：*/
#father:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
#father{
zoom: 1;
}
</style>
</head>
<body>
<div style="background-color: salmon; height: 120px;"></div>
<div id="father" style="background-color: seagreen;">
<div id="" style="background-color: skyblue; height: 100px; float: left; width: 20%;">
</div>
<div id="" style="background-color: slateblue; height: 300px; float: right; width: 30%;">
</div>
<div style="background-color: salmon; width: 81%; float: left; height: 200px;"></div>
<!--方案一:添加空盒子-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="background-color: sienna; width: 100%;height: 200px;"></div>
</body>
</html>
五、定位：
CSS中可以通过left,right,bottom,top属性来设置标签到上下左右的距离(但是默认情况下这些值不是都有效的);
想要让定位属性有效，必须通过position属性来设置参考对象。
1.position
initial: 默认值, 没有相对定位
absolute: 相对第一个非static/initial父标签进行定位
relative: 相对于自己在标准流中位置来定位。（当标签本身不希望去定位，只是想让自己的子标签可以相对本身来定位的时候使用）
fixed：相对应浏览器定位
sticky:当网页的内容不超过一屏(不滚动)的时候，就按照标准流进行定位。超过了就相对浏览器定位
2.注意：如果想要设置right值要保证相对标签的宽度是确定的。如果想要设置bottom值要保证相对对象的高度是确定的
3.技巧：当遇到某个方向定位死活都无效的时候，可以尝试让这个标签浮动，然后再定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
right: 100px;
bottom: 20px;
position: absolute;
}
</style>
</head>
<body>
<!--1.absolute-->
<!--<div id="" style="background-color: skyblue; width: 700px; height: 800px;">
<div id="" style="background-color: sandybrown; width: 400px; height: 400px; position: relative;">
<div id="div1" style="background-color: seagreen; width: 100px; height: 100px;">
</div>
</div>
</div>-->
<!--2.relative-->
<!--<div id="" style="background-color: lightskyblue; height: 100px;">
</div>
<div id="" style="background-color: sandybrown; height: 120px; width: 100px; top: 100px; position: relative;">
</div>-->
<!--3.fixed-->
<!--<div id="top" style="background-color: chartreuse; height: 20000px;">
aaaaaaaa
<div id="" style="background-color: hotpink; width: 100px; height: 50px; right: 20px; bottom: 20px; position: fixed;">
<a href="#top">回到顶部</a>
</div>
</div>-->
<!--4.sticky-->
<div id="top" style="background-color: chartreuse; height: 20000px;">
</div>
<div id="" style="background-color: hotpink; width: 100%; height: 50px; bottom: 20px; position: sticky;">
<a href="#top">回到顶部</a>
</div>
</body>
</html>
六、盒子模型：
html中所有可见的标签都是一个盒子模型：包括长和宽决定的内容的大小、padding、border、margin四个部分组成。
其中内容、padding、border是可见，margin不可见
1.内容：设置width和height影响的就是内容部分的大小。添加子标签、添加内容都是放在内容部分的
2.padding：在内容的外围，可见部分，如果标签有背景颜色，那么这个部分的颜色和内容的一致
3.border：边框，border是在padding的外围，如果没有padding就在内容的外围，可见部分。可以设置颜色和大小
4.margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: skyblue;
/*1.内容*/
width: 100px;
height: 100px;
/*2.padding
* padding-方向:宽度
*/
/*padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*同时设置上右下左的padding值*/
/*padding: 10px 20px 100px 50px;*/
/*同时设置上下和左右*/
/*padding: 20px 100px;*/
/*同时设置所有方向的padding都是20px*/
padding: 100px;
/*3.border:宽度 样式 颜色
* 样式:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
*/
/*单独设置某一边的边框*/
/*border-left: 20px solid red;*/
/*同时设置四个边的边框*/
border: 10px solid red;
/*4.margin：宽度
*
*/
margin-left: 200px;
}
input{
padding-left: 20px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<div id="">
abc卡的哈哈双方都世纪东方哈啥
</div>
</body>
</html>
七、其他常用的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.字体相关的属性
* 字体颜色:color
* 字体大小:font-size
* 字体名:font-family
* 字体加粗:font-weight(bolder(更粗的)/bold（加粗）/normal（常规）/100—900)
* 字体倾斜：font-style(italic/oblique/normal)
*/
p{
font-family:"微软雅黑";
font-weight: 100;
font-style: italic;
}
/*2.对齐方式:text-align
* left:左对齐
* right:右对齐
* center: 水平方向居中
*/
p{
text-align: left;
}
/*3.行高：line-height
* 设置一行的高度
*/
p{
/*一行内容在垂直方向上居中，可以通过将line-height的值设置为和height的值一样*/
line-height: 100px;
}
/*4.文本修饰：text-decoration
* none: 取消修饰
* underline:下划线
* overline:上划线
* line-through:删除线
*/
a,p{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
/*5.首行缩进：text-indent
* 注意单位是：em（表示空格）
*/
p{
text-indent: 2em;
}
/*6.字间距：letter-spacing
* 单位可以是：px,em
*/
p{
letter-spacing: 2px;
}
/*7.列表相关的*/
ul{
/*margin-left: 100px;*/
/*list-style-type: none;*/
list-style-image:url(img/luffy2.png);
list-style-position:inside;
}
/*8.背景图片
* background:图片地址 是否平铺 x方向的坐标 y方向的坐标 背景色
*/
#div{
width: 300px;
height: 200px;
/*background-image: url(img/luffy4.jpg);*/
background: url(img/luffy2.png) no-repeat center 0px yellow;
}
/*9.设置圆角*/
#div{
/*border-bottom-left-radius: 10px;
border-radius: 30px;*/
border-radius: 10px 100px;
border:3px solid red;
}
</style>
</head>
<body>
<a href="">百度一下</a>
<p style="background-color: burlywood; height: 100px;">我是段落：hello world我是段落：hello world</p>
<ul>
<li>数学</li>
<li>语文</li>
</ul>
<div id="div">
<!--<div id="" style="background-color: hotpink; height: 60px; width: 80px; float: right;">
</div>-->
</div>
</body>
</html>
