盒模型——外边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>postion</title>
        <style>
            .box1{
                width:200px;
                height:200px;
                background: greenyellow;
                /*设置边框*/
                border:3px red solid;
                /*设置内边距*/
                padding: 20px;
                
                /*
                 *外边距margin:指的是当前的盒子与其他盒子之间的距离
                 *     它不会影响盒子课可见框的大小,而是会影响盒子的位置
                 *特性:
                 *  1.  4个方向
                 *  margin-top:
                    margin-right:
                    margin-bottom:
                    margin-left:
                    2.由于页面中的元素都是靠左靠上位置摆放的
                         所以注意:当我们设置上和左外边距时,会导致盒子自身位置的发生改变
                                            当我们设置下和右外边距时,会改变其他盒子的位置
                    3.可以设置 负值,负值——反方向移动
                    4.可以设置auto(自动)
                        一般只设置给水平方向,居中显示
                    原因:
                    只指定:
                    1)水平方向为auto——————最大值
                    2)垂直方向为auto——————0
                    5.margin      
                 */
                /*margin-top:-100px;
                margin-right: 100px;
                margin-bottom: 100px;*/
                margin: 0 auto;/*水平居中*/
                
            }
            .box3{
                width:200px;
                height:200px;
                background: blue;
                
                
            }
            /*创建一个子元素box2来占满box1*/
            .box2{
                height:100px;
                width:100px;
                background: yellow;
                margin-left: 120px;
                
                
            }
        </style>
    </head>
    <body>
            <div class="box1">
                <div class="box2">我是box2</div>
            </div>
            <div class="box3">我是box3</div>
        
    </body>
</html>

原文地址:https://www.cnblogs.com/goodgirl----xiaomei/p/9782374.html

时间: 2024-10-03 19:13:39

盒模型——外边距的相关文章

盒模型-外边距合并

1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="

盒模型 边距 缩写 注意问题

当四个边距都相同,或者上下相同并且左右相同的时候可以使用缩写,另外左右相同的时候也可以使用缩写,但是如果仅仅是上下相同,则不可以使用缩写: 例如: 左右相同:margin:10px 15px 11px 如果上下边距都是10px,但是也用缩写的时候:margin:10px 15px 11px,就跟上边一样,所以,这个时候是错误的: 边距合并: margin在左右方向上是叠加的,但是上下方向上却是叠加的,取两个当中最大值: IE6下的margin  bug IE6会在特定的条件下,将设置的横向mar

盒模型——内边距

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>postion</title>        <style>            .box1{                /*                 *使用width来设置盒子内容的宽度                 * height来

CSS基础学习十五:盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者. (1)外边距合并 外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外 边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

你真的了解盒模型么

说到前端, 大家第一反应是不是都是vue.react.webpack等这些大大小小的框架或者工具, 但其实这些都是和js相关的, 真正的样式会被大家忽略.其实真正呈现给大家看到华丽的页面, 都是样式才让他们多了那份色彩.那么大家觉得简单的css样式, 真的简单么? 让我们一起来看下, 开启css的入坑之旅, 今天一起跟大家简单聊聊盒模型的相关问题...... 盒模型 百度知道对此的解释, 很有意思, 在此引用一下 CSS盒子模型, 内容(CONTENT)就是盒子里装的东西; 而填充(PADDIN

盒模型的auto值

浮动在盒模型的auto值 属性 常规流 浮动 margin-left:auto 尽量撑满包含块 0px margin-right:auto 尽量撑满包含块 0px margin-top:auto 0px 0px margin-bottom:auto 0px 0px width:auto 尽量撑满包含块 适应内容的宽度 height:auto 适应内容高度 适应内容高度 常规流块盒布局 1.常规流块盒在水平方向上,必须撑满包含块: 2.常规流在包含块的垂直方向上依次摆放: 3.常规流块盒若外边距无

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

关于盒模型的外边距padding和内边距margin

边框border属性值  solid实线   dashed虚线   dotted点线   double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表  上/右/下/左 padding: 10px 20px 30ox;三个值代表 上.左右.下 padding: 10px 20px;两个值代表  上下/左右 padding: 10px;一个值代表四个方向一致 /* 外边距 */ margin:20px 30px 30px 30px;若有四个值代表 

认识W3C标准盒子模型,理解外边距叠加

概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里. 每个矩形框都是一个盒模型. 每个盒模型都由内容区域(content).边框(border ).内填充(padding)和外边距(margin)组成. 这四个属性都可以独立存在.也就是说,一个盒子可以只有content,也可以只有border,也可以只有padding,也可以只有margin. (图片来自网络) 关于margin: 可以有负值 Negative v