CSS盒子模型

CSS 盒子模型

border-style : 边框样式 none (默认) | hidden (隐藏) | dotted(虚线) | dashed(点线） | solid(实线)

padding 内边距

margin 外边距 ：  当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。当块之间是父子关系时，通过设置子块的margin参数为负数，可以将子块从父块中“分离”出来。

属性值的简写

1：如果给出2个属性值 前者表示上下的属性 后者表示左右的属性

2：如果给出3个属性 前者表示上 中间表示左右 后表示下。

3 : 如果给出4个属性值，依次表示上、右、下、左的属性，即顺时针排序

 元素分类：

块级元素 div1 和div2 之间的垂直margin = MAX (div1 的margin—bottom 和div2 的margin—top 占一行)

行内元素(inline)

首先谈谈人们经常提及的块级元素和行内(内联)元素

p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方

 

<div style="height: 100px; width: 100px; background-color: Red;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;">
    </div>

 

 

 

而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度，这就是为什么我们一次次的在span上设置height属性不好使的原因。

简单了解了这些知识，让我们看看display常用的几个属性，一些不太常用的我也不明白，就不说了

 

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

我们在显示隐藏元素的时候经常会用到把display设为none或者’’，设为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间，而设为’’其实就是设置为元素默认属性block或inline，inline-block属性是CSS2.1新加值，IE8以上及其他主流浏览器都已经支持，它可以使元素像行内元素那样水平一次排列，但是框的内容符合块级元素行为，能够显示设置宽，高，内外边距。很有意思。

还有一点儿很有意思，可以通过不同的赋值改变元素生成框的类型，也就是说，通过将display属性设置为block，可以使行内元素表现的想块级元素一样，反之亦然。

• 盒子的定位
  position:static|relative|absolute|fixed
  1.static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。
  2.relative：相对定位。
  （1）除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left（向右）或者right（向左）属性来指定，竖直方向通过top（向下）或者bottom（向上）属性来指定。
  （2）使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置；
  （3）使用相对的盒子仍在标准流中，它对父亲和兄弟盒子都没有任何影响。
  3.absolute：绝对定位。
  （1）使用绝对定位的盒子以它的“最近”一个“已经定位”（position属性被设置，并且被设置的不是static）的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位；
  （2）使用绝对定位的盒子从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样；
  （3）如果设置了绝对定位，而没有设置偏移属性，那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况；
  （4）IE6的BUG：错误的位置和正确的位置相差了父div的padding的宽度。
  【解决方法】给父div（定位的基准盒子）增加一条CSS样式：height:1%;
  4.fixed（IE6不支持）：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。
• 盒子的display属性
  display : inline|block|none