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