Css学习难点笔记
来源:互联网 发布:数据库完整性有哪些 编辑:程序博客网 时间:2024/06/01 09:42
网页的布局方法
(position 定位法,float浮动法)
css的position定位方法,是用来控制元素的定位模式,是相对定位还是绝对定位
position:releative 相对定位 (是指相对于在文档流中该元素原始所处的位置,进行x和y轴的移动,而且该元素移动后,它原来在文档流中所占的位置不会被清除!)
position:absolute 绝对定位 (具有绝对定位属性的元素将脱离文档流,并参考与其最近的具有定位属性(position属性)的父级元素进行定位。(不保留其原来在文档流中所占用的位置));absolute 绝对定位的使用条件: 1: 必须给父元素也拥有定位属性,(一般使用relative(相对)定位属性) 2:给子元素加绝对定位属性(position:absolute)同时要加方向属性(left,right,top,bottom)
position:absolute 绝对定位 (具有绝对定位属性的元素将脱离文档流,并参考与其最近的具有定位属性(position属性)的父级元素进行定位。(不保留其原来在文档流中所占用的位置));absolute 绝对定位的使用条件: 1: 必须给父元素也拥有定位属性,(一般使用relative(相对)定位属性) 2:给子元素加绝对定位属性(position:absolute)同时要加方向属性(left,right,top,bottom)
css的float属性,是用来控制元素的浮动的
float:left 左浮动
float:right 右浮动
float:none 清除浮动,一般用于清除整体浮动元素中的某个元素的浮动属性:
float:left 左浮动
float:right 右浮动
float:none 清除浮动,一般用于清除整体浮动元素中的某个元素的浮动属性:
1:对象浮动后,他就脱离了当前的文档流,他原来所占用的地方就腾空出来了,而其后续的元素将会占用这个腾空出来的空间位置,实际上浮动在深沉理解和Z轴有关系,如果想让多个块显示在同一行中,我们可以把这些元素都设成浮动,并且浮动的方向都一样!
2:浮动口诀:浮动浮动,先浮后动,(浮动的对象会先漂浮起来,离开原来的位置。后动,就是它后续的对象,会向该元素原来在文档流中的位置上,动起来!(也就是文档流的排列位置会从浮动出去的那个元素的位置重新再排列起来))
3:清除浮动:就是清除相对于自身元素之前的元素所设置了的浮动属性,从而消除之前元素因为设置了浮动属性造成的自身元素的排列变化。
4:浮动对父元素的影响【如何清除浮动】
当父元素没有指定高度时,而这时它的子元素有浮动属性,该父元素则不会自适应高度(典型的warp实例)。我们采用以下几种办法解决这个问题【清除浮动】:
1):W3C标准(额外标签法):给父元素增加一个空的div,并设置这个div的clean属性为both
2):给父元素添加overflow属性并设置为hidden,但是如果子元素使用了定位布局,则会造成居多麻烦,溢出的部分会被隐藏掉
3):利用after伪对象 (最流行的方式,该方法实际上就是第一种w3c标准的一种改进的写法)
.clearFix:after{
clear:both; //清除相关联的元素的浮动属性对自己造成的影响
display:block; //将他变成块级元素
visibility:hidden; //将该块隐藏
height:0px; //该块的高度为0,实际上已经设了隐藏,这个高度就可以不设
content:"."; //该块的内容为. 也可以为空,这个属性不能省略,因为这是after伪对象的必要属性(详见CSS手册)
}
.clearFix{zoom:1;} /*解决ie6/7的兼容问题*/
具体实例:
<div style=“width:200px;border:1px solid red;” class=“clearfix”>//引用先前定义好的after伪类,来清除浮动,达到高度自动扩张的功能
<div style=“float:left;width:80px;height:80px;border:1px solid blue;”>TEST DIV</div>
<div style=“float:left;width:80px;height:80px;border:1px solid blue;”>TEST DIV</div>
<div style=“float:left;width:80px;height:80px;border:1px solid blue;”>TEST DIV</div>
<div style=“float:left;width:80px;height:80px;border:1px solid blue;”>TEST DIV</div>
<div style=“float:left;width:80px;height:80px;border:1px solid blue;”>TEST DIV</div>
</div>
css 的display属性,是用来控制元素在行级元素和块级元素之间切换的一个属性(inline block ),当值是none的时候则是隐藏该元素,一般我们用来与JS一起配合操作
取值范围:
display:inline
display:block
取值范围:
display:inline
display:block
- Css学习难点笔记
- 新手学习DIV+CSS难点
- 新手学习DIV+CSS难点之经验总结
- 学习DIV+CSS难点之经验总结
- Hibernate学习笔记:难点,常见面试题
- Hibernate学习笔记:难点,常见面试题
- Hibernate学习笔记:难点,常见面试题
- Hibernate学习笔记:难点,常见面试题
- css难点解决
- 前端css属性难点
- C语言难点笔记
- CSS学习笔记----CSS选择器
- DIV+CSS难点之经验总结
- 1.27学习难点
- es6难点学习
- 深度学习的难点
- Java学习重难点
- CSS学习笔记一
- 一个应届生的面试感悟
- shell [ find / grep 的基本使用 ]
- LeetCode :3Sum
- 少年pi的八句经典台词
- 黑马程序员--使用ListView控件展示数据
- Css学习难点笔记
- Css布局口诀
- Css Hack 技术
- 百度2013校园招聘题
- Android断点续传实现
- java的日期处理
- poj 1035 Spell checker
- Toolbox中的dissolve工具以及与排序工具的组合使用
- Ubuntu下file not found + GRUB rescue肿么办?--由windows下分区调整引起的