css3常用属性详细介绍属性的用法

Wulixi1002

于 2020-09-24 20:45:16 发布

阅读量365

点赞数 1

分类专栏： HTML5+css3 文章标签： css

本文链接：https://blog.csdn.net/wulixi1002/article/details/108782997

版权

HTML5+css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.背景

	background-color:背景颜色
	background-image:背景图片  默认平铺
	background-repeat:(repeat, no-repeat repeat-x repeat-y)
				repeat: 默认是重复
				no-repeat: 不重复
				repeat-x: 水平方向重复图片
				repeat-y: 垂直方向重复图片
	background-attachment: 加滚动条
				fixed: (了解) 当页面的其余部分滚动时，背景图像不会移动。
				local:  内容滚动时,背景图片也跟着一起滚动
				scroll: 内容滚动时,背景图片不动
	background-position: (left   center  right   bottom   top  xy值  )
					x:  水平方向偏移值
					y:  垂直方向偏移值
	background:
			/*background-color: pink;
			background-image: url(yangmi1.jpg);
			background-repeat: no-repeat;
			background-position: -151px -173px;*/
			简写形式
			background: pink url(yangmi1.jpg) no-repeat -151px -173px;

#box{
				width: 1000px;
				height: 500px;
				background-color: greenyellow;
				background-image: url(img/timg.jpg);
				border: 1px solid black;
				background-repeat: no-repeat; /*不重复背景图像
									repeat-x   图像只重复水平方向
									repeat-y   图像只重复垂直方向
									repeat     默认，图像会想水平和垂直方向铺满*/
				background-attachment:scroll;  /*滚动时背景图片不动
									  local  滚动时背景图片跟着移动
									  flxed  页面的其他部分滚动时，图片不会移动
							*/
				background-position: center;/* 图片显示在中央
									当设置一个方向时，另一个方向为center	*/
				
			}

2.列表

	list-style: 默认li前边有实心原点, none(没有原点)
	list-style-image: url(图片路径)
	list-style-position: inside(小点在li 的里边)  outside(小点在li的外边,默认属性)
	list-style-type: ul中小点的类型:circle decimal square

3.布局

	float: left,   right
		left: 左漂移,相对原来的层面浮起来,后边的内容会自动补齐: 
		right: 右漂移.相对原来的层面浮起来,后边的内容会自动补齐
	clear:(left right both)
		在设置其他元素,如果有浮动,这时浮动元素会把下面的元素内容给覆盖,这时需要清除浮动,然后在浮动元素的下面来布局.
		一般清除浮动: clear: both
	display: (none inline-block block ,inline)
		none: 标签消失,并且位置也不存在了,其他的元素向上补齐
		inline-block: 转换为行内块元素
		block: 转换为块元素
		inline: 转换为行内元素
	visibility:(visible, hidden)
		hidden: 标签隐藏了,但是位置还在..  [注]一般跟display:none 作比较
		visible: 默认属性,标签和位置都是可见
	overflow:(visible hidden scroll auto)
		hidden: 隐藏超出div框的内容部分
		scroll: 让超出的内容设置滚动条
		auto: 自动  如果内容没有超出div,没有滚动条,如果内容超出div,这时自动增加滚动条
		visible: 默认属性
		overflow-x:使用属性时,设置的值跟上边完全一样,指水平方向
		overflow-y:使用属性时,设置的值跟上边完全一样,指垂直方向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			#box{
				width: 800px;
				height: 800px;
				background: red;
			}
			#box1{
				width: 200px;
				height: 200px;
				background: yellow;
				float: left;
				overflow: scroll;   /*设置滚动条
							auto    自动设置滚动条*/
			}
			#box2{
				width: 200px;
				height: 200px;
				background: blue;
				float: left;
				visibility: hidden;		/*隐藏，位置存在
							visiable    正常显示*/
			}
			#box3{
				width: 200px;
				height: 200px;
				background: green;
				float: left;
				/*display: none;    隐藏*/
				/*clear: both;     清除浮动*/	
			}
			#box4{
				width: 200px;
				height: 200px;
				background: pink;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1">这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
				这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
				这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</div>
			<div id="box2"></div>
			<div id="box3"></div>
			<div id="box4"></div>
		</div>
	</body>
</html>

4.定位

	position:(relative(相对), absolute(绝对), fixed(固定) static)子元素为绝对定位.
		fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位  设置top right bottom left时,是相对于整个窗口(html/body)而言
		relative:	设置相对位置,相对自己原来的位置,进行移动	不会脱离文档流
		absolute: 绝对定位,脱离文档流  要设置绝对位置,首先要有一个相对位置,再来设置绝对位置
	z-index: 只有在relative和absolute属性中才会有的效果,  值设置的越大就显示谁的效果(优先级越高)
	[注]只要是relative absolute  fixed 时,我们就可以设置下边的属性
	top:
	right:
	bottom:
	left:

		<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 500px;
				height: 500px;
				background: greenyellow;
				margin: 50px 0 0 50px;
				position: relative;
			}
			.box1{
				width: 100px;
				height: 100px;
				background: deepskyblue;
				position:fixed;  /*相对浏览器进行定位*/
				top:250px ;
				left: 250px;
				/*z-index: -1;*/
			}
			.box2{
				width: 100px;
				height: 100px;
				background: red;
				/*position: relative;	*/			/*相对与自己进行定位,不会脱离文档流*/
				bottom: 100px;
				right: 100px;
			}
			.box3{
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;	/*绝对定位，脱离文档流。要设置绝对定位，先设置一个相对位置*/
				bottom: 150px;
				right: 150px;
				z-index: 3;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

5.边框

	border-color: 边框的颜色
	border-width: 宽度
	border-style: (dotted solid dashed double)
			solid: 实线
			dotted: 点线
			dashed: 虚线
			double: 双线
	border-radius: 圆角半径
	box-shadow:  box-shadow: 1px 1px 20px green;

.box{
			width: 500px;
			height: 500px;
			border-width: 1px;
			/*border-style:solid;   边框为实线
			 * 				dotted  点线
			 * 				dashed  虚线
			 * 				double  双实线  */
			border-radius: 50%;
			background: green;
			position: fixed;
			top: 25%;
			left: 25%;
			box-shadow: 10px 10px 20px 5px lawngreen;
		}

6.盒子模型:

7.内外边距

	padding:上 右 下 左
	padding-top:
	padding-right:
	padding-bottom:
	padding-left:
	
	
	
	margin:上 右 下 左
	margin:10px 20px 30px 40px;
	margin:10px 20px;
	margin:10px 5px 20px;
	margin:0 auto;
	margin-top:
	margin-right:
	margin-bottom:
	margin-left:

.box{
			width: 200px;
			height: 200px;
			border: 3px solid  deepskyblue;
			margin: 50px ;
			padding: 100px;
			/*margin 外边距      padding  内边距
			 * 一个值   上右下左
			 * 两个值    上下     左右
			 * 三个值     上      左右      下
			 * 四个值    上   右    下    左    */
		}

8.单行文本溢出

			white-space:nowrap;
			overflow:hidden;指内容溢出该元素的框，进行隐藏
			text-overflow:ellipsis;当文本溢出包含元素时，使用省略号显示
			display:block;
			float:left;

#big{
				width: 400px;
				height: 120px;
				background: gray;
				text-indent: 2em;	/*首行缩进2个字符间距*/
				text-align: center;		/*文字居中显示*/
				overflow: hidden;		/*溢出隐藏*/
				text-overflow:ellipsis;  /*溢出显示省略号*/
				white-space:nowrap;    /*强制不换行*/
				/*文字溢出显示号的3个属性缺一不可：overflow:hidden;text-overflow:elipsis;white-space:nowrap;*/