关于css布局的定位问题
虽然职位说是PHP程序,但实际上什么都要做些,排版当然也免不了了,以前自己做网站时就能排出网页了,但是很多东西不系统,有点走马观花,例如关于这个css布局定位的问题就是,今天特意总结了一下,
知识这东西,只有记住了,才是自己的,不能老是再这么查手册,必须记住,而不是理解了就算了。
第一关于标准文档流
1.默认不用定位的话,所有元素都是在同一个平面,既然在同一个平面就要有互相挤的概念。
2.inline-block元素和block元素是有区别的,例如span,a等就是inline-block内联元素,默认不会换行,设置宽高也没用(以前用span排版就觉得奇怪,原来是这样),而div,p,ul等元素是block块元素,默认会换行,宽度不指定会填满到父元素边界。
3.float元素是针对block块元素而言的,float后,块元素会脱离标准流,紧挨着最近的包裹元素或浮动元素边界。
absolute和relative定位的规律:
relative相对定位的规律
1.使用相对定位的块,会相对于它原本的位置,通过偏移,到达新的位置,所以如果指定了relative但是没有指定偏移,看不出有什么变化。
2.使用相对定位的块仍在标准流中(会占据原来的位置),它对父亲和兄弟盒子都没有任何影响。
absolute绝对定位的规律
1.使用绝对定位的块以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位
注意:这里如果指定了一个块属性为absolute,没指定top数值,并且父元素就是浏览器窗口,浏览器给了算出了一个默认top值,只是这个值没显示出来。
2.绝对定位的框从标准流中脱离,这意味着他们对其后的兄弟盒子的定位没有影响,其他的盒子好像就好像这个盒子不存在一样。
关于css布局的定位问题的更多相关文章
- CSS 布局经典问题初步整理
CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
随机推荐
- 文件上传到ftp服务工具类
直接引用此java工具类就好 import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcep ...
- day02 mysql基本语句 存储引擎 数据类型 完整性约束
day02 mysql 一.sql的基本语句 系统数据库 information_schema: 虚拟库, 不占磁盘空间(在内存汇中): 存的是数据库启动后的一些参数, 如 ...
- vue 监听的使用
watch:{ 监听的属性:function(旧值,新值) { } } 代码: <!DOCTYPE html> <html lang="en" ...
- 解决小程序sessionid不一致
由于小程序端两次请求的 sessionid 不一致, 导致后端无法取得 session,解决办法:在登录时获取sessionid //第一次请求登录接口时保存到sessionid中 success: ...
- 3年A班,从现在起大家都是人质-观后感
花了2天时间观看了由小室直子.铃木勇马.水野格导演,武藤将吾编剧的3年A班日剧. 这部剧我觉得很擅长用对比的手法,将一个受欢迎的老师人前人后强烈对比,一群外表成熟,内心却始终还是孩子气的学生对比,也将 ...
- JUC 一 CyclicBarrier 与 Semaphore
java.util.concurrent CyclicBarrier简介 CyclicBarrier:可重用屏障/栅栏 类似于 CountDownLatch(倒计数闭锁),它能阻塞一组线程直到某个事件 ...
- flutter WebView flutter js 互调
通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试. 1.引入webview_flutter: ^0.3.5+2 这个是官网推荐用的, ...
- ZK4字命令
zookeeper4字命令:两种方式,1.通过telnet链接服务器,执行stat.2.echo stat|nc xxx.xxx.xxx.xxx 2181效果是一样的conf:zk服务器运行时的基本信 ...
- SpringBoot通过maven打包成jar,设定主清单属性。
文章目录 原来普通的jar包一直是 <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...
- (转)python资料汇总(建议收藏)零基础必看
摘要:没料到在悟空问答的回答大受欢迎,为方便朋友,重新整理汇总,内容包括长期必备.入门教程.练手项目.学习视频. 一.长期必备. 1. StackOverflow,是疑难解答.bug排除必备网站,任何 ...