1 浮动定位
    1、普通流定位
        普通流,由称为文档流
        块级元素:从上到下一个一个的排列
        行内元素:一行内从左到右的排列
    2、浮动定位
        2.1、什么是浮动定位
        将元素排列在普通流之外,即脱离文档流
        浮动元素不会占据页面空间
        浮动元素会放置在“包含框”的左边或右边
        浮动元素依旧位于包含框之内
        浮动元素可以向左或向右浮动,知道碰见包含框的边缘或另一个已浮动的元素框为止
        2.2、特点
            1、浮动元素边缘不会超过器父元素的边缘
            2、浮动元素不会重叠
            3、浮动知道左右浮动,不会上下浮动
            注意:非块级元素浮动的话, 将会变成块级元素,允许修改width和height
        2.3、处理问题
            1、让块级元素在同一行内显示
            2、修改行内元素的width和height
        2.4、浮动属性
            属性:float
                取值:
                none
                left
                right
            清除浮动所带来的影响:
            属性:clear
            取值:left
                right
                both
        2.5、子级元素的浮动,伪复层元素所带来的影响
            如果一个元素的所有子级内容都是浮动的,那么他的高度就会变成0
            解决方案
            1、设置父容器高度
            2、设置父元素的overflow:hidden;
            3、在父元素中,增加一个空元素,添加clear:both;
2、显示方式
    2.1、display
        none:生成元素没有框,不占据页面空间,隐藏
        block:按块级显示
        inline:按行内方式显示
        inline-block:行内快,所有的元素在一行内显示,允许修改width和height
    使用场合:
        1、控制元素的显示与隐藏
            隐藏:display:none
            显示:
                块级:display:block;
                行内:display:inline;
        2、将行内元素变成块级或行内块
        目的:修改行内元素的宽和高
    2、显示效果
        2.1、visibility
        可见性
        取值:
        visible:默认的,可见的
        hidden:元素不可见,占据页面空间

问题:visibility:hidden 占据页面空间与display:none的区别 不占据页面空间
        2.2、opacity
            透明度
            取值:0-1
            opacity:0.5;
        3、vertical-align
        垂直方向对齐
        td
        img
            取值:
            baseline:默认,基线对齐
            top:顶部对齐
            bottom:底部对齐
            middle:居中对齐
            放在img上,控制的是img左右两端文本的垂直对齐方式
        4、光标
            改变鼠标的显示效果
            属性:cursor
            取值:
            default
            pointer:小手
            crosshair:+
            text:I
            wait:等待
3、相对定位
    3.1、什么是相对定位
    元素框会相对与他原来的位置偏移某个距离
    3.2、如何用
     position:relative
    left:尺寸
    right:尺寸
    3.3、什么时候用
    元素本身位置的微调
    配合绝对定位使用
4、绝对定位
    4.1、定义:脱离文档流 不占据页面空间
    4.2、初始位置
    相对与最近的已经定位的元素 那么参考位置相对于body进行定位
    4.3、如何使用
    position:absolute;
    4.4、使用场合
    弹出菜单

转载于:https://www.cnblogs.com/Zs-book1/p/10420594.html

float浮动,定位相关推荐

  1. CSS排版练习小作业,文字围绕图片显示,基本的float浮动定位

    简单的css排版 基本的float浮动定位 文字围绕图片显示 css代码,float分成两块 <style type="text/css">div.float1{flo ...

  2. float 浮动 position 定位 阴影

    float浮动分为  left  right   清除浮动   clear:left/right   浮动设置后可能会出现浮动塌陷问题 例如  一个div 其中有文本  和图片  设置浮动后出现溢出, ...

  3. 对float浮动的我的理解,形象生动一点

    大多数官方的对float的定义和用法是这样写的: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级 ...

  4. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  5. java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位

    [Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...

  6. (12)css—float浮动样式

    一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动 作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...

  7. float、定位、inline-block、兼容性需注意的特性总结

    inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...

  8. CSS浮动定位与背景样式

    CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念 本质功能 : 实现块元素并排布局 使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...

  9. CSS表格与浮动定位

    一.表格 1.表格的常用属性  1.边距属性:padding  2.尺寸属性:width,height  3.文本格式化属性:    font-*    text-align,color,text-i ...

最新文章

  1. 项目上线简化流程介绍
  2. 服务器有操作系统吗,云服务器有操作系统吗
  3. export data by MS-SQL
  4. python高效编程15个利器_你不知道的18个Python高效编程技巧
  5. AT3557 Four Coloring 切比雪夫距离 + 四色构造
  6. 每个努力奋斗过的人,被不公正的际遇砸了满头包的时候,都有那么一瞬间的代入感。出生就是hard模式的人,早已经历了太多的劳其筋骨饿其体肤,再多的人为考验只会摧毁人对美好的向往。...
  7. [转载] 【Java】基础06:HelloWorld入门程序
  8. sevlet中web.xml 文件
  9. MySQL数据库和表名大小写敏感开关的打开办法
  10. 【Python】简单实现显示图片的高斯和中值滤波效果
  11. 【死磕 Spring】—– IOC 之 bean 的初始化
  12. NLP大牛菲利普•科恩机器翻译权威著作
  13. 峰值,峰峰值,有效值的基本知识
  14. 零基础想学习插画?入门从这里开始
  15. 将镭神C32激光雷达的PointXYZ数据转化为PointXYZIR格式 - 附代码
  16. html选择文件夹控件,File文件控件,选中文件(图片,flash,视频)即立即预览显示
  17. mina 使用手记 1
  18. 引脚密集的QFP封装的焊接
  19. 弄了一整天,终于把打印自定义纸张大小搞定了(上)--IT man
  20. 华为obs python sdk 下载图片报错:NoSuchKey

热门文章

  1. Courses hdu 1083(匹配)
  2. Quaruts II 增量编译
  3. C# 动态添加SEO 信息,不和静态页面重复和叠加
  4. 水晶报表加载失败的解决方法
  5. c# 2.0 Factory的实现
  6. 那些值得思考的PHP问题
  7. 亚信安全协助绿谷制药确保“秘方”安全
  8. 锡山国土推行数据中心“在线变更”
  9. 《云计算:概念、技术与架构》一1.1 本书目标
  10. 堆栈溢出从入门到提高