精华内容
下载资源
问答
  • 其中float常用的属性值有left、right、none,分别代表标签左浮动,右浮动,不浮动(默认值),下面将结合一简单的实例来分别介绍种属性。 1.不浮动(none) 如果将float设置为none(默认值),box1、

    前言

    在使用DIV+CSS样式布局时,经常会使用使用一些属性对标签进行控制,比如:float属性和position属性,本文将详细讲解float属性的基础用法和清除方法,希望能对大家有所帮助,不足之处还望海涵。

    float的应用

    一、定义浮动的语法格式:选择器{float:属性值}
    其中float常用的属性值有left、right、none,分别代表标签左浮动,右浮动,不浮动(默认值),下面将结合一个简单的实例来分别介绍三种属性。
    1.不浮动(none)
    如果将float设置为none(默认值),box1、box2、box3将采用从上到下的顺序依次进行排序,如图所示:
    在这里插入图片描述
    2.左浮动(left)
    如果将float设置为left,box1、box2、box3将脱离标准文档流,在页面的左端,从左到右并列在一行进行排序,如图所示:
    在这里插入图片描述
    3.右浮动(right)
    如果将float设置为right,box1、box2、box3将脱离标准文档流,在页面的由端,从右到左并列在一行进行排序,如图所示:
    在这里插入图片描述

    float的清除

    上面我们已经学习了float的使用方法,但是以免浮动对其它标签产生影响,下面我们再介绍几种float的清除方法供大家使用。
    一、clear标签清除浮动
    为了方便效果的展示,我们先在中添加一段文字,如图
    在这里插入图片描述
    从图中我们可以看出,目前产生了图文混排的排版,这并不是我们想要的效果,下面我们在p标签中的css样式中添加clear属性来清除浮动效果,如图所示:
    在这里插入图片描述
    二.特殊的浮动清除
    上文中clear属性虽然可以清除浮动,但需要注意的是clear属性只能清除左右两侧的浮动影响,但我们在制作网页的过程中经常会受到一些特殊浮动的影响,例如在子标签设置浮动时,如果不指定父标签的的高度,则clear属性就不能清除浮动带来的影响,如下图:
    在这里插入图片描述
    可以看出,父元素由于没有设置高度变成了一条直线,使用clear标签并不能清除浮动带来的影响,为了能更轻松的清除一些特殊的浮动,博主总结了三种方法供大家参考
    1.空标签清除浮动(不推荐使用)
    空标签清除浮动是指在浮动标签之后加入空标签,并对该标签应用“clear:both”样式,来清除浮动的影响,但不推荐使用(增加了毫无意义的标签)
    在这里插入图片描述
    2.overflow属性清除浮动(推荐使用)
    对需要清除浮动的标签应用“overflow:hidden;”的样式也可以清除浮动对标签的影,还可以弥补空标签清除浮动带来的不足,既方便又快捷,如图所示:
    在这里插入图片描述
    3.after伪元素清除浮动(推荐使用)
    除了以上两种方法外,使用伪元素也可以清除浮动,如图所示:
    在这里插入图片描述

    但需要注意的是:
    1.该方法只适用于IE8以上的浏览器版本和其它非IE浏览器
    2.必须为需要清除浮动的标签伪对象设置“height:0”样式,否则该标签会比实际高出若干像素
    3.必须设置conntent属性,属性只可以为空。

    以上有关float属性的应用与清除已经全部讲解完了,你学会了么?赶紧来试试吧!

    展开全文
  • Css中position很重要,常用有以下几个:static,relative,absolute,fixed、Inherit。...属性,在static情况下是无效,要使用这些属性,必须把position设置为其他三个值之一。 Relative:相对定...

    Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed、Inherit。

     

    Static:静态定位。如果你没有设置position属性,那么缺省就是static。top、left、right、bottom等

    属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

    Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分

    配给他,他两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

    Absolute:绝对定位。元素将按照包含他的元素的位置进行调整,比如它嵌套在另一个绝对定位元素中

    ,那么就相对于那个元素定位。

    Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象说点,上下拉动

    滚动条时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

    Inherit呢, 就是从父元素继承 position 属性的值,

    注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会稍有偏差,这

    时,我们可以通过类似下面的方法来处理:

    <div style="position:relative">

    <div style="position:absolute;10px; left:10px;"></div>

    <div>

     

    Css中的Float很重要,常用有以下几个值:left、right、none、inherit。

    css中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和

    表现出来的特性,在使用的时候很容易陷入困境,云里雾里,搞不清状况。我们将从最基本的知识来说起,

    谈谈关于浮动的应用,出现问题和解决方法。

    基础知识

    float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设

    置了float属性的元素为浮动元素。

    浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。

     left 元素向左浮动。
    right 元素向右浮动。
    none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
    inherit

    规定应该从父元素继承 float 属性的值。

    清除浮动

    清除浮动是一个经常提到的东西,首先我们要理解使用浮动会带来什么问题,以及为什么要清除浮动。
    我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之

    后,子元素会脱离标准文档流,也就是说,父级元 素中没有内容可以撑开其高度,这样父级元素的height

    就会被忽略,这就是所谓的高度塌陷。要解决这样的问题,我们就是要使用清除浮动。

    • 优点:易学易用,容易掌握。
    • 缺点:不符合结构和表现的分离,增加很多无用标签,不便后期维护,故不建议 使用。

    转载于:https://www.cnblogs.com/my-blog-css/p/5851041.html

    展开全文
  • 四种常用布局方式

    2020-08-09 14:57:09
    其中display属性有三个属性值,分别为inline,block,inline-block。 display:inline 将块级元素转变为行内元素; display:block 将行内元素转变为块级元素; display:inline-block 将当前元素转变为兼具行内元素...

    CSS四种常用布局方式:
    常用的四种方式有display,浮动布局,定位布局和伸缩盒布局。
    1.display布局方式
    其中display属性有三个属性值,分别为inline,block,inline-block。
    display:inline 将块级元素转变为行内元素;
    display:block 将行内元素转变为块级元素;
    display:inline-block 将当前元素转变为兼具行内元素和块级元素特性的元素,即可设置宽高也能在一行排列。
    2.浮动布局方式
    float:left/right,其中使用浮动时不会遮盖文字,对行内元素设置浮动会让行内元素可以设置宽高属性,对块级元素设置浮动时,块级元素不在独占一行。
    3.定位布局:
    定位布局使用position属性
    position:static 静态布局
    position:absolute 绝对定位
    绝对定位特点:1)脱离默认文档流;2)不保留当前控件;3)默认情况下,绝对定位元素根据body左上角进行定位; 4)当父元素具有定位属性时,子元素根据父元素左上角进行相对定位
    position:relative 相对定位
    特点:1)根据元素本身进行相对定位;2)不脱离默认文档;3)保留定位前空间
    position:fixed 固定定位
    特点:1)特点和绝对定位相似;2)使用了固定定位的元素不会随着滚动条的滚动而滚动
    position:sticky 综合类相对定位和固定定位。
    其中使用定位布局时,要使用配合属性left;top;right;bottom
    4.伸缩盒布局
    display:flex; 当前元素即刻变成一个伸缩盒,并且所有子元素自动成为父元素的一个成员项item,子元素的浮动属性自动失效
    flex-direction:设置子元素的排列方式
    align-items: 设置元素在y轴方向位置
    stretch 子元素默认高度为父元素100%
    flex-start; flex-end ; center
    justify-content:设置元素在x轴方向的位置
    flex-start;flex-end ;center;space-around;space-between
    子元素:flex:number:当前item占据父元素剩余空间的份数
    4.如何让子元素在父元素中水平和垂直居中?
    1.子元素为行内元素 text-align:center / line-height
    2.子元素为块级元素时
    1.给父元素设置:justify-content/align-items
    2.给父元素设置display:flex;
    给子元素直接设置一个margin:auto
    3.给父元素设置一个定位属性,给子元素设置一个绝对定位;然后给子元素所有配合属性设置0px;并且给子元素设置margin:auto
    4.给父级元素设置定位属性,子元素设置绝对定位;将子元素的top:50%;left:50%;再配合使用margin-top:-height50%;margin-left:-width50%

    展开全文
  • 一、 概念介绍: 数据库DATABASE、表TABLE、列COLUMN、行ROW、关键字PRIMARY KEY、索引INDEX 二、 数据类型: LONG RAM:超长大型数据(照片、图形、描述等不定长数据)。 DATE:包含日期和时间。...例如:假设有三个
  • assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制。在实现中,assertion就是在程序中的一条语句,它对一boolean表达式进行检查,一正确程序必须保证这boolean表达式的为...
  • char 是 一 Unicode 字符 精确小数类型, 具有 28 有效数字 bool val1 = true; bool val2 = false; char val = 'h'; decimal val = bool char decimal DateTime ±1.0 × 10?28 ±7.9 × 10 28 到 1.23M;28-...
  • 22.常用的调用WebService的方法哪些? 答:1.使用WSDL.exe命令行工具。 2.使用VS.NET中的Add Web Reference菜单选项 23..net Remoting 的工作原理是什么? 答:服务器端向客户端发送一进程编号,一程序域...
  • 自定义验证规则函数接受三个参数: rule: 类型:Object 说明:当前规则 rule 本身 value: 说明:表单控件 value callback 类型:Function 说明:回调函数,用于向 JS-Valid 反馈验证成功与...
  • 10.1.1 通过float属性实现多栏布局 10.1.2 使用clear属性实现换行 10.1.3 使用clip属性控制裁剪 10.1.4 控制组件滚动条 10.2 盒模型和display属性 10.2.1 两种最基本盒模型 10.2.2 none 10.2.3 inline-...
  • java 面试题 总结

    2009-09-16 08:45:34
    assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制。在实现中,assertion就是在程序中的一条语句,它对一boolean表达式进行检查,一正确程序必须保证这boolean表达式的为...
  • 3.1.5 常用的Linux命令 3.1.6 C中变量的存储类型哪些? 3.1.7 动态规划的本质 3.1.8 实践中如何优化MySQL? 3.1.9 什么情况下设置了索引但无法使用? 3.2.0 SQL语句的优化 3.2.1 数据库索引的底层实现原理和...
  • java面试宝典

    2013-02-28 16:04:01
    43、说出一些常用的类,包,接口,请各举5 。 12 44、Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类?是否可以implements(实现)interface(接口)? 12 45、内部类可以引用他包含类的成员吗?...
  • 千方百计笔试题大全

    2011-11-30 21:58:33
    43、说出一些常用的类,包,接口,请各举5 。 12 44、Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类?是否可以implements(实现)interface(接口)? 12 45、内部类可以引用他包含类的成员吗?...
  • 部分为第 9 ~ 13 章,介绍了 CSS 样式各属性的设置和使用方法,包括CSS 3 中新增弹性盒模型、多列布局、动画效果、渐变填充等内容;第四部分为第 14 ~ 20 章,介绍了 jQueryMobile 相关知识,重点介绍了 ...
  • 6.ADO.net中常用的对象哪些?分别描述一下。 答:connection command sqladapter dataset datatable dataview等等.写不完了. 7.如何理解委托? 答:据说相当于函数指针,定义了委托就可以在不调用原方法名称的情况...
  • * banner切换时同步回调的三个方法 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { selectedPage = position; offset = positionOffset; ...
  • 14.4 理解Float属性 159 14.5 总结 162 14.6 问与答 162 14.7 作业 162 14.7.1 测验 162 14.7.2 测验答案 162 14.8 练习 162 第15章 理解CSS盒子模型和定位 163 15.1 CSS盒子模型 163 15.2 定位...
  • SQL语法大全

    2014-03-30 11:00:11
    COUNT(*|字段名) 对数据行数统计或对某一栏有值的数据行数统计 MAX(字段名) 取得一表格栏最大的值 MIN(字段名) 取得一表格栏最小的值 SUM(字段名) 把数据栏的值相加 引用以上函数方法: sql="select sum...
  • 在一小时内学会 C#(txt版本)

    热门讨论 2009-08-19 18:09:37
    你必须知道 C++ 中常用的 public、private 和 protected 修饰符。我将在这里讨论一些 C# 引入的新的修饰符。 readonly readonly 修饰符仅用于修饰类的数据成员。正如其名字说的,一旦它们已经进行了写操作、直接...
  • 05 css的float属性 06 css的清除浮动 07 css的定位 08 css的margin定位 第40章 01 抽屉作业之head区域(导航条) 02 抽屉作业之置顶区域 03 抽屉作业之content部分 05 抽屉作业之页码部分 06 抽屉作业之footer部分...
  • 第一个参数是异步请求url,第二个为参数,第三个回调方法。 (4)方法会在指定Dom对象上绑定响应ajax执行事件。 (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var ...
  •  本书共包括三个逻辑部分和四个附录。第一部分是“Objective-C语言”,讲述该语言基础知识。内容包括:使用Objective-C编写第一个程序;类、对象和方法;数据类型和表达式;循环结构;选择结构;类和对象使用;...
  • Javashop开发规范V2.2

    2012-08-21 00:13:09
    在某个实体Bean中,我们可能会一些属性不对应数据库字段,这时我们需要在相应 Geter方法中加上@NotDbField注解,以便使数据库机制知道这字段不转为sql语句,如: private File file; @NotDbField public ...
  • adb1.0.26包含fastboot.exe

    2019-03-05 15:11:03
    在多设备/模拟器连接的情况下较常用的是 -s <serialNumber> 参数,serialNumber 可以通过 adb devices 命令获取。如: $ adb devices List of devices attached cf264b8f device emulator-5554 device 10.129....
  • ColumnType.Own,ColumnType.Child,两个值可以设置,假设UserInfo 有个属性是Family family对象,你想解析faily对象的属性monther,father两个属性,则需要设置Child,并在monther,father下添加相对应注解@...
  • 在多设备/模拟器连接的情况下较常用的是 -s <serialNumber> 参数,serialNumber 可以通过 adb devices 命令获取。如: $ adb devices List of devices attached cf264b8f device emulator-5554 device 10....
  • 任务281: 基本数据类型间转换的常用方法 任务282: Python数据结构-列表 任务283: 集合 任务284: 元组 任务285: 字典 任务286: Python运算符与表达式 任务287: Python条件语句之简单if语句 任务288: Python...
  • 精通Oracle 10g PL/SQL编程--详细书签版

    热门讨论 2013-02-06 17:30:46
    CruiseYoung提供详细书签电子书籍目录 http://blog.csdn.net/fksec/article/details/7888251 精通Oracle 10g PL/SQL编程 基本信息 作者: 王海亮 林立新 于三禄 郑建茹 丛书名: 万水Oracle技术丛书 出版...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

常用的float属性值有三个