第七十三节，css盒模型

css盒模型

 

 

学习要点：
1.元素尺寸
2.元素内边距
3.元素外边距
4.处理溢出

 

本章主要探讨HTML5中CSS盒模型，学习怎样了解元素的外观配置以及文档的整体布局。

 

一．元素尺寸
CSS盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：

         属性                       值                                             说明                                CSS版本

        width      　　　　　 auto、长度值或百分比 　　　　       设置元素的宽度                   1

        height     　　　　    auto、长度值或百分比 　　　　       设置元素的高度                  1

      min-width  　　　　   auto、长度值或百分比 　　             设置元素最小宽度                2

     min-height 　　　　    auto、长度值或百分比 　　　　　　  设置元素最小高度                2

      max-width  　　　　  auto、长度值或百分比 　　　　        设置元素最大宽度               2

     max-height 　　　　   auto、长度值或百分比 　　　　        设置元素最大高度               2

 

width，height设置元素尺寸，元素的宽度和高度

                值                    说明

               auto　　　　　 自适应

　　　　　像素px　　　　 设置元素尺寸

　　　　　百分比　　　　  设置元素百分比尺寸，相对于父元素来衡定的

div{
    background-color: #ff1c19;
    width: 400px;
    height: 200px;
}

<div>
    <p>你好</p>
</div>

 

min-width,min-height设置元素最小宽度和最小高度

                值                    说明

               auto　　　　　 自适应

　　　　　像素px　　　　 设置元素尺寸

　　　　　百分比　　　　  设置元素百分比尺寸，相对于父元素来衡定的

div{
    background-color: #ff1c19;
    min-width: 400px;
    min-height: 200px;
    width: 200px;
    height: 100px;
}

<div>
    <p>你好</p>
</div>

 

max-width，max-height设置元素最大宽度和最大高度

                值                    说明

               auto　　　　　 自适应

　　　　　像素px　　　　 设置元素尺寸

　　　　　百分比　　　　  设置元素百分比尺寸，相对于父元素来衡定的

div{
    background-color: #ff1c19;
    max-width: 200px;
    max-height: 100px;
    width: 400px;
    height: 200px;
}

<div>
    <p>你好</p>
</div>

 

二．元素内边距 

CSS盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：

          属性                   　　　　　　值                  　　　　　　说明         　　　　　　CSS版本

       padding-top        　　　　  长度值或百分比             　   设置顶部内边距                   1

     padding-bottom       　　　  长度值或百分比             　   设置底部内边距              　  1

      padding-left        　　　　   长度值或百分比             　   设置左边内边距                   1

      padding-right       　　　　  长度值或百分比            　　 设置右边内边距              　  1

         padding       　　　　　　 1~ 4个长度值或百分比 　　   简写属性                           1

div{
    background-color: #ff1c19;
    width: 400px;
    height: 200px;
}
div > p{
    background-color: #36ff1d;
    padding-top: 20px;
    padding-bottom: 40px;
    padding-left: 60px;
}

<div>
    <p>你好</p>
</div>

内边距简写格式，上右下左

div{
    background-color: #ff1c19;
    width: 400px;
    height: 200px;
}
div > p{
    background-color: #36ff1d;
    padding: 10px 20px 10px 20px;
}

<div>
    <p>你好</p>
</div>

 

三．元素外边距

CSS盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：

           属性                  　　　　 值                　　　　　　 说明           　　　　　　SS版本

       margin-top         　　       长度值或百分比            　　设置顶部内边距               1

      margin-bottom       　　    长度值或百分比                  设置底部内边距               1

       margin-left        　　        长度值或百分比            　　设置左边内边距               1

      margin-right        　　　　 长度值或百分比            　　设置右边内边距               1

          margin       　　　　　　1 ~ 4长度值或百分比          简写属性                        1

div{
    background-color: #ff1c19;
    width: 400px;
    height: 200px;
}
div > p{
    background-color: #36ff1d;
    width: 200px;
    height: 100px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
}

<div>
    <p>你好</p>
</div>

外边距简写格式，上右下左

div{
    background-color: #ff1c19;
    width: 400px;
    height: 200px;
}
div > p{
    background-color: #36ff1d;
    width: 200px;
    height: 100px;
    margin: 10px 20px 30px 40px;
}

<div>
    <p>你好</p>
</div>

 

四．处理溢出 

当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过overflow系列样式来控制它。

      　　属性             　　值                 　　 说明                 　　　　　　CSS版本

      overflow-x      　　溢出值        　　　　设置水平方向的溢出                 3

      overflow-y      　　溢出值        　　　　设置垂直方向的溢出                 3

       overflow       　　 溢出值        　　　　简写属性                           　  2

以上溢出处理主要有四种处理值：

         值        　　　　 说明

        auto        　　  浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条。         

       hidden      　　  如果有溢出的内容，直接剪掉。

       scroll       　　   不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同。      

       visible       　　  默认值，不管是否溢出，都显示内容。

div{
    background-color: #ff1c19;
    width: 400px;
    height: 200px;
}
div > p{
    background-color: #36ff1d;
    width: 200px;
    height: 100px;
    overflow-y: hidden;
}

<div>
    <p>简介：当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候，他的父亲，也是酒店董事长的梁泽，以及总经理梁宇青，正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行，就这样被压回了酒店准备亮相。但宇方仍不甘示弱，仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱，向天微义不容辞同行来帮忙，两人仓皇找着</p>
</div>

 

元素可见性

使用visibility属性可以实现元素的可见性，这种样式一般可以配合JavaScript 来实现效果。样式表如下：

属性 　　　　　　值 　　　　　　　　 说明 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　CSS版本

visibility　　　　visible 　　　　　　 默认值，元素在页面上可见。 　　　　　　    　　　　　　　　　　　　 2

　　　　　　　  hidden 　　　　　　元素不可见，但会占据空间。 　　　　　　　 　　　　　　　　　　　　  2

　　　　　　　 collapse  　　　　　 元素不可见，隐藏表格的行与列，如果不是表格，则和hidden一样。         2

table .a{
    visibility: collapse;
}

<div>
   <table border="1">
       <tr class="a">
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>4</td>
           <td>5</td>
           <td>6</td>
       </tr>
   </table>
</div>

 

元素盒类型
CSS盒模型中的display属性，可以更改元素本身盒类型。那么元素有哪些盒类型呢？ 主要有：1.块级元素（区块）；2行内元素（内联）；3行内 块级元素（内联块）；4.隐 藏元素。

1.块级元素 （区块）
所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。比如：<div>、<p>等文档元素。

2.行内元素 （内联）
所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：<span>、<b>等文本元素。

3.行内-块元素 （内联块）
所谓行内 块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。

 

         属性                值                    说明               　　　　CSS版本

        display         block        　　    盒子为块级元素             1

                            inline       　　　  盒子为行内元素             1

                     　　 inline-block        盒子为行内 块元素         2

                            none                  盒子不可见，不占位       1

 

将内联转换成区块

span{
    background-color: #ff1d30;
    display: block;
}

<span>这是内联</span>

将区块转换成内联

p {
    background-color: #ff1d30;
    display: inline;
}

<p>这是区块</p>

将块级元素转化成行内块元素（内联块）

p{
    background-color: #ff1d30;
    display: inline-block;
}

<p>这是区块</p>

将盒子元素隐藏，不占位

p{
    background-color: #ff1d30;
    display: none;
}

<p>这是区块</p>文本

 display属性还有非常多的值，有些后面部分讲解，而有些支持度不好或者尚不支持，从而省略。有兴趣的，可以参考CSS3手册。

元素的浮动
CSS盒模型有一种叫浮动盒，就是通过float属性建立盒子的浮动方向，样式表如下：

         属性               值                     说明             　　　　 CSS版本

         float             left         　　     浮动元素靠左                1

         　　　　　　 right        　        浮动元素靠右                1

                            none                  禁用浮动                      1

div {
    width: 200px;
    height: 200px;
}
.a{
    background-color: #ff1d30;
    float: right;
}
.b{
    background-color: #ffcf2c;
    float: right;
}
.c{
    background-color: #3eff51;
    float: left;
}

<div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>

 

清除浮动

刚才的浮动有一个问题：当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导致元素不可见或部分不可见。我们可以使用clear属性来处理。

 

         属性               值                    说明              　　　　　　　　　　CSS版本

 

        clear            none         　　   允许两边均可浮动                    　　 1

 

                           left           　　    左边界不得浮动                              1

 

                           right           　　   右边界不得浮动                             1

 

                           both           　　   两边都不得浮动 【推荐】                1

div {
    width: 200px;
    height: 200px;
}
.a{
    background-color: #ff1d30;
    float: left;
}
.b{
    background-color: #ffcf2c;
    clear: left;
}
.c{
    background-color: #3eff51;
}

<div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>

 

 position定位CSS中定位的使用

属性名称            　　属性值              　　 说明

position            　　relative            　　设置区块基准点为左上角（相对定位）

                              absolute           　  设置网页的为基准点左上角（绝对定位）

　　　　　　　　　　static                     无设置

              

 left               　　    auto                　　以基准点定位在左边

                               像素/百分比         　定位在左边

 

top                　　　 auto                      以基准点定位在上边

                               像素/百分比            定位在上边

 

 right                       auto                      以基准点定位在右边

                               像素/百分比            定位在右边 

 

bottom                    auto                      以基准点定位在下边

                               像素/百分比            定位在下边 

 

 z-index                   auto                     自动调整高度

                                数字                      数字越大越往上层

 

 使用技巧，有时候会把父亲级元素设置为相对定位，只设置一个相对定位不设置定位值，然后将子级元素设置绝对定位

 

vertical-align内联元素垂直位置设置

解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。

              值                           说明                   　　　　　　　　　　　　 CSS版本

            长度值           　　　　设置上下的偏移量，可以是负值                       1

            百分比           　　　　同上                                                           1

@charset "utf-8";
div{
    width: 132px;
    height: 42px;
    background-color: #4af5ff;
}
samp{
    background-color: #ff4e37;
    vertical-align: -10px;
}

<div>
    <samp>加入购物车</samp>
</div>