【CSS】：圆角矩形与元素的显示模式
【CSS】：圆角矩形与元素的显示模式
Yui_
发布于 2025-02-03 00:27:47
发布于 2025-02-03 00:27:47
代码可运行
运行总次数：0
代码可运行
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>
特性 | 行内元素 | 块级元素 |
|---|---|---|
显示方式 | 与其他元素同一行 | 占据整个行 |
占用空间 | 仅占内容空间 | 占据整行空间 |
宽高控制 | 不能设置宽高 | 可以设置宽高 |
是否可以设置外边距 | 只能设置左右外边距 | 可以设置上下和左右外边距 |
换行行为 | 不会换行 | 总是换行 |
3. 结语
希望本文对你有所帮助。 往期文章：前端
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-02-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
