15、盒子模型垂直高度

文章目录

  • 介绍
  • 盒子模型垂直布局

介绍

本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记

盒子模型垂直布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.outer{
    background-color:#fbs
    height:600px;
  
   1、父元素高度不写,默认情况下,父元素的高度被内容撑开
      如果定义了父元素的高度,则定义是多少就是多少
   
    
}
.inner{
    width:100px
    height:100px;
    background-color:yellow;
    margin-bottom:100px
    
}
.box1{
    width:200px;
    height:200px;
    background-color:#fbs

    1、子元素是在父元素的内容区排列的
         如果子元素超过父元素,则子元素会从父元素溢出
         使用overflow属性处理父元素处理溢出的元素
         overflow :
           visible 默认子元素会从父元素溢出,在父元素外部的位置显示
           hidden  溢出的内容将会被裁剪,不会被显示
           scroll  生成两个滚动条,通过滚动条查看完整内容
           auto    根据需要生成滚动条
         
        overflow-x: 单独处理水平方向
        overflow-y: 单独处理垂直方向  
    */
    overflow:hidden 
}
.box2{
    width:100px;
    height:400px;
    background-color:orange
}

                
</style>
<body>

    
 <div class="outer">
      <div class="inner"></div>
       <div class="inner"></div>
 </div>
    
 <div class="box1">
      <div class="box2"></div>
 </div>

 
</body>
</html>

你可能感兴趣的:(css)