行内/块级/空元素
(1) 行内元素： < span > 、 < a > 、 < img > 、 < input > 、 < strong >
(2) 块级元素： < div > 、 < h1-6 > 、 < p > 、 < table > 、 < form >
(3) 空元素： < br > 、 < hr > 、 < meta >
如何设计元素之间的转换
(1). display:block ：转为块元素，独占一行，行宽高、外边距、内边距都可以设置
(2). display:inline-block ：转为行内块元素，和相邻的行内元素在一行上，但是中间会有空白的间隙，行宽高、外边距、内边距都可以设置
(3). display:inline ：转为行内元素，不占独立成行，仅靠字体大小或图像大小
DIV页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV布局页面</title>
<style type="text/css">
/**{
margin: 0;
padding: 0;
}*/
div.parent{
margin: 0 auto;/*水平居中*/
width: 1000px;
height: 600px;
background-color: blueviolet;
}
div.son1{
background-color: blue;
height: 600px;
width: 500px;
display: inline-block;
float: left;
}
div.son2{
background-color: red;
height: 600px;
width: 500px;
display: inline-block;
float: left;
}
/*div.son{
margin-top: 10px ;
margin-right: 20px ;
margin-bottom: 10px ;
margin-left: 20px ;
border: 10px 20px 30px 40px ;
border-color: green;
border-style: solid;
background-color: cornflowerblue;
width: 400px;
height: 400px;
}*/
</style>
</head>
<body>
<!--<h1 style="background-color: #FF0000;">标题一</h1>-->
<div class="parent">
<div class="son1">
DIV1
</div>
<div class="son2">
DIV2
</div>
</div>
</body>
</html>
DIV页面布局上下型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下结构</title>
<style type="text/css">
/*初始化：所有标签的内外边距清0*/
*{margin: 0;padding: 0;}
.top{
margin: 0 auto;
width: 1000px;
height: 100px;
background-color: #302C48;
}
.main{
margin: 0 auto;
width: 1000px;
height: 300px;
background-color: #008000;
}
h1{
background-color: red;
}
</style>
</head>
<body>
<h1>hello</h1>
<div class="top">
</div>
<div class="main">
</div>
</body>
</html>
DIV页面布局左右型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右结构</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.parent{
margin: 0 auto;
width: 1000px;
overflow: hidden;
}
.left{
float: left;
width: 20%;
height: 500px;
background-color: #302C48;
}
.right{
float: left;
width: 80%;
height: 500px;
background-color: #008000;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
float浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>folat浮动</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.parent{
margin: 0 auto;
width: 1000px;
overflow: hidden;/*子级浮动导致父级高度塌陷的解决方法*/
background-color: #FF0000;
}
.son1{
float: left;
width: 20%;
height: 500px;
background-color: #302C48;
}
.son2{
float: left;
width: 80%;
height: 500px;
background-color: #008000;
}
</style>
</head>
<body>
<div class="parent">
</div>
<div class="son1">
</div>
<div class="son2">
</div>
</body>
</html>
口型结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>口型结果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.top{
margin: 0 auto;
width: 1000px;
height: 100px;
background-color: #302C48;
}
.main{
margin: 0 auto;
width: 1000px;
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: #008000;
}
.right{
float: left;
width: 800px;
height: 400px;
}
.rightTop{
overflow: hidden;
background-color: yellow;
}
.main01{
float: left;
width: 700px;
height: 350px;
background-color: darkgoldenrod;
}
.main02{
float: left;
width: 100px;
height: 350px;
background-color: aquamarine;
}
.rightBottom{
height: 50px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="rightTop">
<div class="main01"></div>
<div class="main02"></div>
</div>
<div class="rightBottom"></div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号