CSS布局模型
来源:互联网 发布:广州疯狂java培训好吗 编辑:程序博客网 时间:2024/06/05 15:24
最基本的布局模型盒模型
HTML标签元素分为三种1.块状元素 独占一行;可设置高、宽、行高、底边距;宽度默认父元素的100%。2.内联元素 同在一行;不可设置;宽度为包含<p><img>宽度。3.内联块状元素(`display:inline-block`) 同在一行;可设置。
盒子的实际宽度为(10+1+20)*2+200px。而在css中定义的是填充以里的内容范围(蓝色区域)。
以盒模型为基础的三种布局模型
1.FLOW(流动模型)
块状元素自上而下流动分布,一块占据一行; 内联元素从左到右分布,持续一行。
2.FLOAT(浮动模型)
div{ width:200px; height:200px; border:2px red solid; float:left; }<div id="div1"></div><div id="div2"></div>
两个div会并排显示左对齐。
div{ width:200px; height:200px; border:2px red solid;}#div1{float:left;}#div2{float:right;}
两块一左一右并排对齐。
3.LAYER(层模型)
a 绝对定位(position: absolute)*position:absolute(表示绝对定位)将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。*b 相对定位(position: relative)*设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。*c 固定定位(position: fixed)*fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。*
0 0
- CSS的布局模型
- css基础-布局模型
- CSS布局模型
- CSS 布局模型
- CSS布局模型
- CSS布局模型
- 7.31css布局模型
- CSS布局模型
- CSS布局模型
- 【Html】css布局模型
- css布局模型
- CSS-布局模型
- CSS 布局模型
- CSS布局模型
- CSS布局模型
- CSS布局模型
- CSS布局模型
- css布局模型
- 魔王语言
- 【机房重构】无法生成解决方案
- qgis 二次开发,重写满足自己功能的程序
- Oracle分区总结
- flume-ng负载均衡load-balance、failover集群搭建
- CSS布局模型
- 【2015/6/9】快速排序的java简单实现
- 云服务器 安装sysbench报错./libtool: line 841: X--tag=CC: command not found
- 一起写redis脚本
- Android开发之关于appcompat_v7问题
- 百度之星 2015 初赛(1) 1002 找连续数
- iOS中CG绘图笔记
- android的环境搭配
- nginx学习(一)