1.标准流和display属性
1.浏览器对标签默认的布局方式就是标准流
2.标准流布局原则
块级:
a.块级标签一个占一行（不管标签的宽度是否是浏览器的宽度）.
b.默认宽度是父标签的宽度，默认的高度是内容的高度。
c.直接设置宽高有效
行内块标签:
a.多个行内块可以在一行显示
b.默认的宽度都是内容的宽高
c.直接设置宽高有效
行内标签:
a.多个行内可以在一行显示
b.默认的宽度都是内容的宽高
c.直接设置宽高无效
display
block:块级
inline:行类
inline-block:行内块
注意：行内块和行内块之间有间隙且无法消除。
2.float属性
1.通过给float属性赋值为left或right来让标签浮动。浮动会让标签脱流。
2.浮动的目的:就是让竖着显示的可以横着来(针对块)。
3.浮动的效果
a.所有的标签浮动后:一个可以显示多个;默认宽高是内容的大小;可以设置宽度和高度
b.一行显示不了的时候,才会自动换行.
4.注意事项:
a,如果同一级的标签,后面的需要浮动,前面的也要浮动,否则可能会出现显示的问题
b.浮动的标签不占位置，不浮动的占位置。
5.left和right
left:浏览器左上角对齐
right:浏览器右上角对齐
3.文字环绕效果
被环绕的标签浮动，文字对应的标签不浮动。就会自动产生文字环绕的效果
4清除浮动
清除浮动:清除浮动不是将标签的浮动给去掉,而是清除因为浮动而产生的高度塌陷问题。
产生原因:父标签不浮动,子标签浮动,并且不设置父标签的高度。就会产生塌陷的问题(父标签)
方案一:添加空格子（父标签的后面）
<div style="clear: both;"></div>
方案二：给父标签添加样式设置overflow的值为hidden
方案三：万能清除法
'''
#father:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
#father{
zoom: 1;
}
'''
5.定位
css中可以用过left,right,bottom,top属性来设置标签到上下左右的距离。（但是默认情况下不是这些值都有效的）
想要让定位属性有效，必须通过position属性设置参考对象
1.position
initial：默认值，没有相对定位
absolute:相对第一个非static/initial父标签进行定位
relative:相对于自己标准流位置来定位。（作为一个定位点，被其他标签定位。）
fixed:相对应浏览器定位
sticky:当网页的内容不超过一屏的时候，就按照标准流定位，超过了就按照浏览器定位。
2.注意：如果想要设置right值要保证相对标签的宽度是确定的。如果想要设置bottom值要保证相对对象的高度是确定的。
3.技巧：当遇到某个方向定位死活都无效的时候，可以尝试让这个标签浮动，然后再定位。
6.盒子模型
1.html中所有课件的标签都是一个盒子模型：包括长和宽决定的内容的大小，padding，border，margin四个部分组成。其中内容，padding，border可见，margin不可见。
2
1.内容:设置width和height影响的就是内容部分的大小。添加子标签，添加内容都是放在内容部分的。
2.padding:在内容的外围,可见的部分，如果标签有背景颜色，那么这个部分的颜色和内容的颜色一致。
3.border:边框，border是在padding的外围，如果没有padding就在内容的外围，可见的部分。可以设置颜色和大小。
4.margin：border外面的一部分，不可见。
7.其他属性
1.字体颜色:color
2.字体大小:font-size
3.字体:font-family
4.字体加粗:font-weight
5.字体倾斜:font-style
6.对齐方式:text-align
7.设置一行的高度:line-height
8.文本修饰:text-decoration:none(取消修饰)
作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#font{
position: absolute;
left: 300px;
font-size: 27px;
font-weight: 700;
margin-top: 18px;
float: left;
}
a:link{
color: blue;
text-decoration: none;
}
a:visited{
color:darkgoldenrod;
}
a:hover{
color: red;
text-decoration: underline;
}
a:active{
color: chocolate;
}
#div1{
height: 39px;
background-color: antiquewhite;
}
#div2{
position: relative;
width: 858px;
height: 476px;
float: left;
}
#div3{
width: 347px;
height: 400px;
float: left;
border-style:ridge;
position: relative;
background-color: white;
}
#div4{
float: left;
height: 43px;
width: 307px;
}
#bt1{
position: absolute;
top: 95px;
left: 60px;
height: 36px;
width: 200px;
}
#bt2{
position: absolute;
top: 148px;
left: 60px;
height: 36px;
width: 200px;
}
#bt3{
position: absolute;
top: 250px;
padding-right: 147px;
width: 200px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div style="height: 81px;position: relative;">
<div id="" style="position: absolute;left: 100px;float:left;">
<img src="img/logo.png"/>
</div>
<p id="font">欢迎登陆</p>
<div style="float: left;position: absolute;left: 1082px;bottom: 20px;">
<img src="img/q-icon.png"/><a href="">登录页面，调查问卷</a>
</div>
</div>
<div id="div1">
<div style="margin-left: 323px;position: relative;">
<img style="float: left;" src="img/icon.ico" />
<p style="margin-top: 0;position: absolute;top: 10px;left:40px;font-size: small;">依据《网络安全法》，为保障您的账
户安全和正常使用，请尽快完成手机号
验证！ 新版<a href="">《京东隐私政策》</a>已上线，
将更有利于保护您的个人隐私。</p>
</div>
</div>
<div style="background-color: red;overflow: hidden;">
<div id="div2">
<img src="img/bg1.png" style="margin-left: 276px;position: absolute;top: 96px;"/>
</div>
<div id="div3">
<div style="height: 38px;background-color:antiquewhite;font-size: 10px;">
<div style="position: absolute;top: 10px;left: 15px;">
<img src="img/warning.png" width="15px" height="15px"/>京东不会以任何理由要求您转账汇款，谨防诈骗。
</div>
</div>
<div style="float: left;position: absolute;left: 22px;">
<a href="">扫码登录</a>
</div>
<div style="float: left;position: absolute;left: 222px;">
<a href="">密码登录</a>
</div>
<div id="div4">
<img src="img/pygame.png" style="position: absolute;top: 98px;left: 10px;"/>
<input id =bt1 type="text" name="username" id="username" width="37px" placeholder="邮箱/用户名/已验证邮箱"/>
</div>
<img src="img/password_icon.png" style="position: absolute;left: 10px;top: 150px;"/>
<div>
<input type="password" name="passwd" id=bt2 placeholder="密码"/>
</div>
<div>
<a href="" style="position: absolute;top: 200px;right: 50px;">忘记密码</a>
</div>
<div id="bt3">
<a href="" style="color: black;position: absolute;left: 150px;top: 10px;">登录</a>
</div>
<div style="position: absolute;bottom: 20px;">
<div>
<img src="img/qq.png" style="padding-left: 20px;"/><a href="">QQ</a>
<img src="img/weixin.png"/><a href="">微信 </a>
<img src="img/right.png" style="padding-left:100px;"/><a href="">立即注册</a>
</div>
</div>
</div>
</div>
<div style="height: 156px;position: relative;">
<div style="position: absolute;left: 220px;top: 30px;">
<a href="">关于我们</a>|
<a href="">联系我们</a>|
<a href="">人才招聘</a>|
<a href="">商家入驻</a>|
<a href="">广告服务</a>|
<a href="">手机京东</a>|
<a href="">友情链接</a>|
<a href="">销售联盟</a>|
<a href="">京东社区</a>|
<a href="">京东公益</a>|
</div>
<div style="position: absolute;left: 440px;bottom: 40px;font-size: 10px;">
Copyright © 2004-2018 京东JD.com 版权所有
</div>
</div>
</body>
</html>
test.png
网友评论