2024年6月18日实训总结

最新推荐文章于 2024-08-16 23:06:16 发布

bjxkong

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量646

点赞数 28

文章标签： css 前端

本文链接：https://blog.csdn.net/Bujianxk/article/details/139778274

版权

今天我们学习了:

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 特效。