加一行css代码，使得指定样式的div宽度为0

问题描述：

这是我今天遇到的一道面试题：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
        }
        #demo {
            height: 20px;
            margin: 0 0 0 50px;
            padding: 0 20px 0 0;
            border-left: 5px solid #eee;
            border-right: 5px solid #eee;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="demo"></div>
    </div>
</body>
</html>

要求：给#demo上面加一行代码，使得#demo的宽度为0.
我是回答不上来，求大神讲解。

答

display: table-column;
使用这句就可以变为0了，意思就是，此元素会作为一个单元格列显示（类似

），
其实display，取值为下面任意一个，都能达到这个目的。
table-row-group
table-header-group

table-footer-group

table-column-group

table-column

详情可以参考
http://www.runoob.com/cssref/pr-class-display.html

答

 #demo {width:0;

答

不就是 width:0px;么

答

试下设置优先级
#demo {width:0!important }

答

display : none;

答

display: table-column;

 使用这句就可以变为0了，意思就是，此元素会作为一个单元格列显示（类似 <col>）

其实display，取值为下面任意一个，都能达到这个目的。

table-row-group

table-header-group

table-footer-group

table-column-group

table-column

详情可以参考

http://www.runoob.com/cssref/pr-class-display.html

答

#demo{
width:0;}

加一行css代码，使得指定样式的div宽度为0

相关推荐