display 用来设置元素的显示方式

display : block | none | inline | inline-block

inline:指定对象为内联元素

block:指定对象为块元素

inline-block:指定对象为内联块元素

none:隐藏对象

float 控制元素是否浮动显示

float : none | left | right

none:设置对象不浮动

left:设置对象浮在左边

right:设置对象浮在右边

浮动的目的:

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性

  1. 任何申明为 float 的元素自动被设置为一个“块级元素”
  2. 在标准浏览器中浮动元素脱离了文档流 ,所以浮动元素后的元素会占据浮动元素本来应该所处的位置
  3. 如果水平方向上没有足够的空间容纳浮动元素,则转向下一行
  4. 文字内容会围绕在浮动元素周围
  5. 浮动元素只能浮动至左侧或者右侧

clear 清除浮动

clear : none | left | right | both

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right:不允许右边有浮动对象

both:不允许有浮动对象

position 对象的定位方式

position : static | absolute | fixed | relative

static:默认值。无定位,对象遵循常规流。此时4个定位偏移属性不会被应用

relative:相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素

absolute:绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠

fixed:固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动

absolute 说明:

  1. 脱离文档流
  2. 通过 top,bottom,left,right 定位
  3. 如果父元素 position 为 static 时,将以body坐标原点进行定位
  4. 如果父元素 position 为 relative 时,将以父元素进行定位

例:div { position: absolute; left:100px; top:100px;}

relative 说明:

  1. 相对定位(相对自己原来的位置而言)
  2. 不脱离文档流
  3. 参考自身静态位置通过 top,bottom,left,right 定位

例:div { position: relative; left:100px; top:100px;}

fixed 说明:

固定定位实际上只是绝对定位的特殊形式,固定定位的元素是相对于浏览器窗口而固定,而不是相对于其包含元素,即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一 样的地方

例:div { position: fixed; right:0; bottom:0;}

z-index 对象的层叠顺序

z-index : auto | number

当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序

较大 number 值的对象会覆盖在较小 number 值的对象之上

css(display,float,position)的更多相关文章

  1. CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  2. BOOL,int,float,指针变量 与“零值”比较的if语句

    分别给出BOOL,int,float,指针变量 与“零值”比较的 if 语句(假设变量名为var) 解答: BOOL型变量:if(!var) int型变量: if(var==0) float型变量: ...

  3. 505,display,float,position之间的关系(有疑问)

    (display属性设置元素如何显示) 如果display取值为none,那么position和float都不起作用,这种情况下元素不产生框 否则,如果position设置框是绝对定位,float的计 ...

  4. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  5. java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)

    1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  6. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  7. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  8. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  9. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

随机推荐

  1. Android项目无法运行的解决方法

    文件本身是否有问题 有两种方法可以判断:1.比较快捷的办法就是用解压软件打开或者解压的过程中有没有弹出什么错误提示,如果有错误提示那就重新下载一遍文件(javaapk用的压缩工具是winrar4.0, ...

  2. tyvj 普通平衡树 SBT or splay

    普通平衡树 From admin     背景 Background 此为平衡树系列第一道:普通平衡树     描述 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中 ...

  3. [BZOJ 1018] [SHOI2008] 堵塞的交通traffic 【线段树维护联通性】

    题目链接:BZOJ - 1018 题目分析 这道题就说明了刷题少,比赛就容易跪..SDOI Round1 Day2 T3 就是与这道题类似的..然而我并没有做过这道题.. 这道题是线段树维护联通性的经 ...

  4. 利用merge优化

    create table a1(TP_END_DATE NUMBER,WK_END_DATE NUMBER, MTH_START_DATE NUMBER, MTH_END_DATE NUMBER, T ...

  5. NOT EXISTS优化

    INSERT INTO F_PTY_INDIV (PTY_ID, PTY_NAME, GENDER_CD, BIRTHDAY, CERT_TYPE, CERT_NO, SOCINSUR_NO, COU ...

  6. 传智播客C语言视频第二季(第一季基础上增加诸多C语言案例讲解,有效下载期为10.5-10.10关闭)

    卷 backup 的文件夹 PATH 列表卷序列号为 00000025 D4A8:14B0J:.│  1.txt│  c语言经典案例效果图示.doc│  ├─1传智播客_尹成_C语言从菜鸟到高手_第一 ...

  7. MessageFormat.format处理单引号和大括号

    在MessageFormat.format方法中组装jason数据字符串:{code:"w1",des:"w2"},起止分别有左大括号和右大括号.方法是将单引号 ...

  8. php表单提交方法汇总

    问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中.解决办法有 ...

  9. Openstack部署工具

    Openstack发展很猛,很多朋友都很认同,2013年,会很好的解决OpenStack部署的问题,让安装,配置变得更加简单易用. 很多公司都投入人力去做这个,新浪也计划做一个Openstack的is ...

  10. 局域网内linux由ip反解析主机名