CSS的常用属性(三)
静态定位
position: static (默认) 标准流
绝对定位
position: absolute
特点:
- 元素使用绝对定位之后,不占据原来的位置(脱标)
- 元素使用绝对定位,位置是从浏览器出发
- 嵌套的盒子,父盒子没有使用定位,子盒子使用绝对定位,子盒子位置是从浏览器出发
- 嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素出发
- 行内元素使用绝对定位,转化成行内块元素
注意: 使用绝对定位的元素可以覆盖到其他元素上面,使用z-index属性来控制堆放次序
相对定位
position: relative
特点:
- 使用相对定位,位置从自身出发
- 还占据原来的位置
- 行内元素使用相对定位,不能转成行内块元素
补充: 常用的定位方式为子绝父相(子元素绝对定位,父元素相对定位)
固定定位
position: fixed
特点:
- 位置从浏览器出发
- 固定定位之后,不占据原来的位置(脱标)
- 元素使用固定定位,会转化成行内块元素
隐藏元素
overflow: hidden 溢出隐藏
visibility: hidden 隐藏元素(隐藏之后还占据原来位置)
display: none 隐藏元素(隐藏之后不占据原来的位置)
补充:内容移除:text-indent: -5000em 或者 将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow: hidden
元素垂直对齐方式
vertical-align: baseline 设置元素的垂直对齐方式
baseline(默认) 元素放置在父元素的基线上
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
middle 把此元素放置在父元素的中部
CSS的常用属性(三)的更多相关文章
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- CSS 背景常用属性
CSS 背景常用属性 background-color 这个属性过于简单, 以下写法均可 background-color:red; background-color:rgb(0,0,255); ba ...
- css+div常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- CSS HTML 常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- css 样式常用属性
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:< cs ...
- css之常用属性
背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...
- CSS的常用属性(一)
文本属性 font-size: 16px 文字大小 font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了) 不推荐使用font-weight: bold font- ...
- CSS的常用属性(二)
盒子模型之边框 border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线,dotted 点线,dashed 虚线) border-top ...
随机推荐
- PHP常用系统设置整理
1.设置时间脚本执行时间 set_time_limit(0); 2.设置最大执行内存 ini_set('memory_limit','1024M');//设置内存 memory_get_usage() ...
- win10 Ubuntu子系统安装&odoo10社区版安装
参考文档: http://www.cnblogs.com/odoouse/p/5995603.html https://www.jianshu.com/p/58090215bda8 一.win10 U ...
- C#关键字详解第四节
位 Unicode 字符 char在C#中与C语言不同,他表示的是16位无符号进制的数,在计算机中他是被用来存储字符但是他只能用来存 储一个文字,与string不同string可以存储多个文字或字符, ...
- 【codeforces 514C】Watto and Mechanism(字符串hash)
[题目链接]:http://codeforces.com/contest/514/problem/C [题意] 给你n个字符串; 然后给你m个询问;->m个字符串 对于每一个询问字符串 你需要在 ...
- OpenStack命令行工具与API
Openstack命令行工具 我们推荐Openstack命令行工具和Openstack的Dashboard两者结合使用.一些用户由于使用过其他云技术背景的,可能会使用EC2兼容的API,相对于我们需要 ...
- NOI2017爆零记[AFO]
WC2017 12分……全省第一…… APIO2017 4分……全省第二…… 千言万语汇成两个表格 NOI2017 114分(笔试100+一试4+二试5+A类5)……全省第三…… 全场最菜…… day ...
- 手工MAVEN建立WEBAPP项目并打包部署
参考URL: http://my.oschina.net/zimingforever/blog/266028 最简单的东东,可以就两条命令: 建立目录及POM.XML: mvn archetype:g ...
- nyoj_60_谁获得了最高奖学金_201311281117
谁获得了最高奖学金 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取 ...
- ArcGIS api for javascript——加载查询结果,悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- HTML5开发移动web应用——SAP UI5篇(7)
SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...