1.浮动属性
标准流:浏览器对标签默认的布局方式就是标准流
块级:
2.标准流布局
标准流布局原则:块级标签一个占一行(不管标签的宽度是否是浏览器的宽度)，
a.块级标签默认宽度是；父标签的宽度
b.默认高度是内容的高度
c.块级标签直接设置宽高是有效的
行内块标签:img（置换元素）
a.多个行内块可以在一行显示
b.默认宽高是内容宽高
c.直接设置宽高有效
行内标签:a
a.多个行内标签可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高无效
3.display属性:转换标签的性质
display:block; 设置块级元素
display:inline-block;设置行内块
display:inline;设置行内标签
注意1:行内块标签和其他的标签之间默认有间隙，而且这个间隙无法消除
注意:置换元素<img><input><textarea><select><object>
有内置的宽高属性，可以设置宽高
4.浮动
1.怎么浮动
通过给css里面设置float属性float属性设置为left或者right来让标签浮动。浮动会让标签脱流
浮动的目的就是让竖着显示的可以横着来(针对块)
2.浮动的效果:
a.所有的标签浮动后,一行可以显示多个;默认的宽高是内容的大小；可以设置宽度和高度
b.一行显示不了的时候才会自动换行
<a href=''></a>
3.注意事项:
a.如果同一级的标签，后面的需要浮动，前面的也要浮动，否则可能会出现问题
b.浮动的标签不占池底的位置，只占水面的位置；不浮动的即占池底又占水面
c.left左对齐，right右对齐
#div1{
background-color: salmon;
width:100%;
height:200px;
}
#div2{
background-color: seagreen;
float: left;
width:30%;
height:800px;
}
#div3{
background-color: skyblue;
float: left;
width:40%;
height:800px;
}
#div4{
background-color: seagreen;
float: left;
width:30%;
height:800px;
}
<div id="div1">
</div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'></div>
4.应用：文字环绕
被环绕的标签浮动，文字对应的标签不浮动。就会自动产生文字环绕的效果
5.清除浮动:清除浮动不是将标签的浮动去掉，而是清除因为浮动而产生的高度塌陷的问题
高度塌陷:父标签不浮动，子标签浮动并且不设置父标签的高度，就会产生高度塌陷的问题
清除浮动方式1：在父标签的最后添加新的div,并且设置其style里的clear为both
<div style='clear:both;'></div>
清除浮动方式2:给父标签添加样式overflow的值为hidden
<div style='overflow:hidden;'>
清除浮动方式3::通过父标签的style设置清除方式（万能清除法）
清除方式
div #father{
display:block;
clear:both;
content:'';
visibility:hidden;
height:0;
}
div #father{
zoom:1;
}
5.CSS可以通过left，right，bottom,top属性来设置标签的上下左右距离（但是默认情况下这些值不是都有效的）
想要让定位属性有效，通过position属性来设置参考对象。
1.position属性:
-absolute: 生成绝对定位的元素，相对第一个非static/initial父标签进行定位
-fixed:直接相对于浏览器定位
-relative:相对于自己在标准流中的位置定位，当标签本身不希望去定位，只是想让自己的子标签可以相对其定位的时候使用
-static:
-sticky:当网页的内容不超过一屏（不滚动）的时候，就按照标准流进行定位，超过了就相对浏览器进行定位
-initial:默认值，没有相对定位
2.注意:如果想要设置right值，要保证相对标签的宽度是确定的。如果想要设置bottom值，就要保证相对对象的height是确定的
3.技巧:当遇到某个方向定位死活都无效的时候，可以尝试让这个标签浮动，然后再定位
6.盒子模型
html中所有可见的标签都是一个盒子模型：包括长和宽决定的内容的大写，padding、border、margin四个部分组成。其中内容、padding、和
border是可见的部分，margin不可见
margin >border >padding >内容
图片.png
1.内容：设置width和height影响的是内容部分的大小。添加子标签、添加内容都是放在内容部分
2.padding:在内容的外围，可见部分，如果标签有背景颜色，那么这个部分的颜色和内容的颜色一致
padding-top:0px
padding-bottom:0px
padding-left:0px
padding-right:0px
3.border:边框，如果有padding添加到padding外边，如果padding没有宽度添加到内容的外面
border-top: 宽度 样式(solid(实线),dashed(虚线),dotted(点划线),double(双线)) 颜色
border-bottom:
border-left:
border-right:
border-radius:10px,可以通过这种方式设置圆角，值越大弧度越大
4.margin:添加到边框的外边，可以起到占位的作用
margin-left:宽度
margin-right:
margin-top:
margin-bottom:
7.其他常用的属性
1.字体相关的属性
字体颜色:color
字体大小:font-size
字体名:font-family,控制字体的表现类型
字体加粗:font-weight:bolder(更粗)/bold(加粗)/normal(常规)/100-900
字体倾斜:font-style:italic(倾斜)/oblique(倾斜)/normal(正常)
2.对齐方式 text-align:left(左对齐)/right(右对齐)/center(水平方向居中)
3.行高属性 line-height设置一行的高度，可以通过这个属性设置一行文字的垂直居中
4.文本修饰属性:text-decoration
none:取消修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
5.首行缩进属性:text-indent:value
value的单位是em，表示空格，例如2em就是两个空格
6.字间距属性letter-spacing:value
value的单位是em，表示空格，例如2em就是两个空格,也可以是像素px,或者%
7.列表相关的属性
list-style-type:disc(实心圆)/circle(空心圆)/none(去掉)
list-style-image:url(地址) 将图片设置成列表的前面的提示
list-style-position:inside(里面)/outside(外面)
8.背景图片
background: 图片地址 是否平铺 x方向的坐标 y方法的坐标 背景色
background-image:url(图片地址) no-repeat(不平铺) 位置
网友评论