CSS常用样式属性（上）

最新推荐文章于 2023-10-18 15:15:00 发布

Bless___

最新推荐文章于 2023-10-18 15:15:00 发布

阅读量355

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/S_Tian/article/details/103370507

版权

display

设置元素生成的框的类型，该属性有多个值，这里只说一下常用的：
none、block、inline、inline-block

<html>
	<head>
		<meta charset="UTF-8">
		<tittle></tittle>
		<style>
			div{
				display: inline;/*将div转换为行内元素*/
			}
			span{
				display:block;/*将span转换为块级元素*/
			}
			/*如果我们既想是行内元素，又想添加块级元素添加的属性，此时我们看下面*/
			#a{
				display:inline-block;
				/*height属性在行内元素中无效，我们把它变为行内块元素*/
				height:36px;	
				border:#0000FF 1px solid;
			}
			p{
				display:none;/*将p标签内容隐藏*/
			}
		</style>
	</head>
	<body>
		<div>Hello</div>
		<span id="a">The</span>
		<span>World</span>
		<p>!</p>
	</body>
</html>

margin

设置元素的外边距。

<html>
 	<head>
  		<meta charset="UTF-8">
  		<title></title>
  		<style>
   			div{
    				border: #FF0000 1px solid;
   			}
   			a{
    				border: #8A2BE2 1px solid;
   			}
   			span{
    				border: cadetblue 1px solid;
    				margin: 12px 30px 50px 60px;/*写一个：全部|写两个：上下、左右|写三个：上、左右、下|写四个：顺序为顺时针上右下左*/
    				display: inline-block;/*若不设置成inline-block则上下不会有距离*/
   			}
  		</style>
 	</head>
 	<body>
  		<div>Hello</div>
  		<a href="http:/www.baidu.com">123</a><span>text</span href="http:/www.baidu.com"><a>456</a>
  		<div>World</div>
 	</body>
</html>

在这里插入图片描述
也可以用 margin-方向代替。

padding

设置元素的内边距。例子中是设置div的内边距，即span到div的距离

<html>
 	<head>
  		<meta charset="UTF-8">
  		<title></title>
  		<style type="text/css">
   			div{
   	 			border: #5F9EA0 1px solid;
    				padding: 15px 20px 30px 50px;/*同margin*/
   			}
   			span{
    				border: chartreuse 1px solid;
   			}
  		</style>
 	</head>
 	<body>
  		<div>
   			<span>zzu</span>
  		</div>
 	</body>
</html>

使用方法同margin
在这里插入图片描述

position

文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。
用于定义建立元素布局所用的定位类型，该属性有多个值：

static：默认值。没有定位元素会出现在正常流中。
relative：生成相对的定位标签，不会脱离文档流
fixed：生成绝对的定位标签，相对于浏览器窗口进行定位。会脱离文档流
absolute：生成绝对的定位标签，相对于标签本身第一个position非static的父元素进行定位。会脱离文档流

 <html>
 	<head>
  		<meta charset="UTF-8">
  		<title></title>
  		<style>
   			#out{
    				border: #0000FF 1px solid;
    				height: 300px;
    				width: 300px;
   			}
   			.in{
    				height: 100px;
    				width:100px;
   			}
  		</style>
 	</head>
 	<body>
  		<div id="out" style="position:relative">
   			<div class="in" style="background-color: red;position: absolute;right: 10px;bottom: 15px;"></div>
   			<!--这里的position:absolute,会使该div脱离文档流，同时这个设置的位置，是相对于他的第一个position为非static的父元素进行定位的-->
   			<div class="in" style="background-color: yellow;position: fixed;right: 10px;bottom: 15px;"></div>
   			<!--这里fixed则会让中间这个div脱离文档流，下面紧跟着的div将取代它的位置，然后该脱离文档流的div会被固定在距离浏览器窗口右边10px，底边15px处的位置，不受影响（可以实现例如返回顶部功能）-->
   			<div class="in" style="background-color: green;position: relative;right: 10px;bottom: 15px;"></div>
   			<!--这里relative不会脱离文档流，设置的位置是距离自己原来位置底边15px，右边10px-->
  		</div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 </body>
</html>

float&clear

HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。
float用来设置元素浮动方向：left，right，none(默认值，元素不浮动)

注意：

以往该属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动；
浮动元素会生成一个块级框，而不论它本身是何种元素；
如果浮动非替换元素，则要指定一个明确的宽度，否则它们会尽可能地窄；
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

clear:
用于设置元素的哪个边上不允许出现浮动元素，该属性有多个值

注意:

不要为父元素设置高度，否则无需clear
一般借助:after伪元素清除浮动
CSS1和CSS2是通过自动为设置clear属性的元素增加上外边距实现的；在CSS2.1中，会在元素外边距之上增加清除空间；而外边距本身并不改变;不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素上外边框边界刚好在该边上浮动元素的下外边距边界之下；

<html>
 	<head>
  		<meta charset="UTF-8">
  		<title></title>
  		<style>
   			#out{
    				border: #0000FF 1px solid;
   			}
  	 		.in{
    				height: 100px;
    				width:100px;
    				float: left;
   			}
   			#out:after{
    				content: '';/*追加一个空值*/
    				clear: left;/*不允许向左浮动*/
    				display: block;/*可以理解为块级元素才可以有高度*/
   			}
  		</style>
 	</head>
 	<body>
  		<div id="out">
   			<div class="in" style="background-color: red;"></div>
   			<div class="in" style="background-color: yellow;"></div>
   			<div class="in" style="background-color: green;"></div>
  		</div>
 	</body>
</html>