文档章节

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
朝阳
程序员
什么是BFC?

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

_YM雨蒙
02/02
0
0
[分享] 纯CSS完美实现垂直水平居中的6种方式

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

没错就是酱紫
2016/07/29
24
0
浮动元素容器的clearing问题

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

阮一峰
2009/04/06
0
0
前端计划——面试题总结-CSS篇

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

Alarak
2017/08/14
0
0
css深入理解之overflow

第一回 overflow基本属性 overflow基本属性 visibel hidden scroll auto inherit overflow-x和overflow-y overflow-x和overflow-y设置一样的值,等同于overflow。如果不同,其中一个赋予vis...

仲柯
2017/03/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之高级类型的多态的 this类型

转发 TypeScript基础入门之高级类型的多态的 this类型 高级类型 多态的this类型 多态的this类型表示的是某个包含类或接口的子类型。 这被称做F-bounded多态性。 它能很容易的表现连贯接口间的...

durban
18分钟前
0
0
tomcat中的几种log catalina localhost

体会 catalina.out catalina.log 是tomcat的标准输出(stdout)和标准出错(stderr) cataliana.{yyyy-MM-dd}.log和localhost.{yyyy-MM-dd}.log 是通过logging.properties配置的tomcat自己运行的......

onedotdot
40分钟前
1
0
Oracle return exit continue

常在循环体中看到下面3种语句: return exit continue 举例说明 啥都没有 -- none begin for i in 1 .. 10 loop if i < 5 then dbms_output.put_line('i < 5, i = ' || to_char......

taadis
今天
3
0
JSONObject 转换时出错 InvocationTargetException

JSONObject 转换时出错java.lang.reflect.InvocationTargetException 一时看不出来是什么问题。 挺奇怪的。 百度参考了一下这个 网页的解决方案 说是类型不对,空? 仔细查看代码,果然是有一...

之渊
今天
3
0
no such module 'pop'问题

在github上 clone 了一个 swift 项目,编译时提示"no such module 'POP'"错误,查了一下居然是因为podfile中指定的最低版本是iOS 11.0,大于我测试手机的iOS版本10.3.3,将Podfile中的最低版...

yoyoso
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部