css定位的各属性占位问题
CSS position 属性
不定位
- static
- 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- 相对于自己的原位置定位(占用偏离前原位置)
- relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- 当前位置绝对定位 (不占位)
- absolute
- 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- 浏览器绝对定位 (不占位)
- fixed
- 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
css定位的各属性占位问题的更多相关文章
- css进阶----盒子模型,Reset CSS,css浮动,css定位,z-index属性
盒子模型 把页面上的每一个元素当成一个盒子 由内容,内边距,边框,外边距组成 盒子模型举例 <!DOCTYPE html> <html lang="en"> ...
- CSS定位以及z-index属性(层叠性)的详解(转)
https://blog.csdn.net/weixin_41342585/article/details/79484879
- css定位,class属性之间有空格与无空格的区别
中间有空格的情况 是选择到.class1类下的.class2类子节点,即.class2类的节点要是.class1类子节点 <style> .class1 { color: black; } ...
- css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性)
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS定位的属性值
关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
随机推荐
- 环境搭建 - Maven(Windows)
Maven环境搭建 本文以windows7下搭建Maven-3.5.0为示例 下载Maven压缩包 网址:Maven 非C盘根目录下新建文件夹:Maven D:\Maven 在Maven目录下新建文件 ...
- 开源前端脚本错误监控及跟踪解决项目BadJS试用
摘要: 试用BadJS. 原文:开源前端脚本错误监控及跟踪解决项目-BadJS 试用 作者:过错 Fundebug经授权转载,版权归原作者所有. BadJS 是 一个web 前端脚本错误监控及跟踪项目 ...
- 从头认识一下docker-附带asp.net core程序的docker化部署
从头认识一下docker-附带asp.net core程序的docker化部署 简介 在计算机技术日新月异的今天, Docker 在国内发展的如火如荼,特别是在一线互联网公司, Docker 的使用是 ...
- MySQL外键设置中的的 Cascade、NO ACTION、Restrict、SET NULL
例如: ALTER TABLE stuinfo ADD CONSTRAINT fk_stuinfo FOREIGN KEY(gradeid) REFERENCES grade(id) ON DELET ...
- 微信小程序基本目录结构学习
今天我们就以firstdemo为例,介绍一下小程序的基本目录结构.当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文 ...
- Python+ITchart实现微信中男女比例,城市分布统计并可视化显示
直接上代码: import itchat import os import csv import pandas as pd from pyecharts import Bar,Pie,Geo impo ...
- 各种文件用JS转Base64之后的data类型
1.txt data:text/plain;base64, 2.doc data:application/msword;base64, 3.docx data:applicat ...
- typora快捷键
目录 基础信息 常用快捷键 修改快捷键 基础信息 typora是一款极佳的markdown写作软件,编辑和预览两者合二为一,免费良心软件,推荐使用. 官网:https://www.typora.io/ ...
- 文件操作命令(move)
move命令: // 描述: 将一个或多个文件从一个目录移动到另一个目录. // 语法: move [{/y | /-y}] [<Source>] [<Target>] // ...
- 固态+机械双硬盘分别安装Win10和Ubuntu16.04双系统
博主的笔记本是256G固态+1T机械,固态事先已经安装好了Win10系统,想着把机械硬盘分出500G用来安装Ubuntu16.04,剩余的继续用作Win下的资料盘.这里不介绍安装Win10过程,也不记 ...