CSS盒子模型2

一、内边距

padding-top:                  上内边距增加 

padding-right                  右内边距增加

padding-bottom:             下内边距增加

padding-left:                   左内边距增加

padding:     px       设置一个值 表示上 右 下 左 内边距全部增加这个值

                 1px  2px        上下 内边距的大小为1 px 左右内边距的大小为 2px

       50px 100px 30px;          边距是50px 左右内边距100px 下边距是30px

     10px 20px 30px 40px           按照顺时针 上右下左的顺序 上边距是10px 右边距是20px 下边距                                                                          是30px 左边距是40px

           

       盒子由里到外的组成是：

        盒子 = 盒子的内容（content）+ padding + border + margin  

    眼睛能看到的盒子的视觉大小 是由盒子的内容（content）+ padding + border 组成的

二、box-sizing

box-sizing:     

                    content-box          默认值，盒子的总尺度

                    border-box;          盒子的宽度或高度等于元素内容的宽度或高度(怪异盒模型)

例：  

原来盒子的宽度= （元素内容）content的宽度（200px）+padding(30px + 30px) +border(5px+5px) =270px

现在盒子的宽度 = width（200px）= 200px

在里面的200px是一样的，相等

                       inherit;               元素继承父元素的盒子模型模式

 

 三、行内元素和块级元素区别

1.块级元素会独占一行，其宽度自动填满其父元素宽度

2.行内元素不会独占一行，相邻的行内元素会排列在同一行里，

    直到一行排不下，才会换行，其宽度随元素的内容而变化 

3.块级元素可以设置 width, height属性，

    行内元素设置width,  height无效

4. 块级元素可以设置margin 和 padding   

     行内元素设置margin 和 padding部分有效

 

 四、标准文档流的组成

1.块级元素  

<h1>…<h6>、<p>、<div>、列表等

2.内联元素(行内元素) 

  <span>、<a>、<img/>、<strong>、<em>、<i>  

     经验之谈---标准的套用规则：

    内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

五、display属性

display:none;                           隐藏元素 设置元素不会被显示 

            block;                              显示块元素  

            inline;             元素会被显示为内联元素

                                  块级元素与行内元素的转变  

                                  把块元素转成了行内元素   

                                 把行内元素转成块元素 元素会被显示为块级元素 

           inline-block   行内块元素

 如上图所示为inline-block 行内块元素

行内块元素具有块元素的一切特性 比如可以设置宽高 具有margin和padding

 唯一不同的特性就是：不会独占一行 两个都是inline-block可以并列排 

两个div之间会产生空隙 原因是标签之间的空白区域引起的

  解决方法一：把两个div靠在一起写 保证没有空格

 

解决方法二：给他们的父级标签加上样式font-size:0;