第11章CSS盒模型

第11章 CSS盒模型
       边界、边框、填充、内容四个属性
       (边界就是该盒子与其它东西要保留多大距离
       内容就是盒子里装的东西
       填充怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料)
 
11.1 元素分类
     标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素
     常用的块状元素有：
     <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
     常用的内联元素有：
     <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
     常用的内联块状元素有：
     <img>、<input>

11.2 元素分类--块级元素
     a{display:block;}一个块级元素独占一行

11.3 元素分类--内联元素
     <span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素

11.4 元素分类--内联块状元素
     具备内联元素、块状元素的特点，代码display:inline-block,<img>、<input>标签就是这种内联块状标签

11.5 盒模型--边框（一）
     盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
     下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
        div{
        border:2px  solid  red;
           }
     注意：
     1、border-style（边框样式）常见样式有：
        dashed（虚线）| dotted（点线）| solid（实线）。
     2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
        border-color:#888;//前面的井号不要忘掉。

11.6 盒模型--边框（二）
     为 p 标签单独设置下边框:p{border-bottom:1px solid red;}
     上下左右:top bottom left  right

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

11.8  盒模型--填充
     div{padding:20px 10px 15px 30px;}
     如果上、右、下、左的填充都为10px;可以这么写div{padding:10px;}
     如果上下填充一样为10px，左右一样为20px，可以这么写： div{padding:10px 20px;}

11.9 盒模型--边界
     div{margin:20px 10px 15px 30px;}
     如果上右下左的边界都为10px;可以这么写：
     div{ margin:10px;}
     如果上下边界一样为10px，左右一样为20px，可以这么写：
     div{ margin:10px 20px;}   
  
    padding是内边距 
    margin是外边距
--------------------------------------------------------------------------------------------------