学习CSS一些事(下)
2.浮动(float)
浮动(float)特点:1.元素会左移、右移,直到触碰到容器为止。
2.设置浮动元素,仍旧处于标准文档流。
3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容的变化而变化。
4.当元素设置浮动属性后,会对相邻元素产生影响,相邻元素特指紧邻后面元素。
清除浮动的常用方法:1.1、clear属性:常用 claer:both; clear:left; 或者 clear:right;
1.2、同时设置width:100%(或固定宽度)+overflow:hidden;
注意:1.1.1、为受浮动影响的元素添加以上属性以清除浮动。
1.1.2、空标签<br></br>无意义,不建议使用此方法清除浮动。
浮动布局的例子:横向两列布局
相关知识点:float属性:使纵向排列的块级元素,横向排列。
margin属性:设置两列之间的间距。
如图所示:
3.绝对定位布局
3.1、通过设置position属性实现
3.2、CSS中规定的第三种定位机制
3.3、能够实现横向多列布局及较为复杂的定位
position属性
1、拥有3种定位形式:(1)静态定位(2)相对定位(3)绝对定位
2、可设置4个属性值:static(静态定位)| relative(相对定位)| absolute(绝对定位)| fixed(固定定位).
3.2.1 相对定位特点:1.相对于自身原有位置进行偏移。
2.仍处于标准文档流中。
3.随即拥有偏移量和z-index属性
3.2.2 绝对定位特点:1.建立了以包含块为基准的单位
2.完全脱离了标准文档流。
3.随即拥有偏移量和z-index属性
3.2.3 没设置偏移量 特点:无论是否存在已定位祖先元素,都保持在元素初始位置,但脱离标准文档流。
3.2.4 设置偏移量
绝对定位布局例子:
学习CSS一些事(下)的更多相关文章
- 学习CSS一些事(上)
p.s:这是我在学习中总结出来知识,如有不对,请多包涵.谢谢. CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则. 一.HTML+CSS布局分为三大类,一是流式 ...
- CSS学习笔记四:下拉选择框以及其动画特效
以前学的只是了解了css的一些基本属性,在做项目的时候都是直接使用bootstrap响应式来写项目,这样子很方便,很快捷,但是在自己看来还是有一点缺陷的,毕竟,我很多时候不怎么清楚它里面的具体运作.所 ...
- 学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...
- 【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- Linux学习心得之 Linux下命令行Android开发环境的搭建
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...
随机推荐
- 解决JsonFormat日期少一天问题
使用Jackson的@JsonFormat注解时出现少一天 比如数据库存的日期是2015-01-05,转成json则变成了2015-01-04 解决办法: @JsonFormat(pattern=&q ...
- jQuery Ajax 分页插件
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载 ...
- 修改css
.content{ height: 100%; } .con{ border: 1px solid #eeeeee; display: inline-block; width:86.8%; ##修改这 ...
- CF-164C. Machine Programming(最小费用最大流)
题意: 给你n个任务,k个机器,n个任务的起始时间,持续时间,完成任务的获利 每个机器可以完成任何一项任务,但是同一时刻只能完成一项任务,一旦某台机器在完成某项任务时,直到任务结束,这台机器都不能去做 ...
- 线程调用UpdateData函数出错
在尝试线程更新界面时,在线程中调用UpdateData(FALSE)后出现如下错误: 原因: MFC对象不支持多线程操作,不能供多个线程进程使用.子线程调用pDlg-> UpdateData(F ...
- 数学(快速数论变换):SDOI2015 序列统计
[题目描述] 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列.但是小C有 ...
- android导入项目出错处理
问题: 执行Import-Android下的Existing Android Code Into Workspace 解决方法:
- NHibernate遇到的问题集 持续更新。
问题1: “NHibernate.TypeMismatchException”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理 其他信息: Provided id of t ...
- 代码审查工具之PMD操作指南
上周客户要求对OA系统的代码质量进行了一个整体审查,并且要出一份报告给领导. 为此花了半天时间把代码审查工具PMD琢磨了下,现将具体操作步骤描述如下,以供大家参考! 1 前言 质量是衡量一个软件是否成 ...
- Python 实时日志平台 Sentry
原文地址:http://www.oschina.net/p/sentry Sentry 是一个实时的事件日志和聚合平台,基于 Django 构建. Sentry 可以帮助你将 Python 程序的所有 ...