CSS学习

最新推荐文章于 2023-02-10 16:20:34 发布

测绘真的强

最新推荐文章于 2023-02-10 16:20:34 发布

阅读量155

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_34158448/article/details/80796472

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS用于控制文本内容的样式，这里首先是说明一下各种标签的分类。

块级元素：(display: block)

1、支持宽度和高度的设置，如果不设置，则该元素继承父级元素的特性。高度可以由内容撑开，如果溢出，不影响其他元素显示。

2、换行显示，独占一行。

3、支持margin，padding和auto

行内元素：(display: inline)

1、横排显示，只会占据自己的位置。

2、不支持宽度和高度设置，没有内容时，不占据位置。但是宽度和高度可以由内容撑开。

3、只支持margin左右设置，上下无效，不支持auto。

4、解析空格，在同一父级元素里的两个行内元素之间会有空格产生，写代码不可能连在一起写，解决方法：设置父级元素的字体为0，再重新设置行内元素的字体。

5、基线对齐，这个性质就是用来调整对齐方式的。

行内块元素：(display: inline-block)

1、横排显示，只占据自己的位置。

2、支持宽度和高度设置，宽度和高度可以由内容撑开。

3、支持margin，不支持auto。

4、支持padding。

5、中间有解析空格。

6、基线对齐。

嵌套规则：注意P，H标签不能嵌套块级元素，还是要根据自身的作用来。行内元素不能套块级元素。

下面来做一个三角形：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>做三角形</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-bottom-color: red; 
			border-top: 0;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

效果如图：