CSS的定位和浮动

#CSS定位、浮动
##1、
标准文档流:指的是在不使用定位或者其他排版或者CSS,各个元素排列的规则实际上就是CSS规定网页默认的排列方式。
负边距:会使文档流发生偏移,但是不会脱离文档流,不会占据原来的空间。
##2、相对定位:
    position:relative
    1、设置了相对定位后不会影响这个元素本身
    2、不会脱离文档流
    3、它原本所占的空间仍被保留
    4、如果没有设置相对定位偏移量,不会影响这个元素本身。
    div{
    position:relative;设置了div可以相对位移
    left:100px;
    top:100px;
        }设置div相对于body移动
##3、绝对定位:
    设置:position:absolute
    1、会让元素脱离文档流,以文档作为父类,如果找到了定位父级,会以定位父级作为父类
    2、设置了绝对定位了之后,行级元素也支持设置高宽,即默认加上了一个display:inline-block
    3、设置绝对定位之后,这个元素就相当于飘起来了,这个时候对它位移,是相对于body位移。
       它也不会受它的父类的控制了。    
    4、后飘的会盖在先飘的上面,比如先飘了div1,再飘div2,这个时候div2会在最上面
    5、层级优先数:z-index:数字。数字越大就越优先显示。
###4、固定定位:
    position:fixed。
    固定定位也脱离了流,不受流控制。
    它也可以位移,left、top、right、bottom
###5、浮动
    float:right left none(默认的,不浮动)
    浮动会脱离文档流,且不占据原来的位置,相当于飘起来了。
        按照一个方向移动直到碰到前一个元素的边界或者父元素的边界就停止下来。
            行级元素设置浮动后会默认加上dispaly:inline-block,即默认会把这个元素变成行内块级元素,
            也就是说它会有高宽属性。
        前面的元素设置了浮动,后面的元素不想跟着浮动。解决方法:在两部分中间加一个空的div1
        利用这个div1清除浮动。清除左、右浮动:clear:left clear:right   都清除:clear:both

时间: 2024-07-30 07:24:52

CSS的定位和浮动的相关文章

css 的定位,浮动和清除浮动——浅析

在下才疏学浅,不足之处,还请多多指教. 定位有这五种: 常用的是前三种,接下来上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ padding: 100px 100px; position: relative; width: 35

CSS学习笔记——CSS中定位的浮动float

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的? W3CSCHOOL对浮动属性的解释:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种. 我个人的理解是:HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float

CSS学习笔记——CSS中定位的浮动float(20171129002)

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的? W3CSCHOOL对浮动属性的解释:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种. 我个人的理解是:HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而

Css3之基础-8 Css 浮动(定位,浮动定位)

一.CSS 定位概述 定位概述 - 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置 - 普通流定位 - 浮动定位 - 相对定位 - 绝对定位 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中(比如<p>元素.<div>元素) - 元素框之间的垂直距离是由框的垂直外边距计算出来的 - 内联元素将在一行中从左到右排列水平布置 - 不需要从新行开始 - 可以使用水平内边距.边框和外边

css框模型、定位、浮动

一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 二.css内边框 1.元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. 2.CSS padding 属性定义元素边框与元素内

CSS+jQuery实现可关闭的智能定位的浮动消息提示框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS+jQuery实现可关闭的智能定位的

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

CSS彻底研究(3)-浮动,定位

CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则 准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&qu