浮动与定位

<浮动总结：
1.浮动的元素脱离文档流。
2.浮动的元素不能覆盖内联元素。
3.后面的浮动元素不能覆盖前面的元素。如果前面元素不是块级元素会被后面的浮动元素会上移，导致元素向旁边移动。

内联元素：没有width和height,不能设置margin-top和margin-buttom。
内联块级元素：有width和height，可以设置margin
块级元素：有width和height，可以设置margin

<定位总结：
z-index属性：必须和定位一起用。
相对定位:relative相对于原来的位子进行移动（元素是普通文档流）
绝对定位：absolute相对于最近的以定位的父级元素或最初包含块进行移动（元素脱离普通文档流）
固定定位：fix相对于浏览器边框进行移动（元素脱离普通文档流）

BFC:block formatting context(块级格式化上下文) overflow：hidden会触发bfc
①子级margin-top把父级往下带
②子级浮动会导致父级塌陷
③子级超出父级影响其他元素

时间： 2024-10-27 10:44:24

浮动与定位的相关文章

第3天：CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

CSS基础知识---浮动，定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

网页排版中的浮动和定位（学习笔记）

CSS中的浮动和定位 在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 虽然浮动和定位很重要,但是在以后的网页写作中,还是尽量少用,最好别乱用,不然后面问题很大,特别是对初学者.最好要把浮动和定位要搞清楚在使用. 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设置宽.高,宽度为父盒子的100%.例如:div.p.标题元素(h1-h6).列表元素(ul li.dl dt dd) 3.行内元素(in

2.深入理解浮动和定位

浮动和定位 1.关于绝对定位有几点的说明: 1)使用绝对定位是以它的”最近的“的一个”已经定位的“的”祖先元素“为基准进行偏移.如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行偏移: 2)如果父元素没有设置定位,子标记设置了绝对定位,而没有设置left和top,那么子元素会呆在原处,但是这个元素已经脱离了标准流.这一张绝佳让保持不动的元素脱离标准流的方法.

牛腩新闻发布系统——盒子的浮动与定位

浮动和定位的相关知识,是设计精美网页的必要前提之一.在学习浮动与定位之前,我们先了解一下相关知识"标准流". 一.标准流 标准流,是指在不适用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.在标准流中,块级元素的盒子都是上下排列,行内元素的盒子都是左右排列的.我们把这些元素分为以下两类: 块级元素(block level):占据着整个矩形区域,以块的形式表现出来,并且跟统计的兄弟块依次竖直排列,左右撑满.如<li>.<ul>.<div>

CSS浮动和定位学习笔记

1.首先先看一下浮动 (1)左浮动:元素本身经可能的左移动,知道碰到边框或者是别的浮动元素,把他右边的位置让给别的元素.如果右边的空间不够则自动换行.浮动对于快元素和行内元素都生效. (2)右浮动:与左浮动相反. 2.CSS中的几种定位方式 (1)static:默认的定位方式. (2)relative(相对定位):元素偏离某个距离,元素保持未定位前的形状,他原本占有的空间保留,从这一角度看,好像元素本身仍然在文档刘/标准流中一样.relative的参照点是他原来应该出现的位置. (3)absol

CSS小随笔（三）浮动与定位

先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l

【前端】浮动和定位

浮动和定位 浮动 什么是浮动? ? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程.它可以让任何盒子可以在一行排列,用浮动来布局. ? 在css中,通过float属性来定义浮动,其基本语法格式如下: 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动(默认值) 浮动的特性 脱离标准流,不占位置,浮动只有左右浮动 一般只要一浮动就创建一个包含块级的概念,一般要在外边添加一个父盒子,然后对齐,

H5浮动与定位

H5的奇妙之处就在于它的变幻莫测,接下来我想谈一下我对定位浮动的认知. 什么是浮动首先要了解什么是浮动:脱离文档流,默认在当前的行对既定的方向进行移动(默认横排). 用浮动可以解决什么问题使用浮动之前我们要想明白浮动都可以解决什么问题:比如我们要放一排的div或是img,我们故可以通过调试margin之类的属性解决,但是有时会发现即便如此有时仍会产生空隙,我们就可以通过浮动来解决这一问题.再比如有时后我们需要一些标签不会占据文档流的显示,这时候也可以选择使用. 浮动会出现什么问题但是浮动往往会产