会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132850个问题
JAVA 全系列/第九阶段:Spring Boot实战/Spring Boot 4412楼
JAVA 全系列/第九阶段:Spring Boot实战/Spring Boot 4413楼
JAVA 全系列/第八阶段:SpringBoot与MybatisPlus/Spring Boot旧 4414楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:805px;
            height:303px;
            border:5px solid brown;
            margin:100px auto;
            column-count:3;
            column-gap:10px;
            column-rule:solid 10px red;
            display:table-cell;
            vertical-align: middle;
        }
        /*p{
            display:table-cell;
            vertical-align: middle;
        }*/
    </style>
</head>
<body>
<div class="box">
    我想.那只是一刹那的心动吧.在人生中.一切的偶然太多.一切的不舍太多.一切的懵懂太多.一切的一切太多.就在刚刚明白的那一瞬间.却又懂得了离别.太美的错误因为太年轻.太美的承诺因为太无知.总在自己最脆弱的时候突然说要离开.是我太笨?还是青春太傻?是我太傻?还是时间太快?我不知道.自己到底是怎么一回事.在青春的愚昧中.我束手无策.
      就算鸟依旧要飞.就算风依旧要散.就算青春依旧会走.我还有什么办法去挽回花儿那段灿烂的时光呢?青春.是年少的冲动.青春.是懵懂的岁月.青春.是情窦的初开.青春.是回忆的见证.我的青春.我的冲动.我的年少.我的无知.我的心动.
      那些因为青春所许下的诺言.那些因为青春所留下的感悟.那些因为青春所犯下的错误.那些因为青春的种种种种.如装订的小说.一页一页的在我脑海中翻来覆去.剩下了些什么呢?是依依不舍.还是痛彻心扉?

</div>
</body>
</html>

问题一:本来想实现块级元素居中,多行文本在块级元素中垂直居中。我就用了display,但这样margin就失效了。有什么其他办法可以实现吗?

问题二:我试了用<p></p>标签,选择器里的display就不生效了,这是因为什么?display的适用范围吗?

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS盒子模型 4416楼
Python 全系列/第五阶段:数据库编程/MySQL数据库的使用 4417楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 4419楼

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 4422楼
Python 全系列/第二阶段:Python 深入与提高/模块 4423楼
Python 全系列/第九阶段:Flask百战电商后台系统/Flask百战电商后台项目 4424楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width:30px;
            height:15px;
            border: 1px solid black;
            line-height: 15px;
            align:center;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="0"/>  <!--value是当前值-->
<div></div>
<script>
    var div=document.querySelector("div");
    var input=document.querySelector("input");
    var flag=false;
    input.onmousemove=function(){
        div.innerHTML=input.value;
        if(flag) {
            //console.log("(x,y)的值为(" + event.clientX + "," + event.clientY + ")");

            if (event.clientX > 134) {event.clientX = 134;}
            if (event.clientX < 14) {event.clientX = 14;}
            div.style.left = event.clientX + 'px';//style对象的属性值都是字符串,单位包括在字符串中。所以这里用连接符,连接一个字符,使其变成字符串。
            div.style.display = 'block';
        }
    }
    input.onmousedown=function(){//鼠标按下时触发
        flag=true;
        div.style.display='none';
    }
    input.onmouseup=function(){//鼠标抬起时触发
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

我这个绝对定位,距离左边距离的这个功能不能实现。div到第一个位置停止了,但我的程序出来效果图div还可以继续移动

blob.png

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 4425楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637