块元素盒子模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    <style type="text/css">
        /*
        width：设置盒子内容区的宽度
        height：设置盒子内容区的高度
        width和·height只是设置盒子内容区的大小，而不是盒子的整个的大小
        盒子可见框是内容区和内边距和边框组成的
        */
        .box1{
            width: 100px;
            height: 100px;
            /*设置背景颜色*/
            background-color: #bfa;
            /*为元素设置边框
            要为一个元素设置边框必须指定三个样式
            border-width：边框的宽度
            border-color：边框的颜色
            border-style：边框的样式
            三者缺一不可，但是style一定要设置，默认为none的，所以出不来
            大部分浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认是都是none
            如果在border-width指定了四个值，
            则四个值会分别设置给上 右 下 左，按照顺时针方向设置的。
            如果指定三个值，则三个会分别设置给上 左右 下
            如果指定两个值，则两个值会分别设置给上下 左右
            如果指定一个值，则四边全都是该值
            
            除了border-width，css中还提供了四个border-xxx-width
            xxx的值可能是top right bottom left
            专门用来指定边的宽度
            border-color也可以根据width那样子设置几个值来分别设置不一样的边框
            类型一样。
            
            border-style 边框样式
            solid 实现
            none 默认值 没有边框
            
            */
            /*
            边框简写：border 边框的简写样式，通过它可以设置四个边框的样式，宽度，颜色
            而且没有任何要求
            border一指定就是同时指定四个边，不能分别指定
            
            */
            border-width: 10px;
            border-color: red;
            border-style: solid;
            /*
            内边距（padding），指的是盒子的内容区与盒子边框之间的距离
            一共有四个方向的内边距，可以通过：
            padiing-top
            padiing-right
            padiing-bottom
            padiing-left
            来设置四个方向的内边距
            
            内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
            
            */
            /*
            外边距指的是当前盒子与其他盒子之间的距离
            她不会影响可见框的大小
            盒子有四个方向的外边距
            margin-top
            margin-right
            margin-bottom
            margin-left
            由于页面中的元素都是靠左靠上摆放的，
            所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变
            而如果是设置右和下边，位置不会改变，如果有其他盒子，就会挤其他盒子
            
            
            外边距也可以指定一个负值
            如果外边距设置的是负值，则元素会向反方向移动
            margin还可以设置为auto，auto一般只设置给水平方向的margin
            如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
            分开的
            margin-left：auto（靠右）
            margin-right：auto（靠左）
            如果left和right同时设置为auto，则会将两侧的外边距设置为相同的值（那就居中了）
            就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
            以使子元素在父元素居中
            垂直方向外边距如果设置auto就默认是0
            */
            /*
            如果第一个盒子的下边距设置为100，第二个盒子的上边距设置为100
            就会出现的还是100，因为出现了重叠
            垂直外边距的重叠
            在网页中垂直方向的相邻外边距会发生外边距的重叠
            所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取合
            如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
            */
        }
        /*
        
        注意可以使用文字（文字也是一个元素盒子）来把两个空的div盒子隔开
        上面讲的都是空的相邻的盒子
        */
        
        /*
        浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果
        所以很多的元素都设置了一些默认的margin和padding
        而它的这些默认样式，正常情况下我们是不需要使用的
        所以我们往往在编写样式之前需要将浏览器中的默认dmargin和padding统统的去掉
        一般通配符去掉所有的：
        *{
            margin：0；
            padding：0；
            }
        */
    </style>
    </head>
    <body>
        <div class="box1">
            
        </div>
    </body>
</html>
猜你喜欢
