CSS学习系列十一:板式

  板式是在css中排版中使用的比较多的一种样式,只要熟练的掌握以下样式之后才能在css的排版细节上面如鱼的水

1.定位

 css中的网格布局,使得都是块形式.而块出现在网页中的那个位子,所采用的就是定位的方式.定位(positioning)就是允许网页开发者精确的定义元素出现的相对位置 ，这个相对位子可以是相对父级元素,另一个元素或者浏览器窗口.

 1.1定位的模式

 在css中可以使用position属性来设置定位的模块,position属性的语法代码如下:

postion: static  ||   relative  ||  absolute  || fixed  ||  inhrit

1.2偏移

在3种定位模式中(relative absolute  fixed )都需要使用偏移属性指定定位的位置,在css偏移量属性:left right top bottom 分别代表各个方向的偏移量、left: 长度 | 百分比  || auto  || inherit

1.3综合使用

定位有4种不同的模式

1.静态定位

静态定位

静态定位模式是定位模式中的默认定位模式,在该模式,对定位没有任何要求,完全由浏览器自动生成,对于块级元素来说，通常是生成一个矩形框或则<div> 对于内联元素来说,则正常的流生成

注意:块级元素是指引起换行的元素 如<div> p <hr< 内联是不能引起换行的元素如<br> sup

将元素position属性值设定为static可以设置元素的静态定位,由于静态定位模式并没有对元素的定位方面指出任何要求,因此所有的偏移属性在该模式下是不起作用.

 


  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.  
  9.     
  10.  div.a {position: static;background-color: black;color: white;left:100px;top: 100px;right: 100px;bottom: 200px;} 
  11.  div.b{ position: static;background-color: red; color: white; width: 200px;} 
  12.  
  13.     </style> 
  14.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  15.    </head> 
  16.    <body> 
  17.        
  18.        <div class="a">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  19. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  20. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  21. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  22. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  23.        <div class="b">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  24. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  25. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  26. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  27. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  28.    </body> 
  29. </html> 
 
  
2.绝度定位
 
  
 绝对定位,是相对父级的元素的4个边框而言的,通常可以把整个网页(或则body)看成一长纸,而绝对定位就是将块放在网页的某个位置.至于具体放在哪个位子由偏移量来决定.4个用的最多的是left right top这3个属性对于绝对定位 3个元素就可以确定块的摆放位置了
 
  
3.想对定位
 
  
4.相对浏览器定位
 
  
将元素的postion属性值设为fixed可以设置元素的相对浏览器的定位.
 
  
一般用于浏览器导航
 
  
5.层叠次序
 
  
在为对象进行定位的时候,不可避免的会产生层重叠的情况,通常情况下,在源代码出现对象层叠在先出现的对象上面
 
  
在css引用了一个名为Z-index的属性
 
  
5.1普通的层叠次序
 
  
如果说left和right属性控制对象的x坐标,top和bottom属性控制对象y坐标,那么z-index属性控制的就是对象的z坐标
 
  
z-index:auto || 属性 || inherit
 
  
 
 
  

  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.  
  9.     
  10.  div.a {position: absolute;background-color: blue; width: 200px;color:white;left:50px;top: 50px;z-index: 1;} 
  11.  div.b{ position: absolute;background-color: red; color: white; width: 300px;left: 30px;top: 30px;z-index: 3;} 
  12.  div.c {position: absolute;background-color: black;color: white;left: 0px;top: 0px;z-index: 2;} 
  13.  
  14.     </style> 
  15.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  16.    </head> 
  17.    <body> 
  18.        
  19.        <div class="a">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  20. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  21. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  22. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  23. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  24.        <div class="b">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  25. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  26. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  27. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  28. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  29.    </body> 
  30.     <div class="c">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  31. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  32. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  33. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  34. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  35.    </body> 
  36. </html> 
 
  
7.浮动float
 
  
当初一个网页里面文档时从上到下，从左到右,对于内联元素来说, 创建一个元素之后,会在其右边接着创建其他元素,对于块级元素而言,创建一个元素后,就会在其下方创建其他元素css的浮动让某些元素脱离这种文档流的方式
 
  
foat   vs   定位 定位
 
  
 浮动和定位是二个不同的概念,他们之间的区别有二点:
 
  
一：元素的定位可以将元素看成是一个一个的层,定位是可以将层放在网页的任意一个地方的,而层是一个独立的单位,无论将一个层放在那个位置,都不会影响其他元素原来的位置,至多会遮盖其他元素的显示,这是一种立体的表示.不同的层都处在不同的平面之上.二浮动只是让某些元素从文档流里面脱离出来但这个浮动的元素还是在自己的平面(或则说是自己的层)上出现,并没有跑到另外一个层,另外一个平面上去
 
  
二：当一个对象是浮动的时候,这个对象的所有属性会随之一起浮动,例如图片的边框大小为10px;纳闷该图片的10px也会随着图片一起浮动
 
  
7.2浮动的方式
 
  
在css中元素浮动属性为float
 
  
7.3如果一个元素设置为浮动以后没有特别提示元素之后的所有内容都是围绕该元素流动,很明显,
 
  
 
 
  

  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.  
  9.  .a{float: left;margin: 10px;} 
  10.  .b{clear: left;} 
  11.  
  12.     </style> 
  13.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  14.    </head> 
  15.    <body> 
  16.        <h1><<武林外传>>搞笑对白</h1> 
  17.        <img src="1.jpg" class="a" alt=""> 
  18.        大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  19. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  20. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  21. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  22. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢 
  23.        <div class="b">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  24. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  25. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  26. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  27. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  28.        
  29.    </body> 
  30. </html> 
 
  
7.4溢出
 
  
当一个元素的大小无法容纳内容时,就会产生溢出的情况,
 
  
7.4.1溢出
 
  
在css中可以通过overflow属性来处理溢出的情况,overflow属性的语法代码如下：
 
  
overflow:visible  || hidden  || srcoll  || inherit
 
  
 
 
  

  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式</title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.  
  9.     div.a {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:10px;top: 10px;overflow: visible;} 
  10.     div.b {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:300px;top: 10px;overflow: hidden;} 
  11.     div.c {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:10px;top: 200px;overflow: scroll;} 
  12.     div.d {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:300px;top:200px;overflow: auto;} 
  13.     </style> 
  14.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  15.    </head> 
  16.    <body> 
  17.        <h1><<武林外传>>搞笑对白</h1> 
  18.        <div class="a"> 
  19.        大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  20. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  21. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  22. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  23. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢 
  24.        </div> 
  25.        <div class="b">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  26. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  27. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  28. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  29. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  30.         <div class="c">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  31. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  32. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  33. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  34. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  35.         <div class="d">大三了，考研了，工作了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
  36. 不管平时多忙多累，一有空做到电脑前，还是习惯性地先打开RN，习惯性地去综合区潜水。 
  37. 这款游戏，这个论坛，真的已经在不觉间融入自己的生命里了。 
  38. 十大经典看过不知多少遍了，今天看这个视频，尤其是最后那段话，还是流泪了。 
  39. 此中有真意，欲辨已忘言……不知论坛上还有多少和我一样心情的弟兄呢</div> 
  40.        
  41.    </body> 
  42. </html>