css浮动和定位

作者: 种谔 | 来源:发表于2016-03-10 20:46 被阅读0次

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
在文本框中存在一个默认值,获得焦点的时候消失。

相关文章

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • CSS定位与浮动

    CSS定位机制 CSS 有三种定位机制 普通流(文档流)、浮动和绝对定位。浮动和绝对定位可以让一个元素脱离文档流。...

  • CSS定位/浮动——position/float

    CSS定位/浮动——position/float CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布...

  • CSS定位与浮动2016/6/12

    CSS 定位 (Positioning) CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 position...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • 浮动和定位

    在CSS中,我最怕的就是浮动和定位。我是因为浮动和定位而怕CSS。但是怕,也得攻下来。 这篇文章再次复习一下浮动和...

  • CSS浮动、定位

    这几天有空,学习了CSS浮动和定位,和大家分享几个问题,希望对学习CSS浮动和定位的同学有所帮助。 一、文档流的概...

网友评论

    本文标题:css浮动和定位

    本文链接:https://www.haomeiwen.com/subject/uxttlttx.html