标准流和浮动
1.标准流
标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度，
并且可以设置宽度和高度
行内标签，一行可以显示多个，默认的高度和宽度都是内容的宽度；设置宽高无效
行内块标签，一行可以显示多个，默认的宽度和高度都是内容的高度；设置宽高有效
块级标签：h1-h6, p, hr, ul/dl/ol/li, table/tr,
行内标签：a, img, td, input, textarea, select
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.a{
height: 100px;
background-color: palegreen;
}
.b{
width: 100%;
height: 400px;
background-color: pink;
/*float: left;*/
/*display: inline-block;*/
}
.c{
width: 100%;
height: 100px;
background-color: aquamarine;
}
.aa{
width: 20%;
height: 400px;
background-color: orange;
float: left;
overflow: hidden;
}
.bb{
width: 70%;
height: 400px;
background-color: cyan;
float: left;
overflow: hidden;
}
.cc{
width: 10%;
height: 400px;
background-color: papayawhip;
float: left;
overflow: hidden;
}
</style>
2.display(设置标签的性质)
block：将标签设置为块级标签
inline-block:将标签设置为行内块标签(注意：一般不会通过将标签转换成行内块元素)
inline:将标签设置为行内标签
float属性
1.浮动原理：
a.浮动会让标签脱离标准流进行布局(脱流)
b.没有浮动的标签，即占池底的位置，也占水面的位置。浮动后只占水面的位置
2.float属性
left：左浮动
right：右浮动
清除浮动
1.清除浮动
清除浮动指的是因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候会产生高度塌陷问题
3.清除方法
a.添加空的div: 在父标签的最后添加一个空的div，并且设置样式clear的属性值为both
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden
overflow：hidden
文字环绕效果
文字环绕：被环绕的标签（例如图片对应的标签）浮动；文字对应的标签不浮动
定位
css可以通过left，right，top，bottom来对标签进行定位。前提是设置参考对象
1.定位属性
left:
right:
top:
bottom:
注意：定位需要通过position属性来设置参考对象
当标签的宽度固定时，同时设置left和right只有left有效；top和bottom同理
可以同时设置left和right，不设置宽度，或者宽度值为auto的时候，标签会自动拉伸；top和bottom同理
2.position属性
initial:默认值
static:
absolute:绝对定位，相对于static定位以外的第一个父元素进行定位
设置了绝对定位的元素,会去其祖先元素寻找最近的一个拥有定位属性的元素,
并且根据它来定位；如果没有的话,就根据body来定位
relative:相对定位，让内部的元素根据它来定位,同时不影响自身的布局
fixed:固定定位
sticky:粘性定位，只针对网页底部的标签定位。如果网页内容超过一屏(需要滚动)的时候相对浏览器定位
overfolw:hidden -- 裁掉自己的子标签超出自己的范围的部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 1500px;
}
.a{
height: 100px;
width: 100px;
background-color: palegreen;
/*margin: 150px auto;*/
position: relative;
}
.b{
height: 50px;
width: 50px;
background-color: palevioletred;
position: absolute;
left: -30px;
top:-30px
}
.c{
height: 50px;
width: 50px;
background-color: pink;
position: fixed;
right: 50px;
bottom: 50px;
}
.d{
height: 100px;
background-color: palegreen;
position: sticky;
}
</style>
盒子模型
html中所有的标签都是盒子模型。有固定的结构，包括content,padding,border,margin四个部分
内容：可见的，设置width和height实质就是设置内容的大小；
添加子标签或者设置文字内容或者显示在内容部分的
可以设置background——color会作用于内容部分
padding：可见的。分上下左右四个部分。一般默认都是0
border：同时设置
border-left
border-right
border-bottom
border-top
border-raius:设置圆角
border-left-bottom-radius:左下角
margin：不可见，分上下左右。一般默认值为0
作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #f7f7f7;
}
.content{
width: 1000px;
height: 100%;
margin: 0 auto;
}
.header{
height: 90px;
background-color: white;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: relative;
}
.menu{
height: 50px;
background-color: black;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.logo img{
margin: 15px 0 0 5px;
height: 50px;
}
.search{
line-height: 50px;
position: absolute;
top: 20px;
right: 20px;
}
ul{
list-style: none;
width: 100%;
}
ul li{
line-height: 50px;
color: white;
float: left;
margin: 0 0 0 50px;
}
.datu{
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: relative;
}
.datu img{
width: 100%;
}
.son{
width: 200px;
height: 150px;
color: white;
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
padding: 20px;
left: 20px;
bottom: 100px;
}
.second{
background-color: white;
overflow: hidden;
}
.news{
width: 460px;
height: 200px;
/*background-color: palegoldenrod;*/
float: left;
padding: 20px;
}
.jieshao{
width: 210px;
height: 200px;
background-color: #E4E4E4;
float: left;
padding: 20px;
}
.zhaopin{
width: 210px;
height: 200px;
background-color: ghostwhite;
float: left;
padding: 20px;
}
.thrid{
height: 250px;
width: 980px;
background-color: white;
padding: 30px 10px;
}
.thrid ul li{
width: 180px;
height: 180px;
margin: 20px 15px 5px 45px;
/*background-color: powderblue;*/
}
.thrid ul li .pic{
width: 180px;
height: 150px;
}
.thrid ul li .word{
color: black;
width: 180px;
line-height: 30px;
/*height: 25px;*/
/*margin: 5px 0 0 0 ;*/
}
.fourth{
background-color: #E4E4E4;
overflow: hidden;
}
.fourth .chanpin{
height: 280px;
width: 460px;
padding: 20px 20px;
/*background-color: palegreen;*/
float: left;
}
.fourth .chanpin table{
font-size: 12px;
margin: 30px 0 0 10px;
}
.fourth .chanpin table tr{
width: 100%;
line-height: 35px;
}
.fourth .chanpin table td{
width: 150px;
}
.fourth .jishu{
height: 280px;
width: 160px;
padding: 20px 20px;
/*background-color: paleturquoise;*/
float: left;
}
.fourth .jishu table{
font-size: 12px;
margin: 30px 0 0 10px;
}
.fourth .jishu table tr{
width: 100%;
line-height: 35px;
}
.fourth .jishu table td{
width: 150px;
}
.fourth .yinxiao{
height: 280px;
width: 260px;
padding: 20px 20px;
/*background-color: palevioletred;*/
float: left;
}
.five{
height: 100px;
background-color: white;
position: relative;
}
.five ul li{
font-size: 12px;
color: black;
float: left;
}
.five .xinxi{
line-height: 50px;
font-size: 12px;
position: absolute;
right: 200px;
}
.five .fenxiang{
line-height: 50px;
font-size: 12px;
position: absolute;
right: 100px;
}
</style>
</head>
<body>
<div class="content">
<div class="header">
<div class="logo">
<img src="img/logo.jpg"/>
</div>
<div class="search">
<form>
<input type="text" name="" id="" value="" placeholder="search"/>
<input type="button" name="" id="" value="搜索" />
</form>
</div>
</div>
<div class="menu">
<ul>
<li>集团介绍</li>
<li>产品中心</li>
<li>卧龙市场</li>
<li>技术研发</li>
<li>国际合作</li>
<li>投资者关系</li>
<li>新闻资讯</li>
<li>人力资源</li>
</ul>
</div>
<div class="datu">
<img src="img/111.jpg"/>
<div class="son">
文字内容
</div>
</div>
<div class="second">
<div class="news">
<p style="line-height: 50px;">新闻资讯</p>
<table>
<tr>
<td width="350px">文字内容</td>
<td>时间日期</td>
</tr>
<tr>
<td>文字内容</td>
<td>时间日期</td>
</tr>
<tr>
<td>文字内容</td>
<td>时间日期</td>
</tr>
<tr>
<td>文字内容</td>
<td>时间日期</td>
</tr>
<tr>
<td>文字内容</td>
<td>时间日期</td>
</tr>
<tr>
<td>文字内容</td>
<td>时间日期</td>
</tr>
</table>
</div>
<div class="jieshao">
<h4 style="margin: 0 0 0 10px; line-height: 20px;">卧龙介绍</h2>
</div>
<div class="zhaopin">
<h4>人才招聘</h4>
</div>
</div>
<div class="thrid">
<p>卧龙市场</p>
<ul>
<li>
<div class="pic">
<img style="width: 180px; height: 150px;" src="img/p1.jpg"/>
</div>
<div class="word">
文字内容
</div>
</li>
<li>
<div class="pic">
<img style="width: 180px; height: 150px;" src="img/p2.jpg"/>
</div>
<div class="word">
文字内容
</div>
</li>
<li>
<div class="pic">
<img style="width: 180px; height: 150px;" src="img/p3.jpg"/>
</div>
<div class="word">
文字内容
</div>
</li>
<li>
<div class="pic">
<img style="width: 180px; height: 150px;" src="img/p4.jpg"/>
</div>
<div class="word">
文字内容
</div>
</li>
</ul>
</div>
<div class="fourth">
<div class="chanpin">
<h4>产品中心</h4>
<hr />
<table>
<tr>
<td>汽车电视</td>
<td>工业驱动和自动化</td>
<td>电池电源</td>
</tr>
<tr>
<td>日用电机</td>
<td>高压变频和系统集成</td>
<td>输变电设备</td>
</tr>
<tr>
<td>特种电机</td>
<td>混泥土搅拌机</td>
<td>楼盘信息</td>
</tr>
<tr>
<td>大功率电机</td>
<td>电动车辆</td>
<td>金融产品</td>
</tr>
<tr>
<td>电工设备</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="jishu">
<h4>技术研发</h4>
<hr />
<table>
<tr>
<td>科技力量</td>
</tr>
<tr>
<td>先进设备</td>
</tr>
<tr>
<td>研发创新</td>
</tr>
<tr>
<td>工艺流程</td>
</tr>
</table>
<!--<ul>
<li>科技力量</li>
<li>先进设备</li>
<li>研发创新</li>
<li>工艺流程</li>
</ul>-->
</div>
<div class="yinxiao">
<h4>营销网络</h4>
<hr />
<img src="img/map.png"/>
</div>
</div>
<div class="five">
<ul>
<li>网站地图</li>
<li>联系我们</li>
<li>关注卧龙</li>
<li>采购系统入口</li>
</ul>
<span class="xinxi">版权信息： </span>
<span class="fenxiang">分享</span>
<img src=""/>
<img src=""/>
</div>
</div>
</body>
</html>
结果：
11.JPG
22.JPG
网友评论