css float position 笔记

float: right;   只对后面的元素起作用,围绕在后面元素的右边

clear: rigth;   如果后面的元素有这句,意思是说我的右边不要有人围绕

class="clearfix"  border自适应元素的高度,起到 overflow 的作用

position: static;  只根据文档流定位,也就是他的正常排位

position: relative;  相对于正常位置的定位

position: fixed;  固定位置

position: absolute;  相对与position是relative的父元素的位置(static、fixed的父元素不起作用, 如果没有relative的父元素,就相对整个网页)

z-index: -1;   可以被覆盖

时间: 2024-10-10 20:35:04

css float position 笔记的相关文章

CSS定位——position、float小结

在CSS使用position属性来指定元素的定位类型,该属性有四种不同类型的定位,分别为static(默认定位).relative(相对定位).absolute(绝对定位)和fixed(固定定位). 要理解以上四种定位,写看一下CSS的文档流(普通流)概念: 除非专门指定,否则所有框(也就是html元素)都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.若某元素的position属

《css定位 position》课程笔记

这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三种布局:标准流,浮动,定位 两大元素:块级元素(div,h1-6,table,ol,ul,li,p),内联元素(a,span,img,input) position可选参数 static(标准流中正常排列) relative(相对定位) absolute(绝对定位) fixed(脱离正常的文档流,登

CSS Float nine rules

CSS Float nine rules w3 css float nine rules CSS Float Rule1 CSS Float Rule2 CSS Float Rule3 CSS Float Rule4 CSS Float Rule5 CSS Float Rule6 CSS Float Rule7 CSS Float Rule8 CSS Float Rule9 finally 参考文章 注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出.

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

css通用小笔记02——浮动、清除(三个例子)

css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 2

转载,最容易理解的CSS的position教程——十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

CSS定位 position

总体讲:一般使用的是父类用postion:relative属性,子类使用positive:absolute属性 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法:  position : static absolute relative position参数: static : 无特殊定位,对象遵循HT

CSS中Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. relative : 相对于元素自身的定位. absolute :相对于包含块的定位. fixed : 相对于窗口的定位. 2.包含块 包含块就是 top | righ

[HTML/CSS]说说position

目录 语法 作用 使用定位的条件 总结 语法 position : static absolute relative(static.absolute.relative常用值). 参数 static :无特殊定位,对象遵循HTML定位规则. absolute :将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过css z-index属性定义.此时对象不具有边距,但仍有补白和边框. relative :对象不可层叠,但将依据left,right,to