CSS盒模型

CSS盒模型

元素分类：html中标签元素大体分为三种不同的类型
    1.块状元素
    <div>,<p>,<h1>...<h6>,<il>,<ol>,<dl>,<table>,<address>,<blockquote>,<form>etc.
    2.内联元素(行内元素)
    <a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
    3.内联块状元素
    <img>,<input>


元素分类--块级元素
特点：
    1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。
    2.元素的高度，宽度，行高以及顶和底边距都可设置。
    3.元素宽度在不设置的情况下，是它本身父容器的100%。

    a{display:block;} --将内联元素a转换为块状元素。

元素分类--内联元素
特点：
    1.和其他元素都在一行上。
    2.元素的高度，宽度及顶部和底部边距不可设置
    3.元素的宽度就是它包含的文字或图片的宽度，不可改变。

    div{display:inline;}--将内联元素div转换为内联元素。

元素分类--内联块状元素
特点：
    1.和其他元素都在一行上。
    2.元素的高度，宽度，行高以及顶和底边距都可设置。
    a{display:inline-block;}--将a设置为内联-块状元素


盒子模型

    块级元素是一个盒子模型

盒模型--边框（一）
    边框就是围绕着内容及补白的线，
    可以设置它的粗细，样式和颜色(边框的三个属性)
    例：div{
        border-width:2px;//粗细最常用像素
        border-style:solid;//样式dashed(虚线)|dotted(点线)|solid(实线)
        border-color:red;//颜色
    }
盒模型--边框（二）
    可单独设置某一边框，其他边不设置边框样式
    div{
        border-top:1px dotted red;
        border-right:1px dotted red;
        border-lsft:1px dashed red;
        border-bottom:1px solid red;

    }

盒模型--宽度和高度
    css内定义的宽(width)和高(height)，指的是填充以里的内容范围
    因此一个元素的实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

   高度同理 

盒模型－－填充(padding)
    元素内容与边框之间是可以设置距离的，称为填充，填充也分为上右下左（顺时针）
    div{
        padding-top:20px;
        padding-right:30px;
        padding-bottom:25px;
        padding-left:34px;
    }
    如果上下填充一样为10px,左右　填充一样为20px,可以这样写
    div{padding:10px 20px;}


盒模型--边界(margin)
    元素与其他元素之间的距离可以使用边界(margin)来设置，边界也是顺时针。
    语法和padding 相同

    区别：padding在边框里,margin在边框外

例子如下图：