css中元素的位置
一.display
1.display:none 隐藏标签
2.display:inline 将块级标签改为内联标签
3.display:block 将内联标签改为块级标签
4.display:inline-block 块级内联兼并,不独占一行,可以设置宽高
二.float浮动
任何元素都可以浮动,浮动后就变成了块级标签,它会尽可能窄,造成塌陷,所以要clear清除浮动(relative也属于浮动)
1.float:none 默认值,不浮动
2.float:left 左浮动
3.float:right 右浮动
三.clear
.clearfix:after {
content: '';
display: block;
clear: both;
}
clear清除浮动后父级标签塌陷
1.clear:left 左侧不允许有浮动
2.clear:right 右侧不允许有浮动
3.clear:both 两侧都不允许有浮动
四.overflow溢出
overflow-x\overflow-y能独自设置x\y轴的内容
1.overflow:visible 默认值,不会做出任何处理
2.overflow:hidden 隐藏溢出内容
3.overflow:scroll 滚动溢出内容
五.position定位
1.position:relative 相对自身位置移动
2.position:absolution 根据有relative的父级以上级别(都没有就按body)的位置作为相对位置进行移动
3.position:fixed 根据窗口进行移动
left\right\top\bottom:10px
六.z-index
如果定位后覆盖了其他标签,又想优先显示其他标签,就可以用z-index给标签设置优先级
z-index:1000; 谁的数值大就优先显示谁
七.opacity
给标签内所有内容定义透明度
css中元素的位置的更多相关文章
- CSS中常见的位置(position)属性
常用的位置属性列表: position(top.bottom.left.right) .overflow.z-index position用法: 值 描述 relative 相对定位,原位置仍占用空间 ...
- css中元素定位
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...
- css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: ht ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- java android 将 List中元素互换位置
很多时候我要对List中的元素调换位置,这时候可以用如下代码,意思是将data中的index1与index2元素互换位置 //data 为List Collections.swap(data,inde ...
- CSS中元素的显示模式
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...
- css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- CSS中属性position位置详解功能讲解与实例分析
position有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页制作时,没有指定 ...
随机推荐
- LibreOj 6279数列分块入门 3 练习了一下set
题目链接:https://loj.ac/problem/6279 推荐博客:https://blog.csdn.net/qq_36038511/article/details/79725027 这题区 ...
- android.support.v4与Android.support.v7
Android提供了android.support.v4和android.support.v7两个库,以便低版本API可以使用高版本API的功能. Fragment(碎片)类,是在Android 3. ...
- Android Studio生成签名安装包(Generate Signed APK)
一 打开构建对话框. 二 创建新的密钥库(key store) 可以选择已创建的密钥库,也可以选择创建新的密钥库. 创建完成后,自动导入. 三 选择签名类型. 如果不选,会提示错误. 这里将新旧两种签 ...
- Netty实践二(心跳检测)
我们使用Socket通信一般经常会处理多个服务器之间的心跳检测,一般来讲,我们去维护服务器集群,肯定要有一台或几台服务器主机(Master),然后还应该有N台(Slave),那么我们的主机肯定要时时刻 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- 【Android端】代码打包成jar包/aar形式
Android端代码打包成jar包和aar形式: 首先,jar包的形式和aar形式有什么区别? 1.打包之后生成的文件地址: *.jar:库/build/intermediates/bundles/d ...
- Union and Intersection of two sorted lists 并集和交集
跟面试官确认是arrayList还是singly-linked list /* Union 并集:两个升序的list a, b, 返回其并集(升序排序)*/ public class UnionTw ...
- day 14 项目目录规范; time ; logging
import sys print(sys.modules) 程序一运行,解释器将里面的所有内容全部加载到内存 项目目录规范: 代码不可能全部只写在一个文件,十几万行代码,调整,修改都很不方便. 所 ...
- 免费证书https://lamp.sh/ssl.html
https(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的 http 通道,简单讲是 http 的安全版.即 ht ...