首页 > 其他分享> > CSS样式常见样式

CSS样式常见样式

2022-06-01 18:01:07 作者：互联网

1、高度和宽度

默认情况下，高度和宽度无法应用在行内标签上。

默认情况下，块级标签虽然设置的宽度，右边空白区域也不许被占用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块级标签-->
  <div style="height:100px;width:200px;background-color:red">中国移动</div>
  <div style="height:100px;width:200px;background-color:green">中国联通</div>
<!--行内标签-->
  <span style="height:100px;width:200px;background-color:pink">中国联通</span>
<!--行内标签转换成块级标签-->
    <span style="display:block;height:100px;width:200px;background-color:pink">中国联通</span>
</body>
</html>

2、行内和块级标签

1）块级标签：

2）行内标签：无法应用高度和宽度

转换前代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块级标签-->
<div>块级标签</div>
<!--行内标签-->
<span>行内标签</span>
<div style="display:inline-block;height: 100px;">行内标签有块级标签的特点</div>
</body>
</html>

转换后代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块级标签转换为行内标签-->
<div style="display:inline;">块级标签</div>
<!--行内标签转换为块级标签-->
<span style="display:block;">行内标签</span>
<div style="display:inline-block;height: 100px;background-color:red;">行内标签有块级标签的特点</div>
</body>
</html>

标签：块级,行内,Title,样式,标签,常见,中国联通,宽度,CSS
来源： https://www.cnblogs.com/liunaixu/p/16335160.html