zoukankan      html  css  js  c++  java
  • 初学HTML 06

    普通流定位
    普通流,又称为文档流
    块级元素:从上到下一个一个的排列
    行内元素:一行内从左到右的排列

    浮动定位

    将元素排除在普通流之外,即脱离文档流
    浮动元素不会占据页面空间
    浮动元素会放置在"包含框"的左边或右边
    浮动元素依旧位于包含框之内
    浮动元素可以向左或向右浮动,直到碰见包含框的边缘或另一个已浮动的元素框为止

    特点
    1、浮动元素边缘不会超过其父元素的边缘
    2、浮动元素不会重叠
    3、浮动只能左右浮动,不会上下浮动
    注意:非块级元素浮动的话,那么将会变成块级元素,允许修改 width 和 height

    处理问题
    1、让块级元素在同一行内显示
    2、修改行内元素的 width 和 height

    浮动属性
    属性:float
    取值:
    none
    left
    right

    清除浮动所带来的影响:
    属性:clear
    取值:left
    right
    both

    显示方式
    1、display
    none:生成元素没有框,不占据页面空间,隐藏
    block:按块级显示
    inline:按行内方式显示
    inline-block:行内块,所有的元素在一行内显示,允许修改width 和 height

    控制元素的显示与隐藏
    隐藏:display:none;
    显示:
    块级 :display:block
    行内 :display:inline

    2、将行内元素变成块级 或 行内块
    目的:修改行内元素的宽和高

    显示效果
    1、visibility
    可见性
    取值:
    visible :默认值,可见的
    hidden :元素不可见,占据页面空间
    collapse :用在表格上

    问题:visibility:hidden 与 display:none的区别

    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 : 等待
    help : ?

    相对定位

         元素框会相对于他原来的位置 偏移某个距离

    如何用

           position:relative

           left:尺寸

           right:尺寸

    什么时候用

           元素本身位置的微调

           配合绝对定位使用

    绝对定位

    定义:脱离文档流  不占据页面空间

     初始位置

           相对于最近的已经定位的元素  那么参考位置相对于body进行定位

    如何使用

         position:absolute;

      使用场合

         弹出菜单

  • 相关阅读:
    多维数据查询OLAP及MDX语言笔记整理
    家庭记账本第三次开发
    家庭记账本第二次
    家庭记账本第一次
    使用Postman工具做接口测试(四)——参数化、执行用例与生成测试报告(完结篇)
    使用Postman工具做接口测试(三)——断言与参数提取
    使用Postman工具做基本测试(二)环境变量和请求参数格式
    使用Postman工具做接口测试(一)安装基本功能介绍和简单使用
    <unittest>
    $(document).on和$('#idname').on和$(function(){ })区别
  • 原文地址:https://www.cnblogs.com/nnnnmmmm/p/10419185.html
Copyright © 2011-2022 走看看