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 了,且默认宽度不占满父元素。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML入门学习笔记--CSS盒子模型(6)

42-边框属性1.什么边框?边框就是环绕在标签宽度和高度周围的线条 2.边框属性的格式2.1连写(同时设置四条边的边框)border: 边框的宽度 边框的样式 边框的颜色; 快捷键: bd+ bor...

HTML解释器和DOM模型

DOM模型DOM树DOM结构构成的基本要素为”节点”,而文档的DOM结构就是有层次化的节点组成,在DOM模型中,节点的概念很宽泛,整个文档(Document)就是一个节点,称为文档节点,HTML中的标...

HTML文档对象模型

  • 2010-02-24 10:35
  • 188KB
  • 下载

Html5绘制小型太阳系模型

  • 2016-04-09 11:04
  • 142KB
  • 下载

Html5斜45度地图+3D模型ARPG系列教程(5)-- 地图编辑器

目录: 1.寻路准备工作 2.地图编辑器功能及使用方法 3.工具源码下载 1.寻路准备工作 通过前面几节的教程,我们现在有了主角,有了地图,并且主角能在地图上“随意”移动,为了让主角移动的不...

HTML文档的模糊检索模型

  • 2015-09-22 16:45
  • 712KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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