前端CSS核心部分盒子模型_前端css 核心-CSDN博客

本文链接：https://blog.csdn.net/qq_36437693/article/details/117776439

本文介绍了CSS中元素的显示模式，包括块元素、行内元素和行内块元素，并列举了常见示例。此外，详细阐述了盒子模型，包括padding、border、margin及其对外边距合并的影响。同时，探讨了如何实现单行文字垂直居中、背景设置、圆角边框以及盒子阴影。最后，提到了清除内外边距的方法和应用。

摘要由CSDN通过智能技术生成

CSS 的元素显示模式

HTML 元素一般分为块元素和行内元素两种类型，除此之外，还包含行内块元素，也就是块元素和行内元素的特性都有

常见的块元素

h1~h6 p div ol ul li

注意，文字类的元素，不能放块元素

常见的行内元素

a, strong,i,em,span,del,s,ins,u等等

a标签的是行内元素，注意而且内部可以放块元素

行内块元素

总结

元素显示模式转换

单行文字垂直居中的原理

行高等于盒子的高度，文字居中

CSS 的背景

背景颜色

background-color:transparent;

背景图片

背景平铺

图片位置

背景图片固定

背景复合写法

背景色半透明

盒子模型

盒子模型（Box Model）组成

padding和border都会让其原来的盒子变大，CSS2是计算padding和border的部分，如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。在CSS3进行了完善设置数据可以修改计算的内容。

边框（border）

Padding内边距

外边距（margin）

外边距合并

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

主要有两种情况:

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

2. 嵌套块元素垂直外边距的塌陷

情况一：下外边距上外边距

情况二：嵌套盒子父上外边距，子上外边距

解决方案：

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加 overflow:hidden。

清除内外边距

圆角边框

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

</html>