笔记06
一. DIV布局页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV布局页面</title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<br/>
<h1 style="background-color: red;">标题一</h1>
</body>
</html>
二. 块元素 行元素 行内块元素的区别
①块元素独占一行 行元素和行内块元素可以并排
②块元素和行内块元素可设宽高，行元素不可设宽高
三. 标准盒子模型
1.由四层结构构成，从外往内依次为margin border padding content
2.除content其他三层都有四个方向，从上开始依次为top right bottom left
3.定义DIV 的尺寸定义的是content的尺寸
4.背景颜色会应用到除了margin外的所有区域
5.写成一行时，后面跟一个数，上下左右一样；跟两个数，前面的数是上下，后面的数是左右；跟三个数，前面的数是上，中间的是左右，后面的是下
排列鲜花模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>排版鲜花页面</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.text{
width: 1000px;
margin: 0 auto;
overflow: hidden;
/*background-color: red;*/
}
.son1,.son2,.son3,.son4{
float: left;
width: 200px;
height: 200px;
margin-left: 20px;
border: 1px solid #333333;
padding: 20px 11px 50px;
}
/*.son4{margin-right: 20px;}*/
</style>
</head>
<body>
<div class="text">
<div class="son1">
<img src="img/02f18994-98fe-42a2-a7f4-a8fe8a7dfc5f.png"/>
</div>
<div class="son2">
<img src="img/7ba096e5-ecf6-47c3-928d-bb3e5158c4f3.png"/>
</div>
<div class="son3">
<img src="img/ed92893b-de98-48e2-a53d-b54155d7fabf.png"/>
</div>
<div class="son4">
<img src="img/f53d86fb-d3bb-41b8-b0d6-5fced9087165.png"/>
</div>
</div>
</body>
</html>
盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型的外三层结构</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
font-size: 8px;
}
.text{
width: 500px;
height: 500px;
background-color: lavender;
/*padding-top: 50px;
padding-right: 60px;
padding-left: 60px;
padding-bottom: 50px;*/
padding: 50px 60px; /*这句相当于上面四句*/
color: black;
font-size: 2em;
text-indent: 2rem; /*首行缩进2个字符*/
text-align: justify;/*文本两端对齐*/
line-height: 3rem; /*行之间的距离*/
border-bottom: 10px solid orange;
}
</style>
</head>
<body>
<div class="text">
《鲜花》是回春丹乐队演唱的歌曲，由刘西蒙作词、作曲，于2023年9月30日作为单曲发行。《鲜花》是刘西蒙为纪念去世前辈而创作的歌曲，是首治愈系歌曲，歌词美好又热烈，像告白又像告别，像重逢又写满了遗憾与悔恨，唱出了对生命和生活的热爱。
</div>
</body>
</html>
四. Float
Float常跟属性值left、right、none
float:left靠左浮动
float:right靠右浮动
float:none不使用浮动
没有居中浮动
浮动的作用：
1.让盒子从普通流中脱离出来，可以用于让多个盒子一行显示。
2.可以实现盒子的左右对齐。
3.可以用来控制图片实现文字环绕图片的效果。
div默认的宽度是100%
浙公网安备 33010602011771号