写css的一些问题

1. font:14px/24px是什么意思？
前面的14px是表示字体大小，后面的24px是表示行高。

2. <div class = "top">
<div class = "wp">
<div class = "z">
<span><a href="#">设为首页</a></span>
<span><a href="#">收藏本站</a></span>
  </div>
<div class = "y">
<span>2015年5月1日</span>
<span class="r15">多云16℃/30℃</span>
</div>
</div>
</div>

   对上面代码写css的格式：
   .top a { color: #d8d8d8;
text-decoration: none;
}
.top .wp span.r15{ margin-right : 0; } //注意: .top和.wp之间有空格 ( 这行代码和下2行代码作用一样 )
.top span.r15{ margin-right : 0; } //注意: span和.r15之间没有空格
span.r15{ margin-right : 0; }

   .top a:hover{color: #f60; }

3. <p class="test1 test2">...</p>
同时给P元素两个类，中间用空格格开，这样所有test1和test2两个类的属性都会加到P元素上来。
如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

4.在一排的文字或内容布局中，如果要让内容上下垂直居中，我们只需要
设置line-height与height高度相同高度长度与html单位即可实现垂直居中；
.div1{ line-height:30px;
height:30px;}/* 高度固定上下居中 */

Span和div的区别：

<html>
  <head>
     <title>网站建设</title>
	 <style type="text/css">
		 div{background-color:yellow}
		 span{background-color:red}	
	 </style>
  </head>
  <body>
     <div>建设校园</div><br>
	 <span>美好人生</span>
  </body>
</html>

绝对定位和相对定位：

<div class="A"> 
    <div class="B"> 我是b </div> 
</div>

*{ padding:0; margin:0;} 
.A{ position:relative; width:400px; height:400px; border:1px solid #000;} 
.B{ position:absolute; right:0px; bottom:0px}

这两个是配合使用的，A定义了relative后，B就会相对于A进行移动。

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位

在position布局中，父元素设置为relative，子元素设置为absolute，此时子元素可以相对父元素定位。

position定位是以最近一层有定位属性的元素来做参照的，例如祖父-父亲-儿子，三个都有position属性，祖父以上没有定位属性，那么祖父是以整个body为的左上角为（0,0）改变定位，父亲以祖父元素的左上为（0,0），以此类推，儿子是以父亲的左上角为（0，0）定位。这样解释明白了吗？所以你不管套多少个子元素或者子元素的子元素，只要上一层有定位，子元素就能直接用绝对定位，以上一层元素的左上角为（0,0）进行定位。

绝对定位和相对定位 ：

这两个是配合使用的，A定义了relative后，B就会相对于A进行移动。

猜你喜欢

绝对定位和相对定位：