元素display下可用block(块,占用全宽度)、inline-block(块的一个边框,允许其它元素同一行)、inline(同一行,需要宽足够)、none(元素和内容均消失)
margin:元素周围的空间,可为auto,另margin-top: margin-right: margin-bottom: margin-left:
或一次性设定
margin: 1px 2px 3px 4px; (top/right/bottom/left)
border:元素的边缘
padding同margin使用,为内容和边框的间隙
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
2、在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。内联元素标签a、span、em、strong都是内联元素。
3、浮动模型用float定义
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>一左一右显示
div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;}
4、层模型有三种形式:
绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)
下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化
相对于底部对齐使用bottom。
参考代码如下,box4内容在box3里面下方:
#box3{ width:200px; height:200px; position:relative; } #box4{ width:99%; position:absolute; bottom:0; left:0; /*这条css样式可以省略*/ }