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基础之样式布局模型

CSS样式速查手册 CSS格式化排版字体body{font-family:"微软雅黑";}字号、颜色body{font-size:12px;}/*字号、字体大小*/ body{color:red;}/...
  • q269399361
  • q269399361
  • 2016年12月20日 15:54
  • 789

【Html】层模型--相对定位

如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程...
  • happyhaojie
  • happyhaojie
  • 2015年12月10日 04:52
  • 659

【Html】流动模型(一)

先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征: 第一点,块...
  • happyhaojie
  • happyhaojie
  • 2015年12月10日 04:24
  • 412

HTML+CSS之CSS盒模型 (8)

本文学习CSS盒模型。
  • delphiwcdj
  • delphiwcdj
  • 2015年03月14日 00:06
  • 6662

CSS框模型(Box Model)初学理解

HTML中所有的元素都可以是一个框,css的框模型我觉得和table标签单元格挺像的,还是要拿这个图说明一下。 一个HTML页面中可以有很多元素,有很多div。 我这里的框暂时理解为一个装电视机啊...
  • lj19900605
  • lj19900605
  • 2016年02月27日 21:38
  • 613

HTML5 绘制简单的飞机模型

一.绘制一架模型飞机向上飞       1.用fillText方法绘制简单的模型飞机        2.用到定时器setInterval 目的是绘制出来的模型飞机能向上移动       3.用到键盘事...
  • u011107187
  • u011107187
  • 2013年07月21日 18:00
  • 742

HTML5基础加强css样式篇(css属性:怪异盒模型解析)(四十六)

1.怪异盒模型和border有关: 设置border宽度可以影响其他元素的布局:但是在IE5及以下里面只是影响其子元素; 2.可以同时设置 box-sizing属性来使用这一特性,是其改变bord...
  • u010853130
  • u010853130
  • 2017年04月07日 17:21
  • 658

【Html】层模型--固定定位

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的...
  • happyhaojie
  • happyhaojie
  • 2015年12月10日 04:57
  • 808

访问HTML中元素的方法

1、根据ID访问HTML元素 访问html元素 function getContent(){ ale...
  • u012868077
  • u012868077
  • 2016年06月06日 00:14
  • 619

数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果,例如 3D 电...
  • u013161495
  • u013161495
  • 2016年09月30日 09:44
  • 1820
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html的模型
举报原因:
原因补充:

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