CSS深入基础篇---CSS盒子模型(7)

目标:

 

能够准确阐述盒子模型的4个组成部分

能够利用边框复合写法给元素添加边框

能够计算盒子的实际大小

能够利用盒子模型布局模块案例

能够给盒子设置圆角边框

能够给盒子添加阴影

能够给文字添加阴影

网页布局要学习三大核心: 盒子模型,浮动和定位.

盒子模型有什么作用呢?

学习好盒子模型能非常好的帮助我们布局页面

网页布局过程:

        1.先准备好相关的网页元素,网页元素基本都是盒子Box

2.利用CSS设置好盒子样式,然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质: 就是利用CSS摆盒子

盒子模型(Box Model)组成

所谓 盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,说白了 就是可以装内容的容器

CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框,外边框,内边框,和实际内容

边框(border)

border可以设置元素的边框.边框有三部分组成:边框宽度(粗细), 边框样式, 边框颜色

语法:

        border: border-width || border-style  || border-colo

属性	作用
border-width	定义边框粗细,单位是px
border-style	边框的样式
border-color	边框颜色

boder-style: solid 实线   border-style: dashed 虚线  border-style: dotted 点线  

边框的复合写法(是没有固定顺序的):

一般情况下: border: 1px solid red;  即 宽度 样式 颜色

或者边框的分开写法:

        border-top: 1px solid red; 这个是设置上边框,其余同理

表格的细线边框

回顾: <table cellspacing="0">  此处的 cellspacing的含义是单元格与单元格之间距离为0

border-collapse属性控制浏览器绘制表格边框的方式.它控制相邻单元格的边框

border-collapse: collapse;   表示相邻边框合并在一起       其中 collapse单词是合并的意思   

边框会影响盒子实际大小

边框会额外增加盒子的实际大小.解决方案:

1.测量盒子大小时候.不量边框

2.如果测量的时候包含了边框,则需要width/height减去边框宽度

内边距部分 已经单独列出  可在CSS专栏找到

外边距(margin)

margin属性用于设置外边距,即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写的方式和padding一致

外边距典型应用

外边距可以让块级盒子水平居中, 但是必须满足两个条件:

1.盒子必须指定了宽度(width)

2.盒子左右的外边距都是设置为 auto

例子: .header {

        width:960px;

        margin:0 auto;

}

常见的写法,有三种:

1. margin-left:auto;    margin-right:auto;

2.margin:auto;

3. margin:0 auto;(开发中最常用写法): 上下是0 左右是auto      (对于行内元素和行内块元素是无效的 因为二者都是没有 宽度的)

如何让行内元素和行内块元素实现水平居中?

给其父元素添加 text-align:center; 即可

外边距合并(有两种情况)

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

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时, 如果上面的元素有下外边距margin-bottom 下面的元素有外上边距 margin-top , 则他们之间的垂直间距不是 margin-bottom宇margin-top之和, 而是取两个值中较大者 这种现象被称为相邻块元素垂直外边距的合并

解决方案:

尽量只给一个盒子添加 margin值

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

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

解决方案:

1.可以为父元素定义上边框

2.可以为父元素定义上内边框

3.可以为父元素添加 overflow:hidden;

还有其他的方法,比如浮动,固定,绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致.因此我们在布局前,首先要清除下网页元素的内外边距

什么是默认的内外边距?

就是前面默认的空隙

 * {

        padding: 0; /*清除内边距*/

        margin: 0; /*清除外边距*/

}

这也是CSS的第一行代码

注意: 行内元素为了照顾兼容性,尽量只设置左右内外边距,    不要设置上下内外边距.但是转换为块级和行内块元素就可以设置上下内外边距了.