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 ...
随机推荐
- c/c++排坑(5) -- c语言中的申明
C语言的申明总是令人头大,对于这块内容也一直让我头疼.希望通过这篇博客能够稍微梳理一下.材料和例子来源于<C专家编程> 一.C语言的申明的优先级规则 先来个例子,看看下面这行C代码到底是个 ...
- 棋盘DP三连——洛谷 P1004 方格取数 &&洛谷 P1006 传纸条 &&Codevs 2853 方格游戏
P1004 方格取数 题目描述 设有N $\times N$N×N的方格图(N $\le 9$)(N≤9),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字00.如下图所示(见样例): A ...
- PAT 1105 Spiral Matrix
This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...
- win7安装gmpy2
1.下载地址:https://pypi.python.org/pypi/gmpy2 2.安装python和pip python 安装 下载: https://www.python.org/getit/ ...
- 从零搭建流媒体服务器+obs推流直播
背景介绍 本文使用的流媒体服务器的搭建是基于rtmp(Real Time Message Protocol)协议的,rtmp协议是应用层的协议,要依靠底层的传输层协议,比如tcp协议来保证信息传输的可 ...
- [poj1698]Alice's Chance[网络流]
[转]原文:http://blog.csdn.net/wangjian8006/article/details/7926040 题目大意:爱丽丝要拍电影,有n部电影,规定爱丽丝每部电影在每个礼拜只有固 ...
- R语言 EFA(探索性因子分析)
EFA的目标是通过发掘隐藏在数据下的一组较少的.更为基本的无法观测的变量,来解释一组可观测变量的相关性.这些虚拟的.无法观测的变量称作因子.(每个因子被认为可解释多个观测变量间共有的方差,也叫作公共因 ...
- F2BPM 开发Api与RESTfull应用服务Api 层次关系及示例
目前越来越多的企业架构解决方案更加趋向于基于http协议“微服务”访问跨系统调用,而不使用统传的WebService调用,即通过RESTfull方式进行交互,更加轻量整合调用更加方便.本文档中所有F2 ...
- RDS for MySQL Online DDL 使用
https://help.aliyun.com/knowledge_detail/41733.html?spm=5176.7841698.2.17.u67H3h
- android 5.0新特性学习总结之下拉刷新(一)
android 5.0 后google最终在 support v4 包下 添加了下拉刷新的控件 项目地址: https://github.com/stormzhang/SwipeRefreshLayo ...