css-04

最新推荐文章于 2024-09-27 11:01:06 发布

Aciel_

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量940

点赞数 41

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Aciel_/article/details/139785611

版权

一.外边距()margin)

1.1 外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给**左右的外边距都设置为auto**，就可使块级元素水平居中。

<style> 
.main {
            /* 盒子居中的要素 */
            /* 1.必须是块级元素 */
            /* 2.版心 内容中心的宽度 */
            /* 3.margin :0 auto;(左右必须是auto) */
            width: 800px;
            height: 100px;
            margin: 0 auto;
            background-color: red;
        }
</style>

1.2 清除元素的默认内外边距

 <style>
        /* 练习时允许使用通配符清楚内外边距 */
        *{
            margin: 0;
            padding:0;
        } 
</style>

●注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

1.3 外边距合并

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

1.3.1 相邻块元素垂直外边距的合并(外边距塌陷)

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

在上篇文章已讲解

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

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

1. 可以为父元素定义1像素的上边框或上内边距。

2. 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 以下父子元素中都含有margin-top,谁的值更大,谁的更明显可以体现出来 */
        
        .father {
            width: 400px;
            height: 200px;
            background-color: blueviolet;
            margin-top: 10px;
            /* 1.给父元素设置1px的上边框或者1px上内边距 */
            /* border-top: 1px solid blueviolet; */
            /* padding-top: 1px; */
            /* 2.溢出隐藏,BFC原理 */
            overflow: hidden;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: yellow;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

二. CSS盒子模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

分两种情况:

● box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准Box Mode。

●box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。

2.1 盒子模型概念

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

一个元素占有空间的大小由几个部分构成，其中包括:

元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin），四个部分，这四个部分一起构成了盒子模型。

2.2 盒子模型分类

盒模型的分类（最重要的部分）

盒模型分为： W3C标准盒子、IE盒子(怪异盒子模型)

2.2.1 标准盒子模型计算

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

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

2.2.1 IE盒子模型 (怪异盒子模型)计算

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

盒子总宽度= margin + width

三. 盒子阴影

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            margin: 50px auto;
            border: 2px solid red;
            /* 盒子阴影 */
            /* box-shadow: 水平阴影 垂直阴影 模糊距离(模糊范围) 阴影尺寸 阴影颜色; */
            box-shadow: 0px 10px 100px 10px gray;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

四. overflow 溢出

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

visible(默认) : 　不剪切内容也不添加滚动条。

auto : 　超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

    <style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            /* 溢出隐藏 */
            overflow: hidden;
            /*自动:当有内容超出时,自动出现滚动条 */
            overflow: auto;
            /*scro11 :不管超出内容否，总是显示滚动条 */
            overflow: scroll;
        }
    </style>