zoukankan      html  css  js  c++  java
  • 2019.4.4 盒模型&定位&浮动

    盒模型

    盒模型

    除了图片表单元素之外,基本所有标签都可以看做一个盒子

    盒模型的要素

    父子关系之间用padding
    兄弟关系之间用margin
    margin padding border 后面跟的值的顺序 上右下左
    如果跟了一个值 :上下左右
    如果跟了两个值 :上下 左右
    如果跟了三个值 : 第四个和右一样 上 左右 下
    如果跟了四个值 :上 右 下 左

    width和height

    标签内容的宽高,不是盒子的宽高

    padding

    内边距
    内边距是标签内容和边框的距离
    padding的颜色和标签内容一致

    margin

    外边距
    外边距是标签相对于父标签和兄弟标签的距离

    块标签居中

    给本身添加margin:0 auto

    其实是设置没有边框然后自动

    注意设置垂直方向的margin值时看好执行顺序

    垂直方向margin值的合并

    兄弟标签之间margin会相互重叠,以大的margin为准

    border

    边框
    solid 实线
    dashed 虚线
    dotted 点线
    ridge 3d线
    border-bottom/top/right/left 上下左右border



    浮动

    行标签被浮动后可以设置宽高当成块标签使用

    正常浮动(一旦浮动后脱离标准流)

    如果某个标签A是浮动的 假如A标签的上一个标签也是浮动的 那么A就会跟在上一个标签后面
    如果一行放不下两个标签 A就会被挤到下一行

    如果上一个元素是标准流元素 那么A相对的垂直位置不会改变

    div的顺序是由HTML代码顺序决定


    清除浮动

    overflow和clear

    • 对于父标签
      • 在父类标签中添加overflow:hidden
      • 为了让父标签能包住子元素的浮动标签
    • 对于兄弟标签
      • 在标签中添加clear
      • 清除浮动可以让浮动标签复原成块标签的状态

    消除img标签一像素的边框的方法:

    • 浮动
    • vertical-align: middle

    浮动总结

    • 浮动元素的特点

      • 浮动元素不占文档流
      • 任意标签设置成浮动后,统称浮动元素,具有其本身特点,不再是行块标签
      • 浮动元素由内容撑开宽高,可以设置宽高
    • 使用时注意:

      • 清浮动
      • 如果有浮动元素的子标签,则所有子标签浮动

    定位

    相对定位

    相对定位是相对于自己原来的位置(一旦被定位后不会脱离标准流,不改变标签的特性)
    如果两个标签都被定位 那么后来定位的会覆盖之前定位的
    微调时候使用
    给绝对定位当定位父级

    绝对定位

    绝对定位是相对父级标签的绝对定位(找被定位过的离得最近的祖宗标签 如果都没改过就是相对html文件)
    一旦定位后脱离标准流

    固定定位

    不占文档流
    将设置成定位的标签成为定位元素
    固定定位会把元素固定在某个位置(相对于浏览器进行定位,不会随着界面滚动而跟着移动)
    所有的方位值(top bottom left right )只能和position配合使用

    练习: 字穿线的写法


    代码:

  • 相关阅读:
    Thinkphp5 对接百度云对象存储 BOS (上传、删除)
    php 删除富文本编辑器保存内容中的其他代码(保留中文)
    ffmreg thinkphp 控制器 获取音频视频详细信息(获取时长)
    selenium+testng+java+poi进行excel的数据参数化
    linux中磁盘配额管理
    linux中挂载和卸载文件系统
    linux中vi编辑器的练习
    Linux基础命令
    Nginx流量复制
    Python脚本
  • 原文地址:https://www.cnblogs.com/lzb1234/p/10654516.html
Copyright © 2011-2022 走看看