html的模型

原创 2016年08月31日 16:50:52

在网页中,元素有三种布局模型: 1、流动模型(Flow) 2、浮动模型 (Float) 3、层模型(Layer)

 Flow:块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布.  

在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。 

div、p、table、img 等元素都可以被定义为浮动,float:left; 


层模型有三种形式:  1、绝对定位(position: absolute)  2、相对定位(position: relative)  3、固定定位(position: fixed)

1.position:absolute;     left:100px;     top:50px;

向右移动100px,向下移动50px。

2.position:relative;     left:100px;     top:50px;

相对以前的位置,向右移动100px,向下移动50px。

3.position:fixed;     left:100px;     top:50px;

因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

组合使用:

1、参照定位的元素必须是相对定位元素的前辈元素:  <div id="box1"><!--参照定位的元素-->     <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div> 

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。 

 2、参照定位的元素必须加入position:relative;  #box1{     width:200px;     height:200px;     position:relative;         } 

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 

 #box2{     position:absolute;     top:20px;     left:30px;          } 这样box2就可以相对于父元素box1定位了(注意参照物就不是浏览器了,而可以自由设置了)。


当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

body{     font-style:italic;     font-variant:small-caps;      font-weight:bold;      font-size:12px;      line-height:1.5em;      font-family:"宋体",sans-serif; }

缩写:body{     font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif; }

颜色:color:red;

color:rgb(133,45,200);

color:rgb(20%,33%,25%);

color:#00ffff;

定宽居中显示:

width:200px;/*定宽*/     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

不定宽居中显示:

加入 table 标签 设置 

display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置

 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

1.table{     border:1px solid;     margin:0 auto; }

2.改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果

3.通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。

垂直居中:

height:100px;     line-height:100px;父元素

height:500px;vertical-align 为 middle;css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。

1. position : absolute    2. float : left 或 float:right

元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

DOM文档对象模型通过id来访问HTML元素

Document Object Model文档对象模型 DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点: 元素节点:、 文本节点:被包含在原始节点内部 ...

Html5绘制小型太阳系模型

  • 2016年04月09日 11:04
  • 143KB
  • 下载

HTML文档的模糊检索模型

  • 2015年09月22日 16:45
  • 712KB
  • 下载

html 盒子模型基础(外边距的重叠问题详解)(三)

1.外边距的重叠问题 .box1{ width: 100px; height: 100px; background-color:...

html静态网站模型,仅供参考

  • 2010年04月18日 16:09
  • 1.56MB
  • 下载

html5粒子背景模型

  • 2016年11月09日 16:27
  • 35KB
  • 下载

你真的了解jQuery的ready函数吗?当 DOM(文档对象模型) 已经加载,就执行ready里的代码。DOM何时加载完毕?jQuery对html局部操作,DOM为什么不重新加载?

你真的了解jQuery的ready函数吗? 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。 那么什么时候DOM加载完成呢? ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html的模型
举报原因:
原因补充:

(最多只允许输入30个字)