收藏
批改状态：合格
老师批语：
盒模型很形象地形容了块元素在网页的存在，正是这些盒模型的块元素才构成了网页。盒模型有4要素：外边距margin、边框border、padding内边距、content内容。margin和padding只有大小的样式，没有颜色之类的样式，其属性值的顺序为上、右、下、左的顺时针，如margin：3px 4px 5px 6px；也可以上下、左右来定义，而border的样式较多，有线宽、线型等。
以下为盒模型的案列：
<!DOCTYPE html>
<html>
<head>
<title>盒模型</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0;
}
/*盒子模型：内容、padding内边距、border、margin外边距。padding和margin只有大小样式*/
.box{
width: 200px;
height: 200px;
background: lightgreen;
padding: 20px;
border: 4px solid blue;
margin: 10px 5px 30px;/*上、左右、下边距*/
}
.box1 {
width: 100px;
height: 100px;
background: coral;
}
</style>
</head>
<body>
<div class="box">这里是块内容</div>
<div class="box1"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
了解盒模型更加有助于网页的布局；另外padding是直接加在内容上的，并不会把内容往里面挤。
元素的基本对齐方式有4种：1.单行内联元素 2.多行内联元素 3.块元素 4.不定宽块元素
单行内联元素 水平居中：在父级盒子 text-align：center
垂直居中：行高line-height 等于 容器的height
多行内联元素 水平居中：在父级容器中text-align：center
垂直居中：容器 display：table-cell；vertical：middle
3.块元素 水平居中：子元素 margin：0 auto 垂直居中：容器 display：table-cell；vertical：middle
4.不定宽块元素 水平居中：子元素转换成行内元素 display：inline；父级 text-align: center
垂直居中：容器 display：table-cell；vertical：middle
对齐案列如下：
<!DOCTYPE html>
<html>
<head>
<title>4种居中方式</title>
<meta charset="utf-8">
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
border: 3px solid red;
text-align: center;
line-height: 200px;
margin-bottom: 5px;
}
.box2 {
width: 100px;
height: 100px;
border: 1px solid green;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box3{
background: coral;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.box4 {
background: lightgreen;
width: 50px;
height: 50px;
margin: 0 auto;/*水平居中*/
}
ul li {
display: inline;
}
ul {
padding:0;
}
.box5 {
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: lightblue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!-- 1.单行行内文本 -->
<div class="box1">单行文本</div>
<!-- 2.多行行内文本 -->
<div class="box2">单行文本<br>单行文本</div>
<!-- 3.块元素 -->
<div class="box3">
<div class="box4"></div>
</div>
<!-- 4.大小不定的块元素 -->
<div class="box5">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
定位有3种：相对定位、绝对定位、固定定位，后两个定位会脱离文档流
相对定位：相对本身位置进行定位，position：relative，有left、right、top、bottom等属性
绝对定位：相对最近的有定位属性的父级元素进行定位，父级position：relative；子元素position：absolute
固定定位：相对body进行定位 position：fixed
案列如下：
<!DOCTYPE html>
<html>
<head>
<title>绝对定位——十字架</title>
<style type="text/css">
/*绝对定位：相对于距离最近的具有定位属性的父级元素来进行定位，脱离原来的文档流，固定定位fixed的定位父级是body*/
.box1 {
width: 300px;
height: 300px;
background: lightblue;
position: absolute;
left: 300px;
top: 0;
}
.box2 {
width: 300px;
height: 300px;
background: lightgreen;
position: absolute;
left: 0px;
top: 300px;
}
.box3 {
width: 300px;
height: 300px;
background: lightgray;
position: absolute;
left: 600px;
top: 300px;
}
.box4 {
width: 300px;
height: 300px;
background: coral;
position: absolute;
top: 600px;
left: 300px;
}
</style>
</head>
<body >
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：元素之间的margin会覆盖，大的会覆盖小的
固定定位属于相对定位，两者都会脱离文本流，想浮动一样，而相对定位还是属于文档流，相对定位很少用到。
文本的垂直居中基本会用到table-cell 和vertical
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
