css合理布局实体模型全面掌握

日期:2021-03-03 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

css是网页页面的外衣,好不太好看全凭css款式,而合理布局是css中较为关键的一部分,下面来剖析1下普遍的几种合理布局。

流动性实体模型

流动性实体模型是网页页面合理布局的默认设置方式,也是最多见的合理布局方式,他有两个特性:

1.块状元素都在所处包括元素内自上而下按序竖直拓宽遍布。普遍的块状元素有:div,p,ul,ol,h1~h6,address等

2.内联元素都会在所处包括元素内从左到右水均分布显示信息。普遍的内联元素有:a,span,img,input,textarea等

波动实体模型

波动实体模型是挑唆用css将块状元素界定为波动。用法:float:left/right/none

层实体模型

css界定了1组精准定位特性(position)适用合理布局实体模型。

1.静态数据精准定位    设定position:static

无独特精准定位,目标遵照一切正常文本文档流。top,right,bottom,left等特性不容易被运用

2.肯定精准定位    设定position:absolute

将元素从文本文档流中拖出来,随后应用top,right,bottom,left等特性相对其最贴近的1个具备精准定位特性的父包括快开展肯定精准定位。假如不存在这样的特性块,则相对body元素,即相对访问器对话框。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="utf⑻" />  
  5. <title>Css3学习培训</title>  
  6. <style>  
  7. .test{position:absolute;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}   
  8. </style>  
  9. </head>  
  10. <body style="background:#ccc;">  
  11.     <div style="background:#494444; position:relative;width:300px;height:300px;">  
  12. <div class="test">我是肯定精准定位,在这里相对父级div精准定位</div>  
  13. </div>  
  14. </body>  
  15. </html>  

3.相对性精准定位    设定position:relative

目标遵照一切正常文本文档流,但可根据top,right,bottom,left等特性进1步明确部位,这也是和static特性不一样的地区。

4.固定不动精准定位    设定position:fixed

固定不动精准定位和肯定精准定位的不一样在于fixed参考精准定位的元素自始至终是主视图自身(显示屏内的网页页面对话框),而absolute参考的是有精准定位特性的父级元素。以下编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="utf⑻" />  
  5. <title>Css3学习培训</title>  
  6. <style>  
  7. .test{position:fixed;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}   
  8. </style>  
  9. </head>  
  10. <body style="background:#ccc;">  
  11.     <div style="background:#494444; width:300px;height:300px;position:relative;">  
  12. <div class="test">我是固定不动精准定位,在这里相对body精准定位</div>  
  13. </div>  
  14. </body>  
  15. </html>  

下节讨论精准定位和合理布局的别的特性:z-index,display,float,clear,visibility,clip,overflow,overflow-x,overflow-y

以上这篇css合理布局实体模型全面掌握便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/wangxiaosan/archive/2016/07/19/5683619.html