CSS 盒子模型（CSS重点）

CSS就三个大模块：盒子模型、浮动、定为，其余的都是细节。

所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding)、边框（border）和外边距（margin）组成。

1、边框（border）

语法：border:border-width | |border-style | |border-color

<html>
    <head>
        <style>
            div {
                width:200px;
                height:200px;
                border-width:1px;
                border-color:red;
                border-style:dashed;
                
                连写
                border: 1px solidr red
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

盒子的边框是由4条边框组成的。因此，可以将边框拆开，单独设置。

<html>
    <head>
        <style>
            div {
                width: 200px;
                height: 200px;
                border-top: 1px solid red;
                border-bottom: 1px solid green;
                border-left: 1px dotted blue;
                border-right: 1px dotted pink;
　　　　　　　　　 border: 0 # 表示去掉所有边框

            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

合并相邻边框：border-collapse:collapse;

2、内边距（padding）

padding 属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

各种简写的含义：

顺时针的方式来看。

注意：padding 会撑大带有widht和height的盒子，这是一个非常严重的问题。此时盒子的宽度由左右边框的大小、左右内边距、和宽组成，需要进行计算才行

3、外边距(margin)

margin用于设置外边距。设置外边距会在元素之间创建‘空白’，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

margin:上外边距、右外边距、下外边距、左外边距。

取值顺序跟内边距相同。

外边距实现盒子居中的办法：必须是块级元素、盒子必须制定了宽度（width）

盒子水平居中方法：margin: 0 auto   或者margin: auto;   意思是上下是0，左右是auto，且必须为块级元素

body 标签默认带外边距，所以在使用时，需要清空所有外边距和内边距。

* {
     margin: 0;
     padding: 0;    
}

 

posted @ 2018-08-15 17:22  会开车的好厨师  阅读(99)  评论(0)    收藏  举报