css浮动和定位

CSS定位机制:
position属性拿来定位用,有四个属性。
1.static
正常默认值,不脱离文档流。
2.relative
原标签不脱离文档流,占据原有位置,偏离后的标签,会覆盖其他标签,偏离位置以标签原文档流的位置为参考坐标。
3.absolute
标签脱离文档流,偏离位置以存在position值的父元素为参考坐标,如果不存在,则以body标签为参考坐标。
4.fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
注:对于使用了position属性中非static标签的元素,使用top,right,bottom,left和z-index来设置上,右,下,左和重叠优先级。非position属性的标签会忽略这5个属性。

z-index详解:
元素可拥有负的 z-index 属性值。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

float
浮动的问题:
1.父元素的高度无法被撑开,影响与父元素同级的元素
2.与浮动元素同级的非浮动元素会跟随其后
3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
float存在四个值,left,right,none,inherit默认是none.
浮动元素会生成一个块级框。(不会换行,除非空间不够。)
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
设置float会使得标签脱离普通文档流,直到它的右边缘碰到包含框的右边缘,使得块级元素会无视标签的位置,而产生重叠的现象,然而文字却不会无视浮动,会围绕在浮动周围,具体浮动的位置要看浏览器的渲染情况,如第一个元素为块级元素,第二位右浮动元素,则右浮动元素会存在第二行。
clear
clear存在属性值为none,left,right,both.
clear存在是为了清除浮动,注:清除浮动时,添加clear属性只能对自己有效。
到底是清除左边还是右边,则需要查看下,浏览器渲染的顺序。

overflow
取值一般为hidden和scroll。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
hidden:内容会被修剪,并且其余内容是不可见的。
visible:默认值。内容不会被修剪,会呈现在元素框之外。

placeholder
在文本框中存在一个默认值,获得焦点的时候消失。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?浮动的元素会脱离文档流,向左或者向右移动...
    饥人谷_wanpp阅读 690评论 0 49
  • 浮动元素的特征及影响 特征: 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直...
    Joey的企鹅阅读 914评论 0 0
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素会脱离文档流(不会对普通...
    727上上上阅读 424评论 0 0
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素不在文档的普通流中,它可以...
    高进哥哥阅读 386评论 0 0