专栏首页杨龙飞前端dispaly属性,position属性

dispaly属性,position属性

position:absolute;绝对定位相对于父元素(父元素设为relative)

position:relative;相对定位相对于自己

position:fixed;固定定位相对于浏览器

display:inline;行内元素,不换行,text-align:center不起作用

display:block;块级元素,换行,能设置宽高

display:inline-block;能设置宽高,不换行,text-align:center起作用

注意,如果父元素不设置高度的话,子元素浮动,或者绝对定位的话,撑不开父元素的高度,最终父元素的高度为0

自适应居中

<div class="title">
    <span class="message">等待钣金</span>
    <span class="num">12</span>
</div>
.content .title span{position: relative;top:12px;height:15px;line-height: 15px;}
.content .title span:last-child{display:inline-block;font-size: 14px;color:white;border-radius: 15px; background-color:#c19b74;width:27px;}

上下左右自适应
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #test{
            position: relative;
            width:100px;
            height:100px;
            background: green;
        }
        img{
            position: absolute;
            margin-top: auto;
            margin-bottom : auto;
            top: 0;
            bottom: 0;
            height:100%;
        }
    </style>
</head>
<body>
<div id="test">
<img>
    </div>
</body>
</html>
只是对img有用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML&CSS03_CSS选择器定义

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674
  • HTMLCSSJQUERY知识点分解视频下载地址

    http://pan.baidu.com/s/1geAnUrp ? ?

    用户1730674
  • 当iOS的webView加载Html页面之后

    写到webView这块,硬生生堵了好久。现将问题记录如下。 问题一:加载webView之后浏览网页,有时程序会莫名其妙奔溃,查看内存居然高达上百兆。查阅网上资料...

    谦谦君子修罗刀
  • HTML&CSS01_html语法

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674
  • HTML&CSS06_默认布局级别

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674
  • HTML&CSS07_浮动和定位布局

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674
  • 轮播图中点按钮停止后等几秒再自动播放的代码

    <!doctype html> <html> <head> <script src="jquery.js"></script> <style> div{floa...

    用户1730674
  • HTML&CSS02_CSS语法

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674
  • HTML&amp;CSS07_浮动和定位布局

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674
  • HTML&CSS04_选择器优先级

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    用户1730674

扫码关注云+社区

领取腾讯云代金券