【CSS】：圆角矩形与元素的显示模式_css 圆角矩形-优快云博客

本文链接：https://blog.youkuaiyun.com/2303_79015671/article/details/145420316

🏠大家好，我是Yui_💬
🍑如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🚀如有不懂，可以随时向我提问，我会全力讲解~
🔥如果感觉博主的文章还不错的话，希望大家关注、点赞、收藏三连支持一下博主哦~！
🔥你们的支持是我创作的动力！
🧸我相信现在的努力的艰辛，都是为以后的美好最好的见证！
🧸人的心态决定姿态！
💬欢迎讨论：如有疑问或见解，欢迎在评论区留言互动。
👍点赞、收藏与分享：如觉得这篇文章对您有帮助，请点赞、收藏并分享！
🚀分享给更多人：欢迎分享给更多对编程感兴趣的朋友，一起学习！

1. 圆角矩形

在我们使用电脑时，大多数的窗口都是圆角的。个人觉得圆角确实比直角耐看。
为了把网页上的窗口也做成圆角，我们可以通过border-radius使得边框带有圆角效果。
基本语法：

border-radius:length;

length是内切圆的半径，数值越大，弧线越强烈。

1.1 基本使用

<!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>
        div{
            width: 200px;
            height: 100px;
            border:2px solid red;
            border-radius: 10px;    
        }
    </style>
</head>
<body>
    <div>
        hello
    </div>
</body>
</html>

在这里插入图片描述

具体想要什么样的圆角矩形可以不断地修改length来观察图像变化得到最满意地圆角矩形。

1.2 生成圆形

首先我们需要人宽和高相同，然后把length设置为正方形宽度地一半即可。

<!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>
        body{
            width: 100px;
            height: 100px;
            border:2px solid red;
            border-radius: 50px;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

1.3 展开写法

border-radius是一个复合写法，实际上我们可以对四个角进行分别地处理。

border-radius:2px;

等价于

border-top-left-radius:2px;  
border-top-right-radius:2px;  
border-bottom-right-radius:2px;  
border-bottom-left-radius:2px;

同样的

border-radius: 10px 20px 30px 40px;

等价于

border-top-left-radius:10px;  
border-top-right-radius:20px;  
border-bottom-right-radius:30px;  
border-bottom-left-radius:40px;

<!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>
        body{
            width: 100px;
            height: 200px;
            border: 2px solid red;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    
</body>
</html>

演示效果：
在这里插入图片描述

2. 元素的显示模式

在CSS中，HTML的标签的显示模式有很多。
但是，本文只介绍以下两个：

块级元素
行内元素

2.1 块级元素

常见的元素

h1-h6
p
div
ul
ol
li
...

特点：

独占一行。
高度、宽度、内外行边距，行高都可以控制。
高度默认是父级元素宽度的100%（和父元素一样宽）
是一个容器，里面可以放行内和块级元素。

<!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>
        .test .parent{
            width:500px;
            height: 500px;
            background-color: red;
        }
        .test .child{
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="parent">
            <div class="child">
                child1
            </div>
            <div class="child">
                child2
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

注意：

.test .child{
	height: 200px;
	background-color: blue;
}

不写width默认和父元素一样宽，不写height，默认为0.
同时注意：

文字类的元素内不能使用块级元素。
p标签注意用于存放文字，内部不能放块级元素，特别是div

2.2 行内元素/内联元素

常见的元素：

a
strong
b
em
i
del
s
ins
u
span
...

特点：

不能独占一行，一行可以显示多个。
设置高度，宽度，行高无效。
左右外边距有效，内边距有效。
默认宽度就是本身内容。
行内元素只能容纳文本和其他行内元素，不能放块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .demo2 span {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <div class="demo2">
        <span>child1</span>
        <span>child2</span>
        <span>child3</span>
    </div>
</body>

</html>

在这里插入图片描述

特性	行内元素	块级元素
显示方式	与其他元素同一行	占据整个行
占用空间	仅占内容空间	占据整行空间
宽高控制	不能设置宽高	可以设置宽高
是否可以设置外边距	只能设置左右外边距	可以设置上下和左右外边距
换行行为	不会换行	总是换行