question1(display: block;和display: none;冲突吗)

        一、首先需要注意的是这里所说的display: block;是把它转换成块元素,display: none;是隐藏的意思,所以这里不会冲突的,接下来我们做一个测试代码如下(小米官网):

 注释:左边是html样式,右边是css样式

因为a标签是一个行内元素鼠标点击的时候只是字体会出来链接显示,所以一般都会把超级链接换成块元素

因为小米官网点击到例如小米手机页面的时候全部商品分类字样会隐藏,所以我们采用display: none;来把它隐藏效果图如下

 

这里就会被隐藏掉,因为display: none;隐藏不占据空间所以字体会向前补充上,这里我们为了能让他占用空间会采取visibility: hidden;这种隐藏方法是会占据空间的。

        二、为什么display: block;和display: none;会冲突

有的时候我们做页面的时候会忽略到权重值例如代码如下

 我们要是把选中的元素删除的话display: none;就会不显示出效果,这里的原因不是display: block;和display: none;冲突了,而是权重是的问题,删除掉的话权重是会变小,这样的话执行顺序就不对了,所以不会显示出应有的效果。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对你的需求,可以使用HTML和CSS实现一个有关“自然资源的保护与现状”的调查问卷,具体实现方式如下: HTML代码: ```html <div class="survey"> <h2>自然资源的保护与现状调查问卷</h2> <form> <div class="question"> <p>1. 您认为自然资源的保护意识普及情况如何?</p> <input type="radio" id="q1a" name="q1" value="a"> <label for="q1a">A. 很普及</label><br> <input type="radio" id="q1b" name="q1" value="b"> <label for="q1b">B. 一般</label><br> <input type="radio" id="q1c" name="q1" value="c"> <label for="q1c">C. 不普及</label><br> </div> <div class="question"> <p>2. 您在日常生活中是否会采取节约用水、用电等措施?</p> <input type="radio" id="q2a" name="q2" value="a"> <label for="q2a">A. 经常采取</label><br> <input type="radio" id="q2b" name="q2" value="b"> <label for="q2b">B. 偶尔采取</label><br> <input type="radio" id="q2c" name="q2" value="c"> <label for="q2c">C. 不采取</label><br> </div> <div class="question"> <p>3. 您是否支持政府加大自然资源保护力度?</p> <input type="radio" id="q3a" name="q3" value="a"> <label for="q3a">A. 强烈支持</label><br> <input type="radio" id="q3b" name="q3" value="b"> <label for="q3b">B. 支持</label><br> <input type="radio" id="q3c" name="q3" value="c"> <label for="q3c">C. 不支持</label><br> </div> <input type="submit" value="提交"> </form> </div> ``` CSS代码: ```css .survey { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .survey h2 { text-align: center; margin-bottom: 20px; } .survey form { max-width: 400px; margin: 0 auto; } .question { margin-bottom: 20px; } .question p { margin-bottom: 10px; font-weight: bold; } .question input[type="radio"] { margin-right: 10px; } input[type="submit"] { display: block; margin: 0 auto; padding: 10px 20px; background-color: #008CBA; color: #fff; border: none; border-radius: 5px; cursor: pointer; } ``` 这里通过使用div元素包裹整个问卷,使用h2元素展示问卷标题,使用form元素包裹问题和选项,使用input元素展示单选框,并设置提交按钮的样式。同时,通过CSS样式美化问卷的外观,使其更加美观和易于使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值