html5+css基础

最近在学习html+css3基础教程，整理了一些基础知识点。在此与大家分享。

1.盒模型

定义：css处理网页时，它认为每个元素都包含在一个不可见的盒子里，即我们所熟知的盒模型。其中它的主要属性有：height.weight,padding,border,margin。

• height,weight：内容的宽，高。
• padding：内容区域周围的空间（内边距）。
• border：内边距的外边缘（边框）。
• margin：边框外面将元素与相邻元素隔开的不可见区域（外边距）。

css两种常见的盒模型：

• W3C的标准盒模型

• IE的盒模型

CSS盒模型和IE盒模型的区别：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

注：border-sizing 属性

属性值：border-sizing ：content-box|border-box|inherit

• content-box: 是W3C盒子模型 。width就是内容区域的宽度。
• border-box：是IE盒子模型。width指内容区域的宽度+border+padding。

content-box的缺点： 当给子元素width设置为100%（或者50%等等）时，宽度会溢出，影响布局。

举例说明：

.box{
        width: 960px;
        
    }
    .header{
        width: 100%;
        background: orange
    }
    .left{
        width: 220px;
        float: left;
        margin-right: 20px;
        background: green
    }
    .main-content{
        width: 720px;
        float: left;
        background: gray
    }
    .footer{
        width:100%;
        background: red;    
    }

结果：

此时我们可以看出没有什么问题，此时加入padding再来看看效果。

 .innerPadding {
        padding: 10px; 
    }

 

此时明显可以看出子元素的宽溢出了，导致布局混乱。但是如果设置border-sizing ：border-box。我们看一下效果。

.box-sizing{
        box-sizing: border-box
    }

 

总结：

border-box的使用场合

子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100% - 20px)）。

 2.去除浮动

• 浮动定义：浮动元素脱离文档流，不占空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

• 浮动元素引起的问题：（1）父元素的高度无法被撑开，影响与父元素同级的元素  

                                              （2）与浮动元素同级的非浮动元素会跟随其后

                                              （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的结构

• 解决方法：（1）使用 clear:both属性，可以解决（2）（3）问题，对于问题（1），添加如下样式，给父元素添加

 

.clearfix:before,
    .clearfix:after{
        content: "";
        display: block;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

（2）对浮动元素的父元素使用overflow属性。 设置overflow为‘hidden’或者‘auto’。

（3）使用after伪对象清除浮动。该方法必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素。

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