display：block是啥效果

Posted 2023-05-15

#mainnavwidth:700px;height:29px;margin:0 auto;font-size:14px;
#mainnav *margin:0;padding:0;
#mainnav lifloat:left;list-style:none;
#mainnav li adisplay:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center; #mainnav li a:hoverbackground: url(images/3.gif) repeat-x;
<div id="mainnav">
<ul>
<li><a href="?">00000000</a></li>
<li><a href="?">11111111</a></li>
<li><a href="?">22222222</a></li>

<li><a href="?">33333333</a></li>
<li><a href="?">4444444</a></li>
<li><a href="?">555555</a></li>
</ul>
</div>

用css+div制作一个导航，有几个地方不明白，请高人解答
1，#mainnav *的作用是将<div>下的所有标签都设置一个属性？
2,#mainnav li adisplay:block,display:block这个属性是干什么用的，我去掉后只发现字体变小了，float是控制列表项都向左对齐为一行么？
3，div标签的内容是默认紧贴着排列的么？那div标签之间默认是什么样的排列方式呢？

首先，你上面的语法#mainnav *margin:0;padding:0;中的意思是将ID为#mainnav下的所有后代元素应用样式，用“*”一般是针对IE6及以下版本的！
其次，a 元素是是一个行内元素，display：block；就是将他强行转化为块级元素。行内元素没有没有上下填充,也就是说你设置padding-top padding-bottom将是徒劳，#mainnav li adisplay:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;
是让连接表现得像块极元素，增大起点击区域。以为你后面的a:hove背景图片的实现打下基础。float的意思是让文档（标签）脱离普通文档流的一种方法，它是用来定位的其中一种方法。float:left表示的是让第一个浮动元素相对于其父元素的左边对齐，后面的元素（在同一个嵌套级别）接上前面的一个元素贯穿在同一条线上，也就是整齐的对准在同一行上。浮动的时候，如果没有对父元素显视的设置宽度的话，它会自动收缩，你对父元素设置背景色就可以看到。这一点在设计导航条的时候尤其要注意。
再次，对于你的第三个问题，答案是肯定的（呵呵）因为你已经将空白边和填充设置为0了，浏览器的默认方式是相对于前一级容器元素left:0;top:0; 想对显示深入的了解的话，看看CSS框模型就是了。
对于div标签的默认显示方式：div标签是块级元素，也就是在他显示的行内不会有其他的块级元素，它会自动换行的。 参考技术A 回答你的问题
1，*号的意思是什么字符都可以
比如#mainnav1 #mainnav2 都适用mainnav*的样式
2，display:block可以理解为块。把这个区域变成块状。当然你加了宽度和高度效果不明显了。如果去掉宽度和高度试试。再去掉display试试就发现问题了。
float:left;向左边浮动。
3，是默认紧帖的 也就是margin:0;
之间的内容是换行的。也就是第一样东西放了一行。第2样东西放第2行。如果都加了float:left就等于是把他们都放在了一行。而且按照帖左边排排放的意思。不知道我的回答你还满意么 参考技术B 语法：

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

参数：

block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。用该值将从对象中删除行
compact : CSS2 分配对象为块对象或基于内容之上的内联对象
marker : CSS2 指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
table : CSS2 将对象作为块元素级的表格显示
table-caption : CSS2 将对象作为表格标题显示
table-cell : CSS2 将对象作为表格单元格显示
table-column : CSS2 将对象作为表格列显示
table-column-group : CSS2 将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 将对象作为表格行显示
table-row-group : CSS2 将对象作为表格行组显示

解决 display 和 transition 冲突的问题

问题：

　　既需要“显示、隐藏”’效果，也需要动画效果。此时使用了xxx.style.display = "none / block" 之后，我们发现 transition 动画效果就没有了。

解决办法一：用定时器（这种方法并不好）

btn2.onclick = function(){
    xxx.style.display = "block";
    setTimeout(function(){
        xxx.style.opacity="1";
    },0);
};

解决办法二：用 visibility 属性代替 display 

　　style 属性的 display 被隐藏的控件不再占用显示时占用的位置

　　visibility 隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。

btn2.onclick = function(){
    let t = document.documentElement.scrollTop;
    if(t>1){     
        side.style.visibility="visible";//可见
        side.style.opacity = "1";       
    };
    if(t<=1){
        side.style.opacity = "0";
        side.style.visibility="hidden";//不可见
    }
};