<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box{
width:200px; /*标签的宽度*/
height:200px; /*标签高度*/
background-color:gold; /*设置背景颜色*/
/*------------------------------------------------------------------------*/
/*设置盒子模型border*/
/*设置顶部边框信息border-top
border-top-color:#000; 设置边框顶部颜色
border-top-width:10px; 设置边框顶部的宽度(这里的宽度指的是边框有多厚)
/*border-top-style属性可以设置边框用什么线呈现
常用的：实线：solid、 虚线：dashed、 点线：dotted
border-top-style:solid;*/
/*------------------------------------------------------------------------*/
/*可以使用这个语法，来代替上面top那3行语法，简写方法。写法的顺序可以随便写*/
/*设置顶部信息：10px宽度，黑色，实线;*/
/*border-top:10px solid #000;*/
/*设置边框左边信息，设置左边信息：10px宽度，黑色，虚线;*/
/*border-left:10px dashed #000 ;*/
/*设置右边边框信息，设置右边信息：10px宽度，黑色，点线;*/
/*border-right:10px dotted #000;*/
/*设置底部边框信息，设置底部信息：10px宽度，黑色，实线;*/
/*border-bottom:10px solid #000;*/
/*------------------------------------------------------------------------*/
/*不过一般开发的时候不会四个边框都设置不同线的，当四个边框都一样时，可以使用简写：*/
/*同时设置四个边框，10厚度，实线，黑色边框*/
border:10px solid #000;
}
.box1{
/*设置盒子模型*/
width:200px; /*标签的宽度*/
height:200px; /*标签高度*/
background-color:gold; /*设置背景颜色*/
border:10px solid #000;
/*------------------------------------------------------------------------*/
/*内边距padding，盒子边框到内容这段间距叫内边距。*/
/*
padding-top:20px;
padding-left:40px;
padding-right:80px;
padding-bottom:100px;*/
/*上面四句语法也可以简写，顺序是按top、right、bottom、left。*/
padding:20px 80px 100px 40px;
/*当然，也可以设置3个值*/
/*padding:20px 80px 100px; 设置了：上 左右 下*/
/*这样的话，就是少了一个值，执行结果就是:上(20px)、右(80px)、下(100px)、左(80px)
意思就是：padding:上下 左右;第一个值是上下，第二个值是左右。
设置2个值就是：上下20px 左右80px;*/
/*padding:20px 80px; */
/*如果设置1个值就是上下左右都是这个值 padding:20px;*/
/*------------------------------------------------------------------------*/
/*外边距margin，就是边框离外边(如：浏览器的边框)的间距叫外边距*/
margin:10px;
/*外边距设置的语法跟内边距是一样的*/
}
.box2{
/*外边距margin*/
width:200px;
height:200px;
background-color:gold;
/*margin小技巧auto，设置水平居中，只能用在宽度上，不能用在高度上*/
/*解说：当外边距左右都设置auto时，是可以根据浏览器窗口大小，来自动使盒子居中*/
margin:0px auto;
}
.box3{
/*margin小技巧，还能写负值*/
width:200px;
height:200px;
background-color:gold;
margin-left:-50px; /*margin可以写负值，如这行这样，就会往左边移50px了*/
}
/*------------------------------------------------------------------------*/
.box4{
/*例子*/
width:202px;
height:156px;
background-color:pink;
margin:50px auto 0;
}
.box4 div{
width:200px;
height:30px;
border:1px solid green; /*设置盒子边框1px，实线，绿色*/
background-color:gold;
/*因为盒子设置了1px的边框，当第一个盒子下边和第二个盒子的上边衔接的地方，
就会是2px的厚度了，所以这里可以使用margin设置外边距，将外边距负1距离，
就可以让衔接的地方折叠起来了。*/
margin:-1px;
}
/*------------------------------------------------------------------------*/
/*小BUG：外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们只会使用
较大值的一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决的方法：
1、设置一边的外边距，一般设置margin-top。
2、将元素浮动或者定位。*/
/*解释：这里有个小BUG，当有两个盒子，上面的盒子设置下外边距，下面盒子设置上外边距
时，两个盒子的外边距会重叠起来，只显示px值较大的，这点要注意。
注意哈：只是垂直合并，水平是不会合并的！*/
.box5,.box6{
width:200px; /*盒子宽度*/
height:200px; /*盒子高度*/
background-color:gold; /*背景颜色*/
}
.box5{
margin-bottom:30px; /*下外边距*/
}
.box6{
margin-top:20px; /*上外边距*/
}
/*------------------------------------------------------------------------*/
.box7{
width:500px;
border:1px solid #000; /*边框厚度1px、实线、黑色边框*/
margin:50px auto 0; /*上外边距50px，宽度自动，下外边距0*/
}
/*给.box7下面的div盒子外边距，盒子与盒子垂直的外边距，就会显示较大值了*/
.box7 div{
/*
margin-left:20px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;*/
/*可以简写*/
margin:20px
}
/*------------------------------------------------------------------------*/
/*margin-top 塌陷*/
/*在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，
导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置overflow:hidden (这个方法原本是用于设置元素溢出的，等下就会学到了)
3、使用伪元素类： 一般使用这种方法。
.clearfix:before{ 这个选择器在css的意思是在行首插入东西
content:''; 这个是定义插入什么
display:table;
}
三种方法随便用一个就可以了。
*/
.box8{ /*外面的盒子*/
width:300px;
height:300px;
background-color:gold;
/*1、给父盒子设置一个边框可以解决这个BUG，如果不想给盒子加边框，
可以试试其他的方法*/
/*border:1px solid #000;*/
/*2、外部盒子设置overflow:hidden*/
/*这个意思是把溢出的东西隐藏起来，这里的盒子本身是没有什么内容的，不会
溢出，但是却可以解决塌陷这个BUG*/
/*overflow:hidden;*/
}
/*3、第三种方法，使用伪元素类，再去外边盒子的元素class属性写上这个类*/
.clearfix:before{
content:"";
display:table;
}
.box81{ /*里面的盒子*/
width:200px;
height:100px;
background-color:green;
margin-top:100px;
/*当给里面的盒子上外边距时，这个值会直接传到父盒子外边，导致里面的盒子执行
不了margin-top，这是自带的BUG，修复就靠我们自己了，就使用上面提出的那三个方法*/
margin-left:50px; /*这个是不会有塌陷的*/
}
/*------------------------------------------------------------------------*/
/*CSS元素溢出*/
/*当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出子元素的方式，
设置的方法用overlow属性来设置。
overflow属性可用参数：
1、visible 默认值，内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
*/
.box9{
width:300px;
border:1px solid #000; /*盒子边框*/
margin:50px auto 0; /*外边距*/
background-color:gold; /*背景颜色*/
line-height:30px; /*字体行高*/
/*现在，当我们把高度设置小一点，就会出现元素溢出了*/
height:200px;
/*现在我们就需要用到overflow属性了*/
/*overflow:scroll; 在元素内显示滚动条，无论内容是否多出元素，都会显示滚动条*/
/*overflow:auto; 在元素内显示滚动条，当内容多出了就会显示，内容没有多出，就不会显示，这个比上面那个好看*/
/*overflow:hidden; 会修剪多出的内容，直接清除了*/
}
/*------------------------------------------------------------------------*/
/*这里有一个坑：在设计盒子的时候，有没有发现盒子始终都贴不紧浏览器边上，
因为body标签自带了8px的外边距，所以要设置body标签的margin为0px*/
body{
margin:0;
}
</style>
</head>
<body>
<!-- div+css布局：
主要通过css样式设置来布局文字或图片等元素，需要用到css盒子模型、盒子类型、
css浮动、css定位、css背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
-->
<div class="box">设置盒子模型，元素在页面中显示成一个方块，类似一个盒子，
css盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。</div>
<hr />
<div class="box1">设置内边距，元素在页面中显示成一个方块，类似一个盒子，
css盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。
元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实
中盒子来做比喻，帮助我们设置</div>
<hr />
<div class="box2">margin小技巧</div>
<hr />
<div class="box3"></div>
<hr />
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<hr />
<div class="box5">1</div>
<div class="box6">2</div>
<hr />
<div class="box7">
<div>设置内边距，元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中盒子来做比喻，帮助</div>
<div>设置内边距，元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中盒子来做比喻，帮助</div>
<div>设置内边距，元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中盒子来做比喻，帮助</div>
<div>设置内边距，元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中盒子来做比喻，帮助</div>
</div>
<hr />
<div class="box8 clearfix">
<div class="box81">margin-top塌陷</div>
</div>
<hr />
<div class="box9">设置内边距，元素在页面中显示成一个方块，类似一个盒子，
css盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。
元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实
中盒子来做比喻，帮助我们设置设置内边距，元素在页面中显示成一个方块，类似一个盒子，
css盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。
元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实
中盒子来做比喻，帮助我们设置</div>
<hr />
</body>
</html>
扫一扫
07-18
693
693
08-27
523
523
10-12
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
