wed前端开发技术课堂笔记08——DIV页面布局
行内/块级/空元素
(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 ：转为行内元素，不占独立成行，仅靠字体大小或图像大小
知识点
overflow:hidden 是 CSS 中overflow属性的一个取值，用于裁剪并隐藏超出元素容器范围的内容。
上下结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下结构</title>
<style type="text/css">
/*初始化：所有标签的内外边距都清零*/
*{margin: 0; padding: 0;}
.top{
margin: 0 auto;
width: 1000px;/*所有块级元素默认的大小是100%*/
height: 100px;
background-color: #302C48;
}
.main{
margin: 0 auto;
width: 1000px;
height:400px;
background-color: red;
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="main">
</div>
</body>
</html>
左右结构
<!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: red;
}
</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></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.parent{
margin: 0 auto;
width: 1000px;
overflow: hidden;/*子级导致父级高度塌陷的解决方案*/
background-color: red;
}
.son1{
float: left;
width: 20%;
height: 500px;
background-color: #302C48;
}
.son2{
float: left;
width: 80%;
height: 500px;
background-color:aquamarine;
}
</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;/*所有块级元素默认的大小是100%*/
height: 100px;
background-color: #302C48;
}
.main{
margin: 0 auto;
width: 1000px;
}
.left{
float: left;
width: 200px;
height:400px;
background-color: #ACAFC1;
}
.right{
float: left;
width: 800px;
height:400px;
}
.rightTop{
overflow: hidden;
background-color: red;/*背景色*/
}
.main01{
float: left;
width: 700px;
height: 350px;
background-color: #EBEBEE;
}
.main02{
float: left;
width: 100px;
height: 350px;
background-color: aquamarine;
}
.rightBottom{
height: 50px;
background-color: #DBDDE3;
}
</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号