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 ...
随机推荐
- Async/await语法糖实现(Generator)
// generator也是一种迭代器(Iterator) 有next方法,并返回一个对象{value:...,done:...} function run(generatorFunction) { ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 【codeforces 510D】Fox And Jumping
[题目链接]:http://codeforces.com/contest/510/problem/D [题意] 你可以买n种卡片; 每种卡片的花费对应c[i]; 当你拥有了第i种卡片之后; 你可以在任 ...
- [POJ1226]Substrings(后缀数组)
传送门 给定 n 个字符串,求出现或反转后出现在每个字符串中的最长子串. 算法分析: 这题不同的地方在于要判断是否在反转后的字符串中出现.其实这并没有加大题目的难度. 只需要先将每个字符串都反过来写一 ...
- 同开三本DJANGO,需要提升一下本职工作的能力啦
慢慢将一些概念固化到基因内,才有可能和SPRING MVC,MEAN之类的好好作比较吧. 全都是基于1.8版本的教材,爽!!!
- ZooKeeper环境搭建(单机/集群)(转)
前提: 配置文件主要是在$ZOOKEEPER_HOME/conf/zoo.cfg,刚解压时为zoo_sample.cfg,重命名zoo.cfg即可. 配置文件常用项参考:http://www.cnbl ...
- Spring MVC-集成(Integration)-Hibernate验证器示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_hibernate_validator.htm 说明:示例基于Spring MVC ...
- alexanderanokhin ---DTRACE
https://alexanderanokhin.wordpress.com/2011/11/13/dynamic-tracing-of-oracle-logical-io/
- 淘宝信海龙 --PHP系统
https://yq.aliyun.com/users/1467229535950742?spm=5176.100239.blogrightarea56002.3.RoToxZ
- IntelliJ IDEA中出现could not auto wired错误提示处理方式
IntelliJ IDEA中出现could not auto wired错误提示处理方式 程序可以正常运行,就是出现错误提示: 学习了:http://blog.csdn.net/xlxxybz1314 ...