web基础.5-CSDN博客

本文链接：https://blog.csdn.net/2301_77482582/article/details/139772880

一、盒子模型外边距

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

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

1. 外边距实现盒子居中

块元素
版心内容中心宽度(指定盒子宽度)
margin: 0 auto;

.header{ width:960px; margin:0 auto;}

2. 清除元素的默认内外边距

/* 清除内外边距练习时使用* ,正常情况下不使用尽量使用类标记*/

*{

margin: 0;

padding: 0;

}

3. 外边距合并

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

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

给父元素设置1px的上边框或1px的内边距

/* border-top: 1px; */

3.2 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

/* 1.给父元素设置1px的上边框或1px的内边距 */

/* border-top: 1px; */

padding-top: 1px;

/* 2. overflow: hidden; 隐藏溢出 BFC原理*/

overflow: hidden;

二、插入图片和背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

img {
       width: 200px;/* 插入图片更改大小 width 和 height */
       height: 210px;
       margin-top: 30px; /* 插入图片更改位置可以用margin 或padding 盒模型 */
       margin-left: 50px; /* 插入当图片也是一个盒子 */
   }

div {
       width: 400px;
       height: 400px;
       border: 1px solid purple;
       background: #fff url(images/sun.jpg) no-repeat;
       background-position: 30px 50px; /* 背景图片更改位置用 background-position */
   }

三、盒子模型的分类

1.标准盒子

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

/* 标准盒子模型默认 */

/box-sizing: content-box;

2.IE盒子

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

IE盒子模型中盒子总宽度: margin + width

/* IE盒子模型 */

box-sizing: border-box;

四、盒子阴影

box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：默认是外阴影 (outset) ，不用设置，想要内阴影设为 inset 。

.box{

width: 200px;

height: 300px;

margin: 50px auto;

border: 2px solid #666;

/* 盒子阴影 */

/* box-shadow:水平阴影垂直距离模糊距离阴影尺寸(比原本盒子大的值) 阴影颜色*/

box-shadow: 0px 100px 10px 0px red;

}

五、overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible(默认)	不剪切内容也不添加滚动条。
auto	超出自动显示滚动条，不超出不显示滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条

/* 溢出隐藏 */

overflow: hidden;

/* auto内容超出时,自动出现滚动条 */

overflow: auto;

/* scroll不管是否超出,都有滚动条 */

overflow: scroll;

 <style>
        .box{
            width: 600px;
            height: 600px;
            border: 1px solid red;
            /* 对图片,溢出隐藏处理 */
            overflow: hidden;
            border-radius: 30px;
        }
        .cai{
            width: 600px;
            height: 600px;
        }

 </style>

  <div class="box">
        <img src="img/3.jpg" alt="" class="cai">
   </div>

六、浮动

1.CSS 布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

普通流（标准流）
- 1.块级元素会独占一行，从上向下顺序排列；
- 2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

2.设置浮动

选择器{
float:属性值;
}

none	元素不浮动。（默认）
left	元素左浮动
right	元素右浮动

.con div{

width: 200px;

height: 200px;

/* 浮动 */

/* 1.想要几个块元素在一行展示,对这几个元素都使用浮动 */

/* 2.盒子里几个元素进行浮动与其中一个元素中另几个元素浮动无关 */

float: left;

/* float: right; */

}