1.什么是盒子模型?盒子模型的属性有哪几个?它们的作用分别是什么?
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
盒子模型边框(border)
属性:border-width(设置边框宽度)|border-style(设置边框样式)|border-color(设置边框颜色)
边框有四条边,单独设置某条边(top|right|bottom|left)
如: border-top-width|border-top-style|border-top-color
盒子模型的内边距(padding)
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
盒子模型的外边距(margin)
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
2.盒子模型有哪几种解析方式?它们有什么区别?
盒子有两种解析方式:
当我们在样式表输入box-sizing时,会显示border-box和content-box,第一种是边框盒子尺寸,第二种是内容尺寸
当我们给一个元素设置尺寸时,默认设置的是元素内容的尺寸,也就是content-box,这种在后期布局时会有很多不便
而当我们用border-box时,我们设置的尺寸实际等于:内容尺寸+两边的内边距+两边的边框宽度
3. 制作北大青鸟网站的中心开班信息模块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心开班信息</title>
<style>
div{
border: 1px solid;
width: 300px;
height: 420px;
border-radius: 20px;
margin: 0px auto;
background: linear-gradient(to bottom, #5bc1f9 ,#FFF,#FFFFED);
border-color: #ECECEC;
}
h3{
background: url("../image/bg.gif") no-repeat;
font-size: 12px;
color: white;
background-position-x:2px;
text-indent: 0.5em;
line-height: 30px;
border: 1px solid;
width: 255px;
height: 30px;
font-size: 28px;
padding-left: 25px;
margin: 10px;
border-style: none;
border-bottom-style:solid ;
}
p{
border: 1px solid;
width: 255px;
height: 32px;
line-height: 32px;
background: url("../image/dotBg.gif") no-repeat;
padding-bottom: 2px;
padding-left: 20px;
border-style: none;
}
a{
text-decoration: none;
color: black;
}
.a:hover{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div>
<h3>中心开班信息</h3>
<p><a href="#" class="a">8月12日:学历班加技能班</a></p>
<p><a href="#" class="a">8月16日:高考特招班</a></p>
<p><a href="#" class="a">8月23日:Java精英班</a></p>
<p><a href="#" class="a">8月31日:学士后强化班</a></p>
<p><a href="#" class="a">9月5日:大学生就业班</a></p>
<p><a href="#" class="a">9月9日:企业定向委培班</a></p>
<p><a href="#" class="a">9月15日:网络营销强化班</a></p>
</div>
</body>
</html>
4.制作权威课程免费体验登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费体验登陆页面</title>
<style>
div{
border: 1px solid;
width: 312px;
height: 353px;
border-style: none;
background:url("../图片素材/bg.jpg");
width: 312px;
height: 353px;
margin: 0px auto;
}
.type{
list-style: none;
}
.x{
color: red;
}
.y{
color: white;
}
ul{
margin-left: 40px;
line-height: 35px;
padding: 100px 0;
}
input{
border: 0px solid;
border-radius: 4px;
}
select{
border: 0px solid;
border-radius: 4px;
}
#div{
margin: 0px auto;
margin-left: 40px;
}
</style>
</head>
<body>
<div>
<form method="post" >
<ul>
<li class="type"> <span class="x">*<span/><span class="y">姓名:
</span><input name="name" type="text" /></li>
<li class="type"> <span class="x">*<span/><span class="y">邮箱:
</span><input name="email" type="email" /></li>
<li class="type"> <span class="x">*<span/><span class="y">电话:
</span><input name="tel" type="text" required pattern="^1[358]\d{9}"/></li>
<li class="type"><span class="y">性别:</span>
<select name="sex">
<option value="">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</li>
<li class="type"><span class="y">年龄:</span>
<select name="age">
<option value="">请选择</option>
<option value="1">18以下</option>
<option value="2">18~25</option>
<option value="3">26~35</option>
</select>
</li>
<input id="div" type="image" src="../图片素材/btn.jpg"/>
</ul>
</form>
</div>
</body>
</html>