PHP学习笔记（5）CSS2

1. ！impotant 属性

什么是important

他主要是用来提升属性的权重。其属性的权重无穷大!

1.2语法格式

PS：提升的属性的权重不是选择器的优先级。

！important不能提升继承来的权重

1.3关于！important使用的案例

2 一个标签可以携带多个类名

这样做了以后，让第三个div拥有了前两个div的属性，可以减少代码

2.1关于多个类名之间的样式冲突

如果说多个类名之间的样式冲突的时候那么就要观察CSS代码的书写顺序，谁在后听谁的。

3背景样式属性

雪碧图*

还可以使用background简写属性，不需要顺序但是要注意要么就分别写要么就用简写属性

4*浮动

浮动案例：

效果如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body,ul{
		margin: 0px;
		padding: 0px;
	}
	li{
		list-style-type: none;		
	}
	a{
		text-decoration: none;
		color: #666;		
	}
	a:hover{
		text-decoration: underline;
		color: #000;
		font-weight: bold;
	}
	.box{
		width: 	100%;
		height: 31px;
		background-color: #000;
	}
	.inner_c{
		width: 80%;
		margin-left: auto;
		margin-right: auto;	
	}
    li {
		float: left;
		width: 10%;
		height: 31px;
		line-height: 31px;
		text-align: center;
		background: url(../1.jpeg);
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="inner_c">
			<ul>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
				<li><a href="javascript:void(0)">网站</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

4.2清除浮动

清除浮动的三个方法：

1.给浮动元素的父元素设置一个固定的高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.box{
		width: 600px;
		height: 100px;/*给父元素加上高度*/
		border: 1px solid #000;
		margin-right: auto;
		margin-left: auto;
	}
	.box .div1{
		width: 100px;
		height: 100px;
		background-color: #f00;
		float: right;/*向右边浮动*/
	}
	.box .div2{
		width: 100px;
		height: 100px;
		background-color: #0f0;
		float: left;
	}
	.box .div3{
		width: 100px;
		height: 100px;
		background-color: #00f;
		float: right;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
	<h2>猜猜我在那里</h2>
</body>
</html>

2 使用clear属性（多用于div）

	.clearFloat{/*清除浮动*/
		clear: both;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<!-- 通常我们会在这个浮动元素的最后面来使用clear属性来清除浮动 -->
		<div class="clearFloat"></div>
	</div>	
	<h2>猜猜我在那里</h2>
</body>
</html>

3.使用overflow属性（多用于列表）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul,body{
		margin: 0px;
		padding: 0px;
	}
	li{
		list-style-type: none;	

	}
	.box{
		width: 1000px;
		height: 40px;
		margin-left: auto;
		margin-right: auto;
		border: 1px solid #000;
	}
	.box ul li{
		float: left;
		width: 100px;
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
	.box ul{
		/*原本的含义是将溢出的部分隐藏*/
		overflow: hidden;
	}
	</style>
</head>
<body>
	<div class="box">
	<ul>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
		<li>网站</li>
	</ul>					
	</div>
	
</body>
</html>

5盒子模型

6 padding属性(内填充)

padding简写属性使用顺序（顺时针）

padding:top right bottom left;

7margin属性（外边距）

margin简写属性使用:

margin: 100px auto;/*多用于盒子居中*/

7.2margin合并现象

1.在标准文档流垂直方向的元素的margin值不会叠加它会取最大的值

2.水平方向的margin不会叠加

3.浮动元素垂直方向的盒子它是没有margin合并现象

7.3 margin的居中

7.4 margin的塌陷现象

8 html标签的默认样式

PHP学习笔记（5）CSS2

猜你喜欢