position和display的取值及用法

  • position
    常用的值有none、inline、block、inline-block
    none
    1.表示该元素不会显示,并且该元素的空间也不存在,可理解为已删除;
    2.visibility:hidden只是将元素隐藏,但不会改变页面布局,但也不会触发该元素已经绑定的事件;
    3.opacity:0,将元素隐藏,不会改变页面布局,但会触发该元素绑定的事件。
    inline
    1.内联元素,与其他元素在一行;
    2.不可设置宽高;
    3.margin-top与margin-bottom无效,但margin-left与margin-right有效;
    4.padding-left与padding-right同样有效,但是padding-top与padding-bottom不会影响元素高度,会影响背景高度;
    5.常见的有<a>、<span>、<i>、<em>、<strong>。
    block
    块级元素,常见的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>
    inline-block
    1.行内块元素,即是内联元素,又可设置宽高以及行高及顶和底边距;
    2.常见的有<img>、<input>

  • display
    常用的值有static、relative、absolute、fixed。
    static
    默认值,元素出现在正常的文档流中,不会受left、top、right、bottom的影响。
    relative
    相对定位,相对自身位置定位,可通过设置left、top、right、bottom的值来设置位置;
    并且它原本所占的空间不变,即不会影响其他元素布局;
    经常被用来作绝对元素的容器块。
    absolute
    绝对定位,相对于最近的除static定位以外的元素定位,若没有,则相对于html定位;
    脱离了文档流,不占据文档空间;
    若设置absolute,但没有设置top、left等值,其位置不变;
    若设置absolute,会影响未定义宽度的块级元素,使其变为包裹元素内容的宽度。
    fixed
    固定定位 相对于浏览器窗口定位,脱离文档流,不会随页面滚动而变化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 574评论 0 5
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,583评论 0 0
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 987评论 0 1
  • 岁月,神奇的让人不知所措 做过什么 爱过什么 吃过什么样的苦 受过什么样的伤 愿意,或是不愿意,都将被忘记~ 曾经...
    E小慕阅读 317评论 0 0