01.标准流和display属性
02.浮动
03.文字环绕
04.清除浮动
05.定位
06.盒子模型
07.其他常用的属性
01.标准流和display属性
1.标准流：浏览器对标签默认的布局方式就是标准流
2.标准流布局原则：
块级：
a.块级标签一个占一行（不管标签的宽度是否是父标签的宽度）。
b.默认宽度是浏览器的宽度，默认高度是内容高度
c.直接设置宽高有效
行内块标签：
a.多个行内块可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高有效
行内标签：
a.多个行内可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高无效
3.displays属性：转换标签的性质
block：块级
inline：行内
inline-block：行内块
注意：行内块和其他的标签之间默认有间隙，而且这个间隙无法消除
02.浮动
1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动，浮动会让标签脱流。
浮动的目的就是让竖着显示的可以横着来（针对快）
2.浮动的效果
a.所有的标签浮动后，一行可以显示多个；默认的宽高是内容的大小；可以设着宽和高
b.一行显示不了的时候才会自动换行
3.注意事项：
a.如果同一级的标签，后边的需要浮动，前面的也要浮动，否则可能出现显示的问题
b.浮动的标签不占底层的位置，只占顶部的位置；但是不浮动的既占底层又占顶部
03.文字环绕
文字环绕效果：
被环绕的标签不浮动，文字对应的标签浮动。就会自动产生文字环绕的效果
<body>
<img src="img/微信截图_20180919112456.png" style="float: left;"/>
<p>大家分开圣诞节福利科技的说法文件大家分开圣诞节福利科技的说法文件反馈圣诞节福利
大家分开圣诞节福利科技的说法文件反馈圣诞节福利
大家分开圣诞节福利科技的说法文件反馈圣诞节福利
大家分开圣诞节福利科技的说法文件反馈圣诞节福利
大家分开圣诞节福利科技的说法文件反馈圣诞节福利反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利大家分开圣诞节福利科技的说法文件反馈圣诞节福利</p>
</body>
04.清除浮动
1.清除浮动：清除浮动不是将标签的浮动给去掉，而是清除因为浮动而产生的高度塌陷的问题
高度塌陷：父标签不浮动，子标签浮动，并且不设置子标签高度，就会产生高度塌陷的问题（父标签）
2.解决方案
方案一：添加空盒子，在高度塌陷的标签(父标签)的最后添加一个空的div，并设置样式clear的值为both
方案二：给父标签添加样式设置overflow的值为hidden
05.定位
CSS中可以通过left，right，bottom，top属性来设置标签到上下左右的距离(但是默认这些值不是都有效的)
想要让定位属性有效，必须通过position属性来设置参考对象。
1.position
initial：默认值，没有相对定位
absolute：相对第一个非static/initial父标签进行定位
relative：相对于自己在标准流中位置来定位。（当标签本身不希望去定位，只想让自己的字标签可以相对本身来定位的时候使用）
fixed：相对于浏览器定位
sticky：当网页的内容不超过一屏的时候，就按照标准流进行定位，超过就相对了浏览器定位
2.注意：如果想要设置right值要保证相对标签的宽度是稳定的。如果想要设置bottom值要保证相对对象的高度是确定的。
3.技巧：当遇到某个方向定位死活无效的时候，可以尝试将这个标签浮动，然后在定位
06.盒子模型
html中所有可见的标签都是一个黑子模型：包括长和宽决定的内容的大小、padding、border、margin四个部分组成。
其中内容、padding、border是可见的，margin不可见
1.内容：设置width和height影响的就是内容部分的大小。添加字标签、添加内容都是放在内容部分的
2.padding：在内容的外围，可见部分如果标签有背景颜色，那么这个部分的颜色和内容一致
3.border：边框，border是在padding的外围，如果没有padding就在内容的外围，可见部分。可以设置颜色和大小
<style type="text/css">
div{
background-color: red;
/*1.内容*/
width: 100px;
height: 60px;
/*2.padding*/
/*padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*同时设置上右下左的padding值*/
padding: 20px 30px 40px 50px;
/*3.border:宽度 样式 颜色*/
border-left: 2px solid blue; /*单独设置某一边的边框*/
border: 10px double blue; /*同时设置四个边的边框*/
/*4.margin：宽度*/
margin-left: 100px;
}
input{
padding-left: 20px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<div id="" align="center">
aaa
</div>
</body>
07.其他常用的属性
1.字体相关的属性
字体颜色：color
字体大小：font-size
字体名：font-family
字体加粗：font-weight
字体倾斜：font-style
p{
font-family: "微软雅黑";
font-weight: bolder;
font-style: italic;
}
2.对齐方式：text-align
left：左对齐
right：右对齐
center：水平方向居中
p{
text-align: center;
}
3.行高：line-height
设置一行的高度
p{
line-height: 40px;
}
4.文本修饰：text-decoration
none：取消修饰
underline：下划线
overline：上划线
line-through：删除线
a{
text-decoration: none;
}
5.首行缩进：text-indent
单位是：em(表示空格)
p{
text-indent: 2em;
}
6.字间距：letter-spacing
单位：em，px*/
p{
letter-spacing: 2em;
}
<body>
<p>hello world!!<br />你好世界!!</p>
<a href="">不要点！！</a>
</body>
网友评论