CSS学习系列十一:板式

时间 2020-05-20

标签 css 学习系列十一板式栏目 CSS 繁體版

原文原文链接

CSS学习系列十一:板式css

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

1.定位浏览器

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

1.1定位的模式布局

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

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

1.2偏移ui

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

1.3综合使用视频

定位有4种不一样的模式

1.静态定位

静态定位

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

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

将元素position属性值设定为static能够设置元素的静态定位,因为静态定位模式并无对元素的定位方面指出任何要求,所以全部的偏移属性在该模式下是不起做用.

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本样式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
       
   
   
   
    div.a {position: static;background-color: black;color: white;left:100px;top: 100px;right: 100px;bottom: 200px;} 
   
   
   
    div.b{ position: static;background-color: red; color: white; width: 200px;} 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          
   
   
   
          <div class="a">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
      </body> 
   
   
   
   </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

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本样式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
       
   
   
   
    div.a {position: absolute;background-color: blue; width: 200px;color:white;left:50px;top: 50px;z-index: 1;} 
   
   
   
    div.b{ position: absolute;background-color: red; color: white; width: 300px;left: 30px;top: 30px;z-index: 3;} 
   
   
   
    div.c {position: absolute;background-color: black;color: white;left: 0px;top: 0px;z-index: 2;} 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          
   
   
   
          <div class="a">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
      </body> 
   
   
   
       <div class="c">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
      </body> 
   
   
   
   </html>

7.浮动float

当初一个网页里面文档时从上到下，从左到右,对于内联元素来讲, 建立一个元素以后,会在其右边接着建立其余元素,对于块级元素而言,建立一个元素后,就会在其下方建立其余元素css的浮动让某些元素脱离这种文档流的方式

foat vs 定位定位

浮动和定位是二个不一样的概念,他们之间的区别有二点:

一：元素的定位能够将元素当作是一个一个的层,定位是能够将层放在网页的任意一个地方的,而层是一个独立的单位,不管将一个层放在那个位置,都不会影响其余元素原来的位置,至多会遮盖其余元素的显示,这是一种立体的表示.不一样的层都处在不一样的平面之上.二浮动只是让某些元素从文档流里面脱离出来但这个浮动的元素仍是在本身的平面(或则说是本身的层)上出现,并无跑到另一个层,另一个平面上去

二：当一个对象是浮动的时候,这个对象的全部属性会随之一块儿浮动,例如图片的边框大小为10px;纳闷该图片的10px也会随着图片一块儿浮动

7.2浮动的方式

在css中元素浮动属性为float

7.3若是一个元素设置为浮动之后没有特别提示元素以后的全部内容都是围绕该元素流动,很明显,

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本样式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
    .a{float: left;margin: 10px;} 
   
   
   
    .b{clear: left;} 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          <h1><<武林外传>>搞笑对白</h1> 
   
   
   
          <img src="1.jpg" class="a" alt=""> 
   
   
   
          大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
          
   
   
   
      </body> 
   
   
   
   </html>

7.4溢出

当一个元素的大小没法容纳内容时,就会产生溢出的状况,

7.4.1溢出

在css中能够经过overflow属性来处理溢出的状况,overflow属性的语法代码以下：

overflow:visible || hidden || srcoll || inherit

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本样式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
       div.a {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:10px;top: 10px;overflow: visible;} 
   
   
   
       div.b {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:300px;top: 10px;overflow: hidden;} 
   
   
   
       div.c {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:10px;top: 200px;overflow: scroll;} 
   
   
   
       div.d {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:300px;top:200px;overflow: auto;} 
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          <h1><<武林外传>>搞笑对白</h1> 
   
   
   
          <div class="a"> 
   
   
   
          大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢 
   
   
   
          </div> 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
           <div class="c">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
           <div class="d">大三了，考研了，工做了，考博了……转眼七年了，这款游戏我玩了有七年多了。 
   
   
   
   无论平时多忙多累，一有空作到电脑前，仍是习惯性地先打开RN，习惯性地去综合区潜水。 
   
   
   
   这款游戏，这个论坛，真的已经在不觉间融入本身的生命里了。 
   
   
   
   十大经典看过不知多少遍了，今天看这个视频，尤为是最后那段话，仍是流泪了。 
   
   
   
   此中有真意，欲辨已忘言……不知论坛上还有多少和我同样心情的弟兄呢</div> 
   
   
   
          
   
   
   
      </body> 
   
   
   
   </html>