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