文档章节

position:relative和absolute以及css height

phala
 phala
发布于 2015/07/31 00:27
字数 448
阅读 36
收藏 0


|position属性

    <无论怎样设置

        始终文字框都无法紧贴浏览器边框……剩下的缝隙简直诱发强迫症

body { overflow: hidden;}

.container{position:relative;
            z-index:998;
            padding:2rem;top: 0px; left: 0em;
            height:60em;
            width: 20%;
            text-align : right;}


        这样这样,把position : relative改为position:absolute就可以了。

 <完美!:D

static :       无特殊定位,对象遵循HTML定位规则 
absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框 
relative :    对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 
fixed :        IE5.5及NS6尚不支持此属性 

         就是那句,对象不可层叠!!!所以不管怎样top:0和left:0都没用。



|css高度点我


            CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用


PX,em等常用使用PX(像素)为html单位。


          height默认是auto,自适用内容而增高

         ”通常单独对一个div高度为百分比没有效果“看到这句话我……ORZ

         不过,总有解决的办法,DIV的CSS height:100%无效的解决办法

body{ margin:0; height:100%; }
.container { height: 100%;}

        其实就是给body也加上height:100%的属性


|overflow


      
  定义overflow 属性规定当内容溢出元素框时发生的事情。

        可能的值:visible | hidden | scroll | auto | inherit

        height:60em 去掉,因为body还设置了overflow: hidden  所以干脆height值设大一点就当高度满屏。……不过现在就完美解决了~

        设置为hidden可以免去丑陋的进度条,关于overflow属性的详细介绍 点我

© 著作权归作者所有

phala
粉丝 6
博文 104
码字总数 53470
作品 0
成都
程序员
私信 提问
CSS代码实例:用CSS代码写出的各种形状图形

CSS代码实例:用CSS代码写出的各种形状图形 一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码。整合了一下,有错误欢迎指出。 1.正方形 #square { width: 100px; height: 100px; b...

九夏光年
2017/05/21
0
0
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
3.1K
0
各浏览器下图片垂直居中的方法:

各浏览器下图片垂直居中的方法: 1.IE6下使用writing-mode:tb-rl;当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算...

0000001
2011/05/10
319
0
CSS中Position、Float属性深入探讨

 对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及...

cnu2m
2016/03/01
20
0
移动端position图片定位问题记录,以防再犯

刚开始接触移动端制作,其中遇到的问题: 在一个图片上定位另一个图片,兼容不同手机,解决方法是: 以下是我两个弹层的html代码: 做法是给lay层将大图设置为背景,其大小为图片大小,然后需...

南山有台
2018/04/11
88
0

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
54分钟前
3
0
Kafka 2.3 Producer (0.9以后版本适用)

kafka0.9版本以后用java重新编写了producer,废除了原来scala编写的版本。 这里直接使用最新2.3版本,0.9以后的版本都适用。 注意引用的包为:org.apache.kafka.clients.producer import ja...

实时计算
今天
3
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
15
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部