零基础教你div布局页面
一.基础知识
行元素：inline，并排不换行；.
块元素：block，可设宽高（宽100%），独占一行
行内块元素：inline-block，可设宽高，并排不换行
1.div的四层结构从外往内：margin,border,padding,content
2.四层当中除了content，其他都有四个方向，从上方开始依次顺时针margin-top,margin-right,margin-bottom,margin-left
3.定义div的尺寸是content的尺寸
4.背景颜色会应用到除了margin之外的所有区域
5.margin,border,padding后面都可以跟1.2.3.4个数：
1个数表示上下，2个数表示左右 ，
3个数表示上 左右 下，4个数表示上 右 下 左
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV布局页面</title>
<style>
*{margin: 0;padding: 0;}
div{
margin-top:10px ;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
border-width:10px 20px 30px 40px ;
border-color:green ;
border-style:solid ;
/*border: 1px solid red;*/
background-color: blue;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<!--<br/> a和img是行元素-->
<h1 style="background-color:red;">标题一</h1>
<div>
DIV
</div>
</body>
</html>
边要想被看到必须有这三种元素：
border-width，border-color,border-style（线性）
border:1px soild red;
soild（实线）dashed（虚线），dotted(圆形虚线)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
<style>
*{margin:0;padding: 0;}
div.parent{
margin:0 auto;/*水平居中*/
width:1000px;
height:600px;
background-color:orange;
}
div.son01{
height:50%;
background-color:blue;
}
div.son02{
height:50%;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son01">
DIX01
</div>
<div class="son02">
DIV02
</div>
</div>
</body>
</html>
tips:最后一部分body中，div(parent)中分为son01和son02两部分，而这两部分分别各为一个div标签。
而div中的 float：left 则是把页面分为左右两部分的作用
margin是盒子外边的距离，盒子与盒子之间的空白
style标签：专门写css标签，控制网页的颜色，大小，布局等（管好看），在head里
script标签:专门写js代码，实现点击，弹窗等功能（管动作） ，放body最后
浙公网安备 33010602011771号