一.盒模型
概念
盒模型结构像一个盒子一样，包含多个组成部分，用来页面的精细化布局。所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
二.盒模型的组成
- 内容区域：content，展示内容（文字，图片等），大小只由宽和高决定。 Width和height。
- 内填充：padding，调整是元素自身的内容和元素边框的距离。 注意padding的简写形式，四个值， 三个值，两个值，一个值。
- 边框：border。 可以分别设置四个方向上的边框。
- 外间距：margin。调整的是该元素和相邻元素的距离。
需求：如何让元素自身在父元素中水平居中？
解决方法: 给元素添加margin属性， 设置为： margin：0 auto； （上下：0 左右：auto）
margin-left，margin-right = （父元素的宽度 – 自身元素宽度） / 2；
1. 盒模型上课代码
padding内填充在css中的写法:
/*padding*/
/*写法1 上下左右 */
padding: 20px;
/*写法2 上下 左右*/
padding: 20px 30px;
/*写法3 上 左右 下*/
padding: 20px 30px 0;
/*写法4 上 右 下 左*/
padding: 10px 20px 0 30px;
/*写法5 按照方向 left top right bottom*/
padding-bottom: 50px;
padding-left: 50px;
...
border边框在css中的写法:
/*border边框*/
/*边框颜色 默认黑色*/
border-color: red;
/*边框宽度 默认为0*/
border-width: 5px;
/*边框风格
solid 实线
dotted 圆形虚线
dashed 方形虚线
*/
border-style: solid;
/*推荐 综合写法 */
border: 10px solid seagreen;
/*按照方位来写 left top right bottom*/
border-bottom: 5px dotted dodgerblue;
border-left: 6px solid salmon;
/*切圆角 切四个角*/
border-radius: 10px;
/*按照方位切圆角*/
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
/*如果某一方位不需要设置边框*/
border-right: none;
margin外间距在css中的写法同padding:
特殊情况,如果需要块元素在其父标签中左右居中.可以设置 margin:0 auto;
2. 打开谷歌浏览器的检查工具。
1.在网页的空白区域右击，弹出菜单。 2.在菜单中选择"检查"。 3.选中代码检查区的左上角的选择按钮。
- 移动鼠标，移动到要查看盒模型的矩形区域上，然后鼠标左键单击，在代码检查区的右部可查看该元素的盒模型结构。
margin值在使用时的问题:
1.两个元素上下布局的时候, 如果同时设置了上面标签的margin-bottom和下面标签的margin-top,那么两个标签的上下间隔取其中的最大值. 不会累加!
2.两个元素在左右布局的时候,如果同时设置了左边标签的margin-right和右边标签的margin-left,那么两个标签的水平间隔是左边标签的margin-right + 右边标签的margin-left.
3.在父子关系中, 第一个子标签也就是one的margin-top值会传递给父标签box; a.给box加border阻断传递. b.给box加overflow:hidden;阻断传递 推荐:如果真的需要父子标签有间隔,推荐给父标签设置 padding内填充!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#d1{
width: 200px;
height: 200px;
background-color: palegreen;
margin-bottom: 110px;
}
#d2{
width: 300px;
height: 300px;
background-color: palevioletred;
margin-top: 100px;
}
#box{
width: 700px;
height: 670px;
background-color: palegoldenrod;
margin-left: 100px;
/*阻断top传递 方式1*/
/*border: 1px solid paleturquoise;*/
/*方式2 */
/*overflow: hidden;*/
}
#one{
width: 100px;
height: 100px;
background-color: red;
margin-top: 30px;
}
#two{
width: 800px;
height: 200px;
background-color: green;
margin-top: 30px;
}
#three{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<!--兄弟标签之间的间隔用margin
上下标签间隔最大值!
左右标签间隔取相加!
-->
<div id="d1">1111111111</div>
<div id="d2">2222222222</div>
<div id="box">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
</body>
</html>
四.盒模型练习
1.映纷创意顶部
效果图:
代码如下:
HTML部分
<div class="nav">
<img src="img/1.png"/>
<div class="title">
<a href="###">HOME</a>
<a href="###">WORK</a>
<a href="###">CONTACT</a>
<a href="###">JOIN US</a>
</div>
</div>
CSS部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.nav{
width: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding: 5px 0;
}
.nav img{
height: 44px;
}
.title{
padding-top: 6px;
}
.title a{
color: darkgrey;
font-size: 14px;
margin: 0 30px;
}
.title a:hover{
color: #f2f2f3;
}
.title a:first-child{
color: #f2f2f3;
}
</style>
五.标签的显隐性
1.display:none; 隐藏 display:block;显示 不保留标签位置
2.opacity: 0; 隐藏 opacity:1; 通过透明度控制显示和隐藏, 为标签保留位置;
3.visibility: hidden;隐藏 visibility: visible;显示 为标签保留位置
<head>
<meta charset="UTF-8">
<title>显隐性</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 500px;
background-color: red;
}
#one{
width: 300px;
height: 300px;
background-color: yellow;
/*方式1: 透明度控制 0完全透明 标签一直都在,只是透明化了. 会保留标签的位置*/
/*opacity: 0;*/
/*方式2: 显示控制属性 标签隐藏了,但是会为标签保留位置.*/
visibility: hidden;
/*方式3 display转换 none将标签转为空.不会为标签保留位置*/
/*display:none;*/
}
#one:hover{
/*opacity: 1;*/
}
#box:hover>#one{
visibility: visible;
/*display: block;*/
}
#two{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box">
<div id="one">1112143244344</div>
<div id="two"></div>
</div>
</body>
</html>
