CSS学习六：盒子模型

在大型项目中，太多的css，也会造成复杂，此时一般会用SASS。

sass 是成熟、稳定、强大的 CSS 扩展语言。

一、盒模型

CSS盒模型：是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。

CSS定义的所有元素，都可以拥有像盒子一样的外形和平面空间，即都包含了边框border，外边距margin，内边距padding，内容区content。

盒模型一共有两种模工，标准模式和怪异模式。

盒的内容：

（1） overflow属性：指定如果内容content溢出一个元素的框，会发生什么。针对盒模型

overflow属性值：

visible：默认值，内容不会被裁剪，会呈现到元素框之外。
hidden：内容被裁剪，其余内容不可见。
scroll：内容被裁剪，滚动条显示其余内容。
auto：如果内容被裁剪，则浏览器以滚动条显示其余内容。

overflow-x属性：指定如果内容溢出了元素的内容区是否剪辑左/右边缘内容。

overflow-y属性：指定如果内容溢出了元素的内容区是否剪辑顶部/底部边缘内容。

（2） text-overflow属性：指定当文本溢出包含它的元素，应该发生什么。针对文本。

text-overflow属性值：

clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本
string：使用给定的字符串来代表被修剪的文本

注意：text-overflow必须和overflow:hidden；white-space:nowrap一起使用

盒模型示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                padding-left: 10px;
            }
            #box3 {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin-top: 10px;
            }
            #box5 {
                width: 100px;
                height: 100px;
                background-color: green;
                border: solid red 5px;
            }
            #box6 {
                width: 100px;
                height: 100px;
                background-color: orange;
                padding: 10px;
                margin: 20px;
                border: solid yellow 5px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            how are you?
        </div>
        <div id="box3">
            how are you?
        </div>
        <div id="box5">
            how are you?
        </div>
        <div id="box6">
            how are you?
        </div>
    </body>
</html>

可见，width，height属性，是内容content的宽度。

overflow示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box7 {
                width: 100px;
                height: 100px;
                background-color: aqua;
                /* overflow: visible; */
                /* overflow: hidden; */
                /* overflow: scroll; */
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="box7">
            网页中DIV+CSS盒模型组成，首先需要理解div，可以将其想像成一个大的盒子，它有border，padding，margin这些属性，会table布局的话，其实对于这个更好理解，看下盒子模型如
        </div>
    </body>
</html>

text-overflow示例：

        <style type="text/css">
            #box7 {
                width: 150px;
                height: 150px;
                background-color: aqua;
                white-space: nowrap; /*文本不换行，默认值normal自动换行*/
                overflow: hidden; /*内容被裁剪，其余内容不可见*/
                text-overflow: clip;
            }
        </style>

        <div id="box7">
            网页中DIV+CSS盒模型组成，首先需要理解div，可以将其想像成一个大的盒子，它有border，padding，margin这些属性，会table布局的话，其实对于这个更好理解，看下盒子模型如
        </div>

总结：

盒模型的宽度：width（margin，padding，border都为0时的宽度，即内容的宽度；否则是它们所有宽度之各：margin+padding+border+content）

盒模型的调度：height（margin，padding，border都为0时的高度，即内容的高度）

盒模型的背景：backgroumd-color:颜色值，background-image:url(图片地址)

盒模型的边框：border

盒模型的外边距：margin

盒模型的内边距：padding

二、盒模型的各个组件

边框border属性：

border：简写属性，用于把针对四个边的属性设置在一个声明中。boder-style，border-width，border-width合在一起写。
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。属性值：solid实线，dashed虚线(多数浏览器中呈实线)，dotted点状线(多数浏览器中呈现实线)，double双实线，
border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各个边框设置宽度
border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为各个边框单独设置颜色
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。boder-style，border-width，border-width合在一起写。
border-left：简写属性，用于把右边框的所有属性设置到一个声明中。同上
border-right：简写属性，用于把右边框的所有属性设置到一个声明中。同上
border-top：简写属性，用于把上边框的所有属性设置到一个声明中。同上

注意：如果要设置盒子的边框，必须制定边框线形。如果只制定了线形，那么颜色和宽度将会采用默认值。

边框border的线型border-style，分为：solid实线，dashed虚线，dotted点状线，double双线

线型的值：数值 + 单位

线形的颜色：颜色值

通常的写法，示例：线型、边框宽度(线的宽度)、线的颜色

border: solid 5px red;

border-left：double 5px blue;

内边距padding属性：填充元素内容与边框之间的区域，称之为内边距

用法：

用于调整内容在容器中的位置关系
用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上。
padding值，是额外加在元素原有大小之上的。如果想保证盒子大小不变，需从元素宽度或调度上减掉将要添加的padding属性值。

padding属性值（宽度、高度）的四种方式：

四个值：上右下左（顺时针），如{padding：10px 20px 30px 40px}
三个值：上左右下，如{paddding: 10px 20px 30px}，20px是左右的值。
二个值：上下左右，如{padding:10px 20px}，10是上下的padding值，20是左右的padding值
一个值：四个方向，如{padding: 10px}，上下左右都是10px的padding值

另外，也可单独设置某个方向上的padding。

如，上方{padding-top: 10px;}，右方{padding-right: 10px;}，下方{padding-bottom：10px;}，左方{padding-left: 10px}。

子元素在父元素中的位置，示例：

        <div style="width: 380px;height: 380px;background-color: red;padding: 10px 30px;">
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>

外边距margin：盒子与盒子之间的距离。

外边距margin的属性：

margin：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距

margin属性值（宽度、高度）的四种方式：

四个值：上右下左（顺时针），如{magin：10px 20px 30px 40px}
三个值：上左右下，如{margin: 10px 20px 30px}，20px是左右的值。
二个值：上下左右，如{margin:10px 20px}，10是上下的margin值，20是左右的margin值
一个值：四个方向，如{margin: 10px}，上下左右都是10px的margin值

说明：

{margin: 0 auto}在浏览器中，横向居中，margin为0。
也可单独设置某一方向上的边距。

示例：

        <div id="box8"></div>
        <div id="box9"></div>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box8 {
                width: 150px;
                height: 150px;
                background-color: red;
                margin-bottom: 20px;
            }
            #box9 {
                width: 150px;
                height: 150px;
                background-color: darkblue;
            }
        </style>

以示例的结果是box8和box9相距20px

示例，将box9的上外边距设置为25px：

            #box9 {
                width: 150px;
                height: 150px;
                background-color: darkblue;
                margin-top: 25px;
            }

示例的结果是box8和box9相距25px，而不是20+25=45px；当然box8下外边距仍然是20px，box9上外边距仍然是25px，但两个box这间的距离，取较大的margin值。

示例：增加两个横向的box---因为div是块级元素，自动换行，要使两个box横向排列，需要这两个box都设置为行内块级元素；使得两个box既可设置宽度，又可以不换行。

        <div id="box10"></div>
        <div id="box11"></div>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box10 {
                width: 150px;
                height: 150px;
                background-color: darkmagenta;
                display: inline-block;
            }
            #box11 {
                width: 150px;
                height: 150px;
                background-color: aqua;
                display: inline-block;
            }
        </style>

但是，发现两个box之间会有个小间距，即使全局的margin和padding都设置为了0。

这是浏览器自动加的边距。可见让两个box变为行内块级元素，可以使得它们横排，但是即使两个box的margin和padding都为0，也会有间距。

怎么才可以既能横排，又让浏览器不自动加边距。使用float浮动，对两个box都使用左浮动。

            #box10 {
                width: 150px;
                height: 150px;
                background-color: darkmagenta;
                float: left;
            }
            #box11 {
                width: 150px;
                height: 150px;
                background-color: aqua;
                float: left;
            }

示例，对以上两个box的第一个box设置margin-left

            #box10 {
                width: 150px;
                height: 150px;
                background-color: darkmagenta;
                float: left;
                margin-right: 50px;
            }
            #box11 {
                width: 150px;
                height: 150px;
                background-color: aqua;
                float: left;
            }

结果是，两个横向的盒子相距50px

示例，第一个盒子设置margin-left 50px，第二个盒子设置margin-right 50px

            #box10 {
                width: 150px;
                height: 150px;
                background-color: darkmagenta;
                float: left;
                margin-right: 50px;
            }
            #box11 {
                width: 150px;
                height: 150px;
                background-color: aqua;
                float: left;
                margin-left: 50px;
            }

示例的结果是，两个盒子相距100px，相距为两个盒子的边距之和。

可见，纵向时，盒子之间的距离取较大的盒子外边距；

横向排列时，盒子之间的距离为两个盒子外边距之和。

盒子尺寸的计算：

盒子宽 = 左右margin + 左右border + 左右padding + 内容width

盒子高 = 上下margin + 上下border + 上下padding + 内容height

posted on 2018-11-15 20:17 myworldworld 阅读(308) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld