css盒子模型基础,margin-top塌陷,元素溢出

时间:2023-03-08 16:24:31
现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接

一. 初识盒子模型css盒子模型基础,margin-top塌陷,元素溢出

css盒子模型基础,margin-top塌陷,元素溢出
 css盒子模型基础,margin-top塌陷,元素溢出
例子1,测试盒子各属性设置
<head>
<style type="text/css">
.box{
width:200px; #这里的宽和高是content的宽和高
height:100px;
background-color:blue; 1. border设置
/* border-top-width:10px; #设置顶部边框的粗细
border-top-color:black; #设置顶部边框颜色
border-top-style: solid; #设置顶部边框线条类型,分为solid,dashed,dotted
*/ /*上面三句可简写为一句, 并测试一下其他边框线条类型效果
border-top:10px solid black;
border-left:10px dashed black;
border-right:10px dotted black;
border-bottom:10px solid black;
*/ 生产环境下,4个边框的样式一般是一样的,那么此时还可以简写
border:10px solid black; #这里的顺序可以随意 2. padding,设置盒子四边的内边距
#增加padding属性时,会使盒子尺寸变大, 用法如下
padding-top:
padding-right:
padding-bottom:
padding-left: padding:20px 10px 20px 10px; #如果是4个值,按照上右下左的顺序设置
padding:20px 10px; #如果是2个值,第一个值表示上下,第2个值表示左右
padding:10px; #也可以用一个值设置4边 3. margin,设置盒子外边距
#处理盒子间以及盒子和浏览器四周之间的间距,margin的设置属性和padding相同
#特殊情况,外边距合并:当2个盒子分别设置了margin-bottom:100px, margin-top:50px. 此时2个盒子间的垂直间距并非150px, 而是取他们之间大的值,也就是100px,解决方式是只设置盒子的margin-top;
如果2个盒子的margin:top和margin:bottom都设置为100px,那么他们之间的垂直间距为100px
左右间距正常计算
#<body>自带属性使其中的内容和浏览器四周有8px的间距,可用margin处理 #使用margin属性是盒子水平居中
margin:100px auto; #100px是设置上下,auto是自动平分左右 } </style>
</head> <body>
<div class="box"></div>
</body>

  

例子2,三个盒子在一个页面的布局测试
<head>
<style type="text/css">
.box1,.box2,.box3{
width:50px;
height:50px;
background-color:gold;
margin:20px; #maigin的尺寸是在盒子外的设置
} .box2,.box3{
border:50px solid black;
} .box3{
padding:50px;
} </style> </head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>

  

盒子真实尺寸计算方法:
宽度=width+左右padding值+左右border值
高度=height+上下padding值+上下border值
综合练习,做下面的标题
css盒子模型基础,margin-top塌陷,元素溢出
 css盒子模型基础,margin-top塌陷,元素溢出
<head>
<style type="text/css">
.box{
width:385px; #400-15,总宽度-padding-left
height:35px; #54-1-3-padding-top
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px; #文字的大小不会把盒子撑大
font-family:'Microsoft Yahei';
line-height:20px; #微软雅黑有内置行高,不是20px,所以需要为字体重新设置行高
color:#333;
padding-left:15px #设置文字左边内间距
padding-top:15px; #(50-20)/2
} .box2{
width:400px;
height:50px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
font-family:'Microsoft Yahei';
text-indent:15px; #设置文字左边内间距
#设置垂直居中,这种方法是生产环境下常用的,行高相当于文字+上下padding, 只能用于文字垂直居中
line-height:50px;
#水平居中的方法text-align:center
} </style>
</head>
<body>
<div class="box">新闻标题</div>
<br /><br />
<div class="box2">新闻标题2</div>
</body>

  

二. margin-top塌陷,如下,想使内嵌的盒子.box垂直居中显示

 <head>
<style type="text/css">
.con{
width:300px;
height:200px;
background-color:gold;
} .box {
width:100px;
height:100px;
background-color:green
margin-top:50px; #设置内部盒子垂直居中显示
}
</style>
</head> <body>
<div class="con">
<div class="box"></div>
</div>
</body>

  

初始效果如下图左,设置.box中margin-top:50px后显示如图右,发现设置的效果居然跑到.con盒子了,这种效果就叫做margin-top的塌陷。
css盒子模型基础,margin-top塌陷,元素溢出     css盒子模型基础,margin-top塌陷,元素溢出
 css盒子模型基础,margin-top塌陷,元素溢出     css盒子模型基础,margin-top塌陷,元素溢出
解决方法如下
1. 外部盒子设置一个边框,如下
.con{
               #需要减去边框的上下左右1px
               width:298px;   
               height:198px;
               background-color:gold;
               border:1px solid gold;
               }
2. 外部盒子设置overflow:hidden
   .con{
               width:300px;
               height:200px;
               background-color:gold;
               overflow:hidden
               }
3. 使用伪元素类,类似于给盒子加了个边框,生产环境中常用这种方法
1)首先定义一个新的类选择器.clearfix,这个名字已经约定俗称了
.clearfix:before{
        content:"";
        display:table;
}
2)在body中的外边框中div标签加入.clearfix类
<body>
<div class="con clearfix">
    <div class="box"></div>
</div>
</body>
想要的最终效果如下
css盒子模型基础,margin-top塌陷,元素溢出
 css盒子模型基础,margin-top塌陷,元素溢出

三.  元素溢出

<head>
<style type="text/css">
.con{
width:300px;
height:200px;
background-color:gold;
} .box {
width:100px;
height:600px; #使内部盒子的高度比外部盒子高度高, 这就叫溢出
background-color:green
}
</style>
</head> <body>
<div class="con">
<div class="box"></div>
</div>
</body>

  

解决方法就是在.conf中加入overflow属性
.con{
        ....
        overflow:hidden;
}
overflow的设置项: 
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值,不常用。