15、盒子模型水平布局

最新推荐文章于 2023-02-08 10:53:47 发布

原创最新推荐文章于 2023-02-08 10:53:47 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css 专栏收录该内容

50 篇文章

订阅专栏

文章目录

介绍
盒子模型水平布局

介绍

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

盒子模型水平布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.outer{
    width:800px;
    height:200px;
    border:10px orange solid
    
}
.inner{
    width:200px;
    height:200px;
    background-color:#bfa;
 
   1、元素水平方向的布局
        元素在其父元素水平方向的位置，由以下几个属性共同决定
           margin-left
           border-left
           padding-left
           width
           padding-right
           border-right
           margin-right
       一个元素在其父元素中，水平布局必须满足以下等式
       margin-left+border-left+padding-left+width+padding-right
       +border-right+margin-right = 其父元素内容区宽度（必须满足）
       
       - 以上等式必须满足，如果相加结果等式不成立，则称为过度约束，则
         等式自动调整
          - 如果 7 个值中没有auto的情况，则浏览器自动调整 margin-right 使等式成立
          - 这 7 个值中有三个值可以设置为auto
                width（如果不写，默认为auto）
                margin-left
                margin-right
          如果某个值为auto,则设置为auto的值自动调整，以使等式成立
             
         - 如果将 width 和 margin-left、margin-right 设置为auto,则宽度调整为最大，外边距为0 
         - 如果将 margin-left、margin-right 设置为auto,宽度设置为固定值，则外边距自动调整 为相同宽度
              
         利用这个特性设置子元素在父元素水平居中：
              
         width:200px;
         margin:0 auto
                   
                
}

                
</style>
<body>

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

 
</body>
</html>