今天我们学习了:
5. 外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
5.1 外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足一下两个条件:
-
必须是块级元素。
-
盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}
5.2 文字(行内元素)居中
-
文字水平居中是 text-align: center
-
盒子水平居中:左右margin 改为 auto
text-align: center; /* 文字居中水平 */ margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
5.3 清除元素的默认内外边距
为了更方便地控制网页中元素,制作网页时,可使用如下代码清除元素的默认内外边距:
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }
注意: 行内元素是只有左右外边距的,是没有上下外边距的。 内边距,在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
5.4 外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
5.4.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
5.4.2 嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
6. 插入图片和背景图片区别
-
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
-
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
8. CSS盒模型大小计算
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值,其让元素维持W3C的标准Box Mode。2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。
8.1 盒子模型的概念
就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
8.2 盒子模型的组成
一个元素占有空间的大小由几个部分构成,其中包括
元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin), 四个部分,这四个部分一起构成了盒子模型。
8.3 盒子模型的分类
盒模型的分类(最重要的部分) 盒模型分为 : W3C标准盒子 、IE盒子
1.W3C标准盒子(content-box):
在这种盒模型下,我们所说的元素的 width ,实际上只包含 content
盒子总宽度 = margin + border + padding + width
2.IE盒子(border-box):
又称怪异盒模型(边框盒子),是指块元素box-sizing属性为border-box的盒模型。
在这种盒模型下,我们所说的元素的 width ,实际上包含了 content + padding + border
盒子总宽度= margin + width
9. 盒子阴影
语法格式:
10.overflow 溢出(补充)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible(默认) : 不剪切内容也不添加滚动条。 auto : 超出自动显示滚动条,不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll : 不管超出内容否,总是显示滚动条
应用:溢出的文字隐藏
CSS-浮动和定位
1. 浮动(float)
1.1 CSS 布局的三种机制
网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:
-
普通流(标准流)
-
块级元素会独占一行,从上向下顺序排列;
-
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
-
-
浮动
-
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
-
-
定位
-
将盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。
-
总结:html当中有一个相当重要的概念,标准流或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
1.2 为什么需要浮动?
1.3 什么是浮动?
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
在CSS中,通过float属性来定义浮动,其基本语法格式如下:
1.4 浮动的特性
浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
1.4.1 浮动的元素的对齐
浮动首先创建包含块的概念(包裹),总是找离它最近的父级元素,但是不会超出内边距的范围。
1.4.2 浮动的元素排列位置
浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。