CSS(二). 重要

Samcooke
180 阅读21分钟

1. CSS三大特性

层叠性

  1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。(最下边的离结构最近)
  2. 样式不冲突，不会层叠

继承性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

跟文字类的有关系的一般可以继承，比如字体，字号，颜色，行距
不可继承：边框，外边距，内边距，背景，定位，元素高，浮动等

优先级

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

特殊性（Specificity）

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 级别之间不能进位，比如 0，0，10，0 不能进位成 0，1，0，0

继承或者* 的贡献值0,0,0,0
每个元素（标签）贡献值为0,0,0,1
每个类，伪类贡献值为0,0,1,0
每个ID贡献值为0,1,0,0
每个行内样式贡献值1,0,0,0
每个!important贡献值∞ 无穷大

权重是可以叠加的

比如的例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意：

1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

  1. 继承的 权重是 0

总结优先级：

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。

权重精华题

  • 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第2题</title>
		<style type="text/css">
			#father{
				color:red;/* 继承的权重为0 */
			}
			p{
				color:blue;  
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色的？</p>
		</div>
	</body>
</html>

继承为0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第1题</title>
		<style type="text/css">
			#father{
				color:green;  /* 继承的权重为0 */
			}

			.c1 {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p id="son" class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

虽然继承权重为0，但是继承之间也有权重差异。

  • 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第1题</title>
		<style type="text/css">
			#father #son{   // 0,2,0,0
				color:blue;
			}
			#father p.c2{  // 0,1,1,1
				color:black;
			}
			div.c1 p.c2{  //首先排除，因为没有 ID 上面都有 ID
				color:red;
			}
			#father{
				color:green !important;  /* 继承的权重为0 */
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p id="son" class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>
  • 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第4题</title>
		<style type="text/css">
			div div{    // 0,0,0,2
				color:blue;
			}
			div{   // 0,0,0,1
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					试问这行字体是什么颜色的？
				</div>
			</div>
		</div>
	</body>
</html>

div{ //是指所有的div }

2. 盒模型

CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子边框

border : border-width || border-style || border-color

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线
设置内容样式属性常用属性值
上边框border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
左边框border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置border-style:上边 [右边 下边 左边];none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置border-width:上边 [右边 下边 左边];像素值
颜色综合设置border-color:上边 [右边 下边 左边];颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置border:四边宽度 四边样式 四边颜色;
border:1px 2px 3px 4px solid red;  // 这是错误的

表格的细线边框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		table {
			width: 700px;
			height: 300px;
			border: 1px solid red;
			border-collapse: collapse;  /* 合并相邻边框 */
		}
		td {
			border: 1px solid red;
		}
        </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">   // 表格空隙为0
    	<tr>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    	</tr>
    	<tr>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    	</tr>
    	<tr>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    	</tr>
    	<tr>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    	</tr>
    	<tr>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    		<td>123</td>
    	</tr>
    </table>
    </body>
</html>

圆角边框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		div:first-child {  /* 结构伪类选择器 选亲兄弟 */
			border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
		}

		div:nth-child(2) {
			/*border-radius: 100px;    取宽度和高度 一半  则会变成一个圆形 */
			border-radius: 50%;   /*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
		}

		div:nth-child(3) {
			border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
		}
		
		div:nth-child(4) {
			border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
		}
		div:nth-child(5) {
			border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
		}
		div:nth-child(6) {
			border-radius: 100px;  
			height: 100px; 
		}
		div:nth-child(7) {
			border-radius: 100px 0;  
		}	
        </style>
    </head>
    <body>
    <div> 20px</div>
    <div> 50%  或者 100px</div>
    <div>10px 40px</div>
    <div>10px 40px  80px</div>
    <div>10px 40px  80px  100px</div>
    <div>123</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
</html>

内边距

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

值的个数表达意思
1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

外边距

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

  1. 必须是块级元素。
  2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

文字居中与盒子居中、背景图片与插入图片

  1. 文字水平居中是 text-align: center
  2. 盒子水平居中 左右margin 改为 auto
text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */
  1. 插入图片 我们用的最多 比如产品展示类
  2. 背景图片我们一般用于小图标背景 或者 超大背景图片
section img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

aside {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
	
		background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
		background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
	}
  1. 插入图片占用位置。背景图片不占用位置。

实战例子：

左边的小点和文字，垂直居中，怎样测量li标签的高度呢？

看“遭遇太阳风暴”几个字，可以测量上一行的最下面，到这一行的最下面。就可以。然后垂直居中。

清除元素的默认内外边距

盒子，浏览器默认有内外边距，各个浏览器不相同。为了兼容，需清除默认内外边距。

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

小细节：行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

上面的那个外边距依然是20，下面的外边距依然存在，是10. 解决办法：避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

  1. 可以为父元素定义1像素的上边框或上内边距。
  2. 可以为父元素添加overflow:hidden。

content宽度与高度

/*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

  width >  padding  >   margin

原因：

  1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

  2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

  3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

指定盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：

  • 上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
  • 上面指定的模型和margin无关。

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

3.浮动

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

有时候我们要把块级元素放在一行排列，转为行内块元素后，==元素之间会有间隙==。这时候就可以用浮动解决这种布局。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）

浮动详细内幕特性

浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

==注意：==

  • 块级元素添加浮动之后，具有行内块的特性
  • 行内元素添加浮动之后，具有行内块的特性

行内块特性：

  1. 相邻元素在一行上
  2. 可以设置宽高，内边距，外边距
  3. 盒子大小是由内容决定的。

实战

两列左窄右宽型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		* {
			margin: 0px;
			padding: 0px;
		}
		
		.top,
		.banner,
		.main,
		.footer {
			width: 960px;
			background-color: #eee;
			border: 1px dashed #ccc;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 8px;
		}


		.top {
			height: 80px;
		}

		.banner {
			height: 150px;
		}

		.main {
			height: 500px;
		}

		.left {
			width: 360px;
			height: 500px;
			background-color: green;
			float: left;
			/*margin-right: 8px;*/  /*如果.right : width:600px;float:left; 那么 .right会掉下去，因为超出父元素的宽了*/

		}

		.right {
			width: 592px;
			height: 500px;
			background-color: skyblue;
			float: right;

		}

		.footer {
			height: 120px;
		}



	</style>
</head>
<body>

	<div class="top">top</div>
	<div class="banner">banner</div>
	<div class="main">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>

	
</body>
</html>

通栏平均分布型

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

		.top,
		.banner,
		.footer {
			margin: 0 auto;
			text-align: center;
			color: #ccc;
			border: 1px dashed #ccc;
			background-color: #eee;
		}

		.top {
			height: 80px;
			line-height: 80px;
		}

		.banner {   /* 这个优先级比上面高  */
			width: 960px;
			height: 150px;
			line-height: 150px;
			margin: 8px auto; 
			border: 1px dashed #ccc;			
			background-color: #eee;
		}

		.small {
			width: 960px;
			height: 100px;
			margin: 0 auto;
			margin-bottom: 8px;
		}

		.small ul li {
			width: 231px;
			height: 100px;
			border: 1px dashed #ccc;
			float: left;
			margin-right: 9px;
			background: skyblue;
		}

    	.small ul li:last-child{
			margin-right: 0px;
		}
		

		.footer {
			height: 200px;
			line-height: 200px;
		}


	</style>
</head>
<body>
	
	<div class="top">top</div>
	<div class="banner">banner</div>
	<div class="small">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li class="nomargin"></li>
		</ul>
	</div>
	<div class="small">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="footer">footer</div>

</body>
</html>

清除浮动

如果是普通流，父级盒子如果没有给定高度，子级会把父级盒子给撑开。但是如果子级有浮动的话，父级没有高度，子级元素不会把父级元素给撑开。有时候，我们不方便给父级元素高度。所以这时候就需要清除浮动

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

<div style=”clear:both”></div>，或则其他标签br等亦可。

不推荐。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面涉及）

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 必须给content,高度设置为0，以免对页面布局造成影响，visibility是隐藏 content里的内容。

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

.clearfix:after {
			content: ".";  /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */
			display: block;  /* 转换为块级元素 */
			height: 0; /* 高度为0 */
			visibility: hidden;  /* 隐藏盒子 */
			clear: both; /* 清除浮动 */
		}
		.clearfix {  /* ie6.7浏览器的处理方式 */
			*zoom: 1; 
			/*  * 代表ie6.7能识别的特殊符号  带有这个*的属性 只有ie6.7才执行  
			 zoom 就是ie6.7 清除浮动的方法 */
		}

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

4.定位

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性描述
top顶端偏移量，定义元素相对于其父元素上边线的距离
bottom底部偏移量，定义元素相对于其父元素下边线的距离
left左侧偏移量，定义元素相对于其父元素左边线的距离
right右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值描述
static自动定位（默认定位方式）
relative相对定位，相对于其原文档流的位置进行定位
absolute绝对定位，相对于其上一个已经定位的父元素进行定位
fixed固定定位，相对于浏览器窗口进行定位

静态定位(static)

默认的，也就是标准流的特性

<style>
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: static; /* 定位模式 -- 静态定位 */
			left: 100px;
			top: 100px;
			/* 静态定位 -- 对于边偏移无效的。 */
			/* 一般他用来 清除定位的。 一个原来有定位的盒子，不想加定位了，就写这句话 */
		}
</style>

相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

  1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
  2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

绝对定位absolute(拼爹型)

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

==注意==： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

  • 父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

  • 父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

<style>
		.father {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px;
			position: relative;  /* 父级有定位  则以父亲为基准点对齐   还可以是 absolute */
		}
		.son {
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			top: 15px;
			left: 15px; 
			/* 绝对定位 父亲没有定位， 孩子以浏览器为基准点对齐 */
		}
</style>
  • 子绝父相

子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

这就是子绝父相的由来。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

  1. 首先left 50% 父盒子的一半大小

  2. 然后走自己外边距负的一半值就可以了 margin-left。

<style>
		.father {
			width: 1000px;
			height: 400px;
			background-color: pink;
            margin: 40px auto;
            position: relative;
		}
        .son {
            width: 100px;
            height: 40px;
            background-color: purple;
            position: absolute;
            /* margin: 0 auto;  加了绝对定位的盒子，margin 左右auto 就无效了 */
            /* left: 400px; */
            left:50%;  /* left 父盒子宽度的一半 */
            margin-left: -50px; /* 左走自己宽度 的一半 */
            top: 50%;
            margin-top: -20px;
        }
</style>

固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

  1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

==注意==：固定定位的盒子一定要写宽和高 除非有内容撑开不用写

叠放次序(z-index)

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2;

注意：

  1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

  2. 如果取值相同，则根据书写顺序，后来居上。

  3. 后面数字一定不能加单位。

  4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式是否脱标占有位置是否可以使用边偏移移动位置基准
静态static不脱标，正常模式不可以正常模式
相对定位relative不脱标，占有位置可以相对自身位置移动（自恋型）
绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置（拼爹型）
固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置（认死理型）

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为行内块模式，

因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			height: 100px;
			background-color:  pink;
			/*float: left;  没给盒子的宽度 浮动的盒子有模式转换的情况 转化为 行内块  宽度位内容的宽度*/ 
			/*position: fixed;   元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式 */

		}

		span {
			background-color: purple;
			/* display: block; */
			width: 100px;
			height: 100px;
			/*float: left;  如果盒子本身就需要添加浮动后者绝对固定定位就不需要转换了 */
			position: absolute;
		}
        </style>
    </head>
    <body>
    <div> 稳住，定位不难，我们能赢</div>
    <span>我是行内元素</span>
    </body>
</html>

5.元素的显示与隐藏

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

其他

  1. F12浏览器调试的时候，如果css左边是黄色感叹号，那么是该样式格式或者单词拼错了。
<ul calss='recom'>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
<ul>

这个选择器是

.recom li h5,
.recom li p {}

而不是

.recom li h5,p {}

3.高度剩余法：有两个div，里面各有文字1和文字2，如何实现文字1和文字2的距离，可以使用高度剩余法。

avatar
文章
阅读
粉丝