阶段性总结（CSS) 三

最新推荐文章于 2024-10-11 15:51:17 发布

小李不吃糖0

最新推荐文章于 2024-10-11 15:51:17 发布

阅读量61

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_50911050/article/details/126921617

版权

1.盒子模型

CSS盒子模型，用于封装html元素，包括边框，外边距，内边距，实际内容。

BoxModel: border, content, padding, margin.

1.1border属性

.box{
    border-width:2px;
    /* 边框宽度 */
    border-color:black;
    /* 边框颜色*/
    border-style:solid;
    /* 边框样式,solid实线  dashed虚线  dotted点线 */
    border: 1px solid red;
    /* 复合写法 */
    border-collapse: collapse;
    /* 将相邻紧挨着的元素边框合并，只显示一条边框 */
}

1.2边框与三角

盒子模型border的本质是4个三角形拼接在一起形成边框（像相框一样），调整盒子本体大小可以使三角形完全显现，借此可以设计不同的三角形。

<body>
    <div class="ex1">
        1
        </div>
    <div class="ex2">
        2
        </div>
    <div class="ex3">
        3
        </div>
     <div class="ex4">
        4
     </div>  
</body>
<style>
            .ex1,
            .ex2,
            .ex3{
                width: 0;
                height: 0;
                border: 20px solid ;
                border-color:red yellow blue green ;
            }
            /* 并集选择器 */
            .ex2{
                border-color: red transparent transparent transparent;
            }
            /* 样式层叠特性 */
            .ex3{
                border-color: transparent blue blue transparent;
            }
            .ex4{
                width: 0;
                height: 0;
                border-style: solid ;
                border-color:transparent yellow transparent transparent ;
                border-width: 20px 20px 20px 0;
            }
        </style>

效果图为

将盒子模型宽高都设为0，可以看到边框确实是由4个三角形拼接而成的，

因此当我们需要类似三角形样式时，便可以通过给其他3个边框设置border-color：transparent(透明)，来隐藏，只显示我们所需的一条边框上的三角形，即可得到第2个的效果。同理设置两个相邻边框有颜色，则可以得到一个直角三角形。但这些情况下颜色透明的边框仍然占据着空间，因此我们将需要展示的一条边的对立方设置为border-width:0，便可以达成图4的效果。

注:border-solid不能为空，否则边框不显示

2.padding(内边距)

div{
    /* padding-top/right/bottom/left */
    padding: 5px 10px 15px 20px ;
    /* 设置内边距 顺序依次为 上，右，下，左 */
    /* 存在不同简写形式 */
    padding:5px;
    /* 全部设为5px */
    padding:5px 10px;
    /* 上下=5px,左右=10px */
    padding:5px 10px 20px;
    /* 上=5px,左右=10px,下=20px */
}

3.外边距

div{
    /* margin-top/right/bottom/left */
    margin: 5px 10px 15px 20px ;
    /* 其简写形式与padding相同 */
}

4.CSS3新增盒模型

border-box与content-box
普通盒模型既content-box，盒子的宽高指的是content的宽高，border/padding会撑大盒子。
怪异盒模型既border-box,盒子的宽高已经包含了包含了content,border,padding,即width的值就是最终盒子的大小。

通过下图（content-box）可以看出，padding内边距其实就是盒子的内容距离盒子边界的距离，而margin则是盒子边界距离其他元素边界的距离。

普通盒模型的最终大小为：content+padding+border。

通过设置属性box-sizing:border-box，可以转换为CSS3盒模型，使得盒子最终大小即为width/height的值。

5.居中对齐

块级盒子居中：块级盒子（已设置宽度）margin:0 auto，即可实现居中对齐
行内块元素：为其父元素添加text-align:center,即可实现居中对齐

6.外边距合并

当两个相邻盒子的外边距相邻时并不会叠加，例如左盒子的margin-right和右盒子的margin-leftt。而是会取二者最大值作为两盒子的最终外边距。

塌陷问题

嵌套在一个父元素div中的子div 在设置了margin-top后，发现并没有和父元素的顶部拉开距离，而是带着父元素一起向下偏移了margin-top的长度，此即外边距塌陷。

<style>
        .father{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: red;
            margin-top:50px;
        }
    </style>
<body>
    <div class="father">
        <div class="son">

            </div>
    </div>
    
</body>

解决方法：

为父元素定义边框
为父元素定义内边距
为父元素添加overflow:hidden

7.清除网页元素的内外边距

浏览器通常会自带默认的元素边距，这样不利于我们进行样式设置，因此通常会在最开始对网页元素进行清除边距的操作。这里用到了之前接触到的通配符选择器。

*{
    margin: 0;
    padding: 0;
        }

8.其他样式

 div{
border-radius:10px;
/*设置圆角边框,四个角可分开设置不同半径*/

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 /* 盒子阴影:x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

text-shadow: 1px 1px 2px black;
/* 文字阴影：offset-x | offset-y | blur-radius | color */
        }