html+css小结

1.布局

a.实现等高div布局
利用display:table-cell;系列的属性实现，因为表格是自适应的。

注意：margin对display:table系列的属性不起作用，只能利用border-spacing.

b.双飞翼布局

    

        
bbb
    
    

    



.center,
    .left,
    .right {
        height: 100%;
        float: left;
    }
    
    .center {
        width: 100%;
        background-color: red;
    }
    
    .left {
        width: 200px;
        background-color: black;
        margin-left: -100%;
    }
    
    .right {
        width: 200px;
        background-color: green;
        margin-left: -200px;
    }
    
    .text {
        margin-left: 200px;
        margin-right: 200px;
    }

Paste_Image.png

c.多列布局
利用columns或者display：table-cell

总结：布局主要分为float布局，绝对定位布局和display的一些属性，以及负margin，弄清楚浮动，绝对定位的意思，布局就会很容易。

2.清除浮动的方法

.clear:after{
    content:"";
    height:0px;
    display:block;
    clear:both;
    visibility: hidden;
 }

或者利用overflow；

3.块级元素和行内元素

块级元素就是会占据一行的元素，例如：div,p,h1-h6,ul,li,form....
行内元素就是按照顺序在一行内排列，行不够宽时换行。
行内元素具有包裹性：定义其宽高没有意义，它只会根据内容的大小决定宽高，要想改变行内元素的宽高只能利用line-height和padding。

设置或检索内联元素在行框内的垂直对其方式。对应的脚本特性为vertical-align。

块级元素不设置宽度时，默认占据一行，设置宽度后，利用margin-left:auto,margin-right:auto;可实现水平居中。

4.float和position

float：浮动会导致高度塌陷，不会导致宽度塌陷。所以浮动之后的div可以一行排列。利用浮动进行多列布局时，浮动元素应该写在不浮动元素的前面。设置了float之后元素就会出现包裹性并且可以设置宽高，display变成inline-block。后面一个元素会围绕包裹前面的浮动元素。相当于先把元素变成inline-block的然后在飘到left/right。

Paste_Image.png

如果设置黑色元素设置为absolute，则看不见aaa的内容。

position：定位。absolute，fixed会导致高度和宽度的塌陷，也就是对于文档流来说并没有这个元素，所以后面的元素会继续按照没有它的情况进行文档流布局。
设置posistion为absolute和fixed后，元素类似于display：inline-block，具有包裹性，但是又可以定义宽高。
设置relative并不会改变display。

取值有：

• static：默认，正常文档流，用处：在元素设置了top等定位时，设置position为static后自动回到文档流中。
• relative:相对定位，相对于当前元素文档流中的位置的定位。
• absolute:绝对定位，相对于父元素中第一个position属性值为relative/absolute/fixed的绝对定位。
• fixed:相对于浏览器窗口的位置，随着滚动条滑动永远处于窗口某一处。
  设置了position的值后未设置top，left，right，bottom的值时，元素按照文档里分布。
  当要儿子相对于粑粑绝对定位时，要把粑粑的position设置为relative，这是relative主要用途。
  设置为relative的元素，对于文档流来说，它的位置就是当前的位置，设置top，left，right，bottom时产生的偏移对于文档流来说不理会，其会覆盖旁边的元素。

absolute，fixed，relative发生覆盖时，正常覆盖文档流，无论其定义在文档流前还是后。后面定义的absoulte如果发生重叠，会覆盖前面的。

重叠与z-index有关。z-index只有在元素设置了absolute，fixed，relative时有效。

5.盒模型

可以通过box-sizing进行盒模型的改变。分为border-box，content-box

border-box的样式：

.border-box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    border: 5px solid red;
    background-color: black;
}

Paste_Image.png

border-box中的width=padding+border+内容width

content-box的样式：

.content-box {
        box-sizing: content-box;
        width: 100px;
        height: 100px;
        margin: 20px;
        padding: 20px;
        border: 5px solid red;
        background-color: black;
    }

Paste_Image.png

content-box中的width=内容width

Paste_Image.png