关闭

html的模型

19人阅读 评论(0) 收藏 举报

在网页中,元素有三种布局模型: 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 了,且默认宽度不占满父元素。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:353次
    • 积分:111
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条