浮动、定位

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/56843119

盒模型

盒模型默认指块级元素;行内元素默认不能设置width、height、margin 行内元素==>块级元素: display:block 块级元素==>行内元素: display:inline 注意: 1. disply:inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块

使用盒模型

创建浮动盒

可以使用float属性创建浮动盒(脱离文本流),浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。

说明

left

移动元素,使其左边界挨着包含块的左边界,或者另一个浮动元素的右边界

right

移动元素,使其右边界挨着包含块的右边界,或者另一个浮动元素的右边界

none

元素位置固定

注意事项:

  • 同级的一个元素浮动其他的元素也要浮动
  • 浮动脱离文本流,父元素的宽、高不会被撑开
  • 子元素浮动父元素一定要清除浮动
  • 浮动的行内元素可以设置宽、高

示例:父元素不设置高、宽

<div class="content">
    <div style="float: left;"></div>
    <div style="float: right;"></div>
</div>

浮动产生负作用

  • 边框不能撑开
  • 背景不能显示:如果父级设置了背景,而父级不能被撑开,所以导致不能显示。
  • margin padding不能按设置值正常展示:

清除浮动方法

  • 浮动元素的同级元素添加一个空标签 .clear{clear: both} <div class="clear"></div>
  • 浮动元素的父级元素添加下述样式 overflow:hidden 或者 display:table
  • 浮动元素的父级元素使用伪类属性(常用) .clearfix:after{content:""; display:block; clear:both;} .clearfix{zoom: 1;}

通过上述三种方法的任意一种,可展示正常

创建布局

定位属性

属性

说明

position

设置定位

left|right|top|bottom

为定位元素设置偏移量

z-index

设置定位元素的层叠顺序

注意:“left”、”top”、”right”、”bottom”以及”z-index”属性只有设置了定位(除static)才生效。

定位类型

说明

static

默认值,元素为普通布局

relative

相对定位,元素位置相对于普通位置定位

absolute

绝对定位,元素相对于position值不为static的第一位祖先元素来定位(脱离文本流)

fixed

固定定位,元素相对于浏览器窗口来定位(脱离文本流)

<!-- 页面通用样式 -->
<style type="text/css">
  .content {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    color: #fff;
  }
  .content div{
    width: 100px;
    height: 100px;
    border: 1px solid;
    text-align: center;
    line-height: 100px;
  }
</style>
<!-- 定位样式 -->
<style>
  .static {
    position: static;
    background: red;
  }
  .relative {
    position: relative;
    top: 50px;
    left: 50px;
    background: black;
  }
  .absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background: blue;
  }
  .fixed {
    position: fixed;
    top: 50px;
    left: 50px;
    background: blue;
  }
</style>

<!-- 页面结构 -->
<div id="content"></div>
<div id="content">
    <div class="static">static-1</div>
    <div class="static">static-2</div>
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
    <div class="fixed">fixed</div>
</div>

相对定位(relative):相对于自己原位置进行偏移,在文本流中的位置依然存在,不脱离文档流

绝对定位(absolute):对于position值不为static的第一位祖先元素来定位(未找到,则相对body元素),在正常流中的位置不在存在,脱离文档流

固定定位(fixed):一直位于可视窗口的指定位置,不受滚动条影响,脱离文档流

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS基础知识

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • css-height

    ​ 一个div块级元素没有为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那...

    奋飛
  • HTML5-创建HTML文档

    HTML5中的一个主要变化是:将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义,内容的呈现则由应用于元素...

    奋飛
  • 微信小程序-元素的定位相对绝对固定

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    叉叉敌
  • 脱离文档流分析(转)

      block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置widt...

    山河木马
  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • python基础语法

    Python 中同样可以使用 map、reduce、filter,map 用于变换数组:

    周小董
  • [Java面试九]脚本语言知识总结.

    一枝花算不算浪漫
  • 关于最近react许可证的问题

    客观的说,个人是非常喜欢react的。有人说学习曲线陡峭,有人说太繁琐。。。但是当你真正开始接触的时候,你一定会被他的魅力所吸引。毫不夸张的说,React在推动...

    Nealyang
  • 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    Sb_Coco

扫码关注云+社区

领取腾讯云代金券