文档章节

CSS-display,overflow,CSS定位

人间四月
 人间四月
发布于 2015/12/01 15:07
字数 498
阅读 37
收藏 0

display

  • 功能:规定网页元素如何显示的问题

  • 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示)

  • block:可以实现行内元素转换成块元素

  • inline:可以实现将块元素转化成行内元素


overflow

功能:当内容溢出时,溢出的内容改该如何显示

取值:visible(可见的),hidden(隐藏),scroll(出现滚动条),auto(自动)


cursor

光标类型:网页中光标的类型

取值:help,wait,hand,pointer,,,


CSS定位

  • position:元素定位方式

    • 取值:static,fixed,relative,absolute

    • static:静态定位(默认状态,不定位)

    • fixed:固定定位

    • relative:相对定位

    • absolute:绝对定位

    定位方式配合定位坐标一起使用

  • 定位坐标:指定定位的元素,便宜目标元素的距离

    • left:目标元素左边的距离

    • top:上边

    • right:右边

    • botton:下边


  1. 固定定位:position:fixed

    1. 固定定位,是相对于浏览器窗口来进行的定位

    2. 固定定位,不占空间,层级要高于普通元素

    3. 固定定位,如果不指定定位坐标的话,固定定位元素的位置保持不变

  2. 相对定位:positon:relative

    1. 相对定位,是相对于“原来的自己”的位置进行定位

    2. 相对定位,仍然占用空间,层级要高于普通元素

    3. 相对定位,如果不指定定位坐标的话,固定定位元素的位置保持不变

    4. 相对定位一般配合绝对定位使用

  3. 绝对定位:position:abslute

    1. 绝对定位,相对于祖先(相对或绝对)定位元素来进行的定位

      1. 如果该元素上级元素没有进行定位的话,一直向上层寻找定位,最终相对于body进行定位

    2. 绝对定位,不占空间,层级高于普通元素

    3. 绝对定位,如果不指定定位坐标的话,固定定位元素的位置保持不变




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 2
博文 74
码字总数 30455
作品 0
朝阳
程序员
私信 提问
浮动元素容器的clearing问题

网页设计时,我经常遇到下面这个问题,一直不知道怎么解决。 今天,总算全部理解了,一定要写下来。 1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素,如图一...

阮一峰
2009/04/06
0
0
什么是BFC?

Block Formatting Context css规范对它的定义 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和'overflow'不为'visible'的块盒会为它们的内容建立...

_YM雨蒙
02/02
0
0
详说 Block Formatting Contexts (块级格式化上下文)

在上文《详说清除浮动》中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性...

我是潮汐
2013/08/16
0
0
[分享] 纯CSS完美实现垂直水平居中的6种方式

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是...

没错就是酱紫
2016/07/29
24
0
前端计划——面试题总结-CSS篇

前端面试之CSS篇 1、三种基本引入方式 外部样式表 内部样式表 内联 这是一个段落。 2、CSS的引入方式中link和@import的区别 link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@im...

Alarak
2017/08/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
16分钟前
1
0
可重入锁和非可重入锁

广义上的可重入锁指的是可重复可递归调用的锁,在外层使用锁之后,在内层仍然可以使用,并且不发生死锁(前提得是同一个对象或者class),这样的锁就叫做可重入锁。 可重入锁: ReentrantLoc...

狼王黄师傅
21分钟前
1
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
34分钟前
1
0
使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

阿K1225
44分钟前
2
0
2天闭门培训|以太坊智能合约从入门到实战(北京)

2天培训 16个课时 探寻技术原理,精通以太坊智能合约开发 以太坊智能合约是现在应用的最广泛的区块链应用开发方式,HiBlock区块链社区针对以太坊智能合约的学习特别推出2天闭门研修班,通过2...

HiBlock
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部