CSS 基础 3

导读 -- target

• 能够准确阐述盒子模型的四个组成部分
• 能够利用边框复合写法给元素添加边框
• 能够计算盒子实际大小
• 能够利用盒子模型布局模块案例
• 能够给盒子设置圆角边框
• 能够给盒子添加阴影
• 能够给文字添加阴影

盒子模型

看透网页布局的本质

每一个网页都是由很多个盒子组成

网页布局流程:

1. 准备好相关的网页元素, 网页元素基本都是盒子box
2. 利用css 设置好盒子的样式, 然后摆放到相应的位置
3. 往盒子里面装内容

盒子模型组成

        所谓盒子模型, 就是把html页面中的布局元素看做是一个矩形的盒子, 也就是一个盛装内容的容器,  css 盒子模型本质上就是一个盒子 , 封装周围的HTML元素, 他包括: 边框, 外边距, 内边距, 和实际内容.

• border   边框
• content  内容
• padding  内边距
• margin    外边距

下面我们来看一个图来总结一下:

例如现在有一个div盒子, 我现在想给他添加一个边框, 可以这么来:

    <style>
        body {
            width: 400px;
            height: 200px;
            border-style: dashed;
            /* border-widht 是我们的边框粗细 一般使用px作为单位*/
            border-width: 5px;
        }
    </style>
    <div> 这是一个div标签</div>

这只是一个示例, 下面将详细介绍:

边框(border)

        我们第一眼看见这个边框, 是不是可以想到, 这个边框肯定是可以设置颜色的, 看到这个线条我们肯定可以看到边框是否有粗细. 居然有实现, 那么肯定有虚线等等样式

       下面我们就来看看边框都有哪些属性:

border的属性

border-style

        需要注意的是, 这里的border-style 的默认值是none, 也就是说, 如果你不设置border-style属性为除了none之外的值的话, 那么就是默认无边框, 即使是设置了border-width和border-color也会不显示边框

说明：

• 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
• 如果只提供一个，将用于全部的四条边。
• 如果提供两个，第一个用于上－下，第二个用于左－右。
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
• 要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
• 如果border-width不大于0，本属性将失去作用。
• 对应的脚本特性为borderStyle。请参阅我编写的其他书目。

border-color

border-color属性可以设置边框的颜色, 语法如下:

border-color: color;

说明:

• 如果提供全部四个参数, 将按照 上>右>下>左的顺序作用于四个边框
• 如果只提供一个, 那么就默认作用于全部的四条边
• 如果提供两个, 第一个将作用于 上和下, 第二个作用于 左和右.
• 如果提供三个, 第一个用于提供上, 第二个作用于左右, 第三个用于下
• 要使用该属性, 必须先设定对象的height和width属性, 或者设定position属性为absolute
• 如果border-width 等于0, 或者是border-style设置为none. 本属性将会失去作用

border-width

说明：

• 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
• 如果只提供一个，将用于全部的四条边。
• 如果提供两个，第一个用于上－下，第二个用于左－右。
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
• 要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
• 如果border-style设置为none，本属性将失去作用。
• 对应的脚本特性为borderWidth。请参阅我编写的其他书目。

边框写法

简写

例如:

width和style和color之间是没有顺序的

说明：

• 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
• 默认值为：medium none。border-color的默认值将采用文本颜色。
• 要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
• 对应的脚本特性为border。请参阅我编写的其他书目。
• 关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及height和width属性。

分开写

表格细线边框

有时候我们想要表格的线更细一点

例如:

 两个单元格之间的边框重合了, 这就会导致他们比其他没有重合的边框会更粗

如何解决这种问题?

使用属性: border-collapse: collapse

边框会影响盒子实际大小

       我们看这张图, 很明显你会发现, 一个盒子的大小不只是content的内容, 他还包含内边距padding和外边距margin, 还有边框的宽度.

       所以我们在修改变边框的时候, 就会修改边盒子的实际大小, 因此我们在测量盒子大小的时候, 不量边框, 如果测量的时候包含了边框, 则需要width height减去边框的宽度.

内边距

内容

内容很好理解, 也就是我们上图中content的部分.

       如果我们设置了一个如下的案例, 我们就会发现, 这个内容距离这个背景的边缘部分太紧凑了, 觉得不美观, 那我们可不可以把他变得离开这个边缘部分更远一点呢??        

       比如说就像这样, 如下图一样:

       该如何设置?? 这就要用到我们的内边距了

内边距-padding

       使用padding属性来设置内边距, 即边框和内容之间的距离.

例如这里有一个盒子, 其中包含一些内容, 代码如下:

    <div>
        你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!
        你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世界!!!你好世好
    </div>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

使用padding属性来修改他的边距:

1.上边距

padding-top: 20px;

2. 左边距

padding-left: 20px;

       从浏览器的控制台看到左边距为20px

右边距和下边距同样如此, 此处不一一列举

padding属性简写

padding对盒子的影响

1. 内容和边框有了距离, 添加了内边距

2. padding会影响盒子实际大小

对于低一点我们来回顾一下, 盒子的组成

回顾一下盒子模型, 盒子是由这几个部分组成:

• 外边距 margin
• 边框 border
• 内边距  padding
• 内容   content

box盒子的大小由这四个部分一起决定.

       其中如果我们修改了padding, 那势必会影响到盒子的大小. 修改padding同时也会影响内容和边框的距离.

       但是有时候我们不想修改box的大小, 但是需要修改padding的大小该怎么办??

修改width属性和height属性即可.

padding的特殊情况

        如果盒子本身没有指定width和height属性, 则此时设置padding属性不会撑开盒子大小.

外边距

什么是外边距

       外边距, 也就是上图中的margin. 是边框外的一层, 也是盒子的最外一层.

       我们经常发现, 盒子和盒子直接是有距离的:

       例如上图中紫色的部分, 就是盒子和盒子之间的距离.

       那我们如何来控制这个距离呢?? 可以使用属性 margin

margin: 控制盒子外边距的大小

例如, 这里有两个盒子, 代码如下:

    <div>
        1
    </div>
 
    <div>
        2
    </div>
 
    <style>
        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
        }
    </style>

下面我想要这两个div盒子中间隔开, 并且让这两个数字在这个正方形中间显示:

    <div>
        1
    </div>
 
    <div>
        2
    </div>
 
    <style>
        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
 
            line-height: 200px;
            text-align: center;
            margin: 10px;
        }
    </style>

简写

       margin的简写和padding一摸一样.

块级盒子水平居中

       让块级元素水平居中需要满足两点:

① 盒子必须设置width属性

② 盒子左右的外边距必须设置为auto

例如, 现在有一个盒子, 但是他在页面的左侧, 代码如下:

    <div>
    </div>
 
    <style>
        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
        }
    </style>

       但是我想要他居中显示.

    <div>
    </div>
 
    <style>
        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
 
            margin: 0 auto;
        }
    </style>

我们margin还可以这样写:

        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
 
            margin-left: auto;
            margin-right: auto;
        }

也可以:

    <style>
        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
 
            /* margin: 0 auto 0; */
            /* margin: 0 auto; */
 
            /* margin-left: auto; margin-right: auto*/
 
            margin: auto;
        }
    </style>

我们只要保证左右设置为auto就可以.

外边距合并

       使用margin定义款级元素的垂直外边距时, 可能会出现外边距的合并.

这个例子可以参考:

    <div>
        1
    </div>
 
    <div>
        2
    </div>
 
    <style>
        div {
            background-color: burlywood;
            width: 200px;
            height: 200px;
 
            line-height: 200px;
            text-align: center;
            margin: 10px;
        }
    </style>

       1和2之间那个白色的高度为10px, 但是我设置了两个盒子的外边距都为10px,那两个盒子之间的距离不应该是20px吗, 这就是盒子外边距的合并

嵌套块级元素垂直外边距的塌陷

       对于嵌套关系的块元素, 父元素有上边距的同时子元素也有上外边距, 此时父元素会塌陷较大的外边距值.

清除内外边距

       举两个例子

       我们观察这个图片, 发现, 这个123并不是贴着这个页面的最顶部和最左侧, 而是有一定的距离

       还有一个例子是:

    <ul>
        <li>123</li>
    </ul>

       我们放大来看这张图

        可以发现这个标签有16px的外边距和40px的内边距.

       图中的方框中都是多出来的边距, 而不是我们手动设置的, 其实这就说明了我们的一些业内元素, 很多都是自己就默认有内外边距的.

       网页元素很多都带有默认的内外边距, 而且不同的浏览器默认的也不一致, 所以我们在布局之前就徐璈清楚下网页元素的内外边距:

* {
    margin: 0; /*清除外边距*/
    padding: 0; /*清除内边距*/
}