【内敛快元素间隙问题，浮动，溢出，高度崩塌解决，导航制作，等高队列】03

今日事，今日毕

文章目录

• • 11. 内敛块元素间隙问题
  • 12. 浮动
  • • 12.1 溢出问题
    • 12.2 浮动问题及解决
    • 12.3 等高队列练习
    • 12.4 商品排列练习
  • 13. 列表
  • 14. 导航练习

11. 内敛块元素间隙问题

1. 虽然img和input都是内联元素，但是他们表现的是内联块元素的效果：

   • 可以和非区块元素在同一行显示
   • 支持所有的样式
   • 不设置宽高的时候由内容(文字图片等)撑开
   • 换行符会被解析

2. 由于内联块会解析换行符，因此用内联块布局的时候两个相邻的元素间会出现空格，不利于我们计算布局，如何去掉内联块之间的空格

   

   • 用注释、连续标签、拆分标签等方式去掉换行符(无论哪种方法都会使页面结构混乱和不利于阅读)

     <a href="">导航一a><a href="">导航一a><a href="">导航一a><a href="">导航一a><a href="">导航一a><a href="">导航一a><a href="">导航一a
     ><a href="">导航一a
     ><a href="">导航一a>
     

   • 用margin-left设置为负值(文字大小改变时，需要重新设置)

     设置字间距-npx/-nem(同样有字体大小问题，且在欧朋和ie7浏览器中会有问题)

     
     <div id="test0"><a href="">导航一a><a href="" class="after">导航一a><a href="" class="after">导航一a>
     div>
     

     /* way2: */
     #test0{font-size: 20px;
     }
     #test0 .after{margin-left: -0.25em;
     }
     

   • 设置父元素字体大小为0，并在子元素中重新设置字体大小(是低版本谷歌浏览器有问题，由于谷歌浏览器自动更新，因此该方法是比较好的方法)

     <div id="test1"><a href="">导航一a><a href="" class="after">导航一a><a href="" class="after">导航一a>
     div>
     

     /* way3: */
     #test1{font-size: 0;
     }
     #test1 a{/* 需要给子元素重新设置字体大小 */font-size: 20px;
     }
     

12. 浮动

1. 用div+css做布局有个问题，就是区块元素不能在同一排显示。

2. 浮动样式float可以解决这个问题：元素脱离文档流，按照浮动方向移动，遇到父级边界或者相邻浮动元素停住：

   float：left/right/none(默认值)
   

   • 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流
   • HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流
   • 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
   • 脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

<div class="parent"><div>div1div><div>div2div><div>div3div><div>div4div>
div>

.parent{border: 2px solid black;
}
.parent div{width: 80px;height: 80px;background-color: cadetblue;border: 1px solid red;/* 移动到父元素的边界或兄弟元素的旁边父元素高度崩塌*/float: right;
}

12.1 溢出问题

1. 溢出设置overflow(复合样式，由overflow-x和overflow-y集合成)：当有内容或子元素溢出此元素时的处理方法：
   • visible(默认值，溢出时不处理)，
   • hidden(溢出裁剪，裁剪部分不可见)，
   • scroll(元素显示滚动条，溢出部分可以通过滚动条查看)，
   • auto(x/y方向有溢出部分时，该方向出现滚动条)，
   • inherit(继承)
2. 溢出的部分不会影响页面布局

<div class="box1">离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻div>
<div class="box2">div>

12.2 浮动问题及解决

1. 设置浮动后，由于元素脱离文档流，结果会使父元素高度崩塌并与其他元素发生重叠，解决浮动元素脱离文档流不占位的方法

   • 为父元素设置高度：优点简单、兼容性好；缺点高度有时未知、子元素数量变化导致换行

   • 将父元素设置为BFC盒子

     • 父元素浮动【不用】
     • overflow:hidden：优点简单、兼容性好；缺点hidden可能裁剪有用的东西

     

   • 在浮动元素的最后设置空标签的样式clear:both：优点本身就是W3C给我们的闭合浮动的方法、兼容性好；缺点会给父元素中增加无意义的空标签

     <div class="parent"><div>div1div><div>div2div><div>div3div><span style="display: block; height: 0; clear: both;">span> 
     div>
     

   • 利用css的==伪元素==来模拟空标签并设置clear:both：

     • 优点解决上述方法中的缺点；
     • 缺点低版本IE浏览器需要用.clearfix{*zoom:1}来兼容

     .parent{width: 500px;border: 2px solid black;/* overflow: hidden; */
     }
     .parent::after{display: block;content: "";clear: both;
     }
     .parent div{width: 80px;height: 80px;background-color: coral;/* 浮动溢出 */float: left;
     }
     .next{width: 200px;height: 200px;background-color: blue;
     }
     

12.3 等高队列练习

<div class="parent"><div class="child">离离原上草，一岁一枯荣;海内存知己，天涯若比邻;海内存知己，天涯若比邻div><div class="child">离离原上草，一岁一枯荣;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻div><div class="child">离离原上草，一岁一枯荣;海内存知己，天涯若比邻div><div class="child">离离原上草，一岁一枯荣;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻;海内存知己，天涯若比邻div>
div>

.parent{width: 450px;border: 2px solid black;overflow: hidden;
}
.parent::after{content: "";display: block;clear: both;
}
.child{width: 100px;margin: 0 5px;background-color: burlywood;float: left;/* 神奇等高 */margin-bottom: -500px;padding-bottom: 500px;
}

12.4 商品排列练习

<div class="parent clearfix"><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div><div class="child">商品div>
div>

.parent{border: 2px solid black;width: 520px;
}
/* 公共使用清除浮动 */
.clearfix::after{display: block;content: "";clear: both;
}
.child{width: 120px;height: 100px;background-color: chocolate;/* margin-right: 10px;margin-bottom: 10px; */float: left;margin: 5px;
}

13. 列表

1. 把一系列类似的项在页面中展示出来就要用到列表，如名词定义、商品列表等

   • 包括dl(定义列表)、dt(定义名)、dd(详情)、ul(无序列表)、ol(有序列表)、li(列表的项)
   • 其中dt和dd是dl的子元素
   • li是ul和ol的子元素

   
   <dl><dt>前端dt><dd>html css js...dd><dt>后端dt><dd>java c+dd><dd>mysqldd>
   dl><ul><li>1li><li>2li><li>appleli>
   ul><ol><li>bananali><li>banakli><li>选择题li>
   ol>
   

   ul,ol{margin: 0px;padding: 0px;
   }
   ul li,ol li{list-style: none;
   }
   

2. 导航

   • 通过一定的技术手段，为网页的访问者提供一定的途径，使其可以方便地访问到所需的内容
   • 通常制作导航要用到列表元素(ul、ol、li)和超链接元素(a)
   • 导航有水平方向和垂直方向，其中水平方向的导航就是需要把元素在同一行中展示出来，可以用内联元素、内联块或者浮动的区块元素
   • 当我们得到一个导航的ul图后，首先需要分析导航结构，用需要的元素把导航的HTML结构完成，然后为其设置样式，需要在ps里精确测量，最后的完成的页面应该与ul图相同

14. 导航练习

<ul class="menu"><li><a href="">网站首页a>li><li><a href="">关于我们a>li><li><a href="">产品展示a>li><li><a href="">新闻中心a>li><li><a href="">人力资源a>li><li><a href="">网上留言a>li><li><a href="">联系我们a>li>
ul>

/* 清楚默认样式 */
ul{margin: 0px;padding: 0px;
}
.menu::after{display: block;content: "";clear: both;
}
/* 子元素设高，父元素设宽 */
ul li{list-style: none;width: 60px;float: left;
}
a{color: #000;text-decoration: none;
}
/* 伪类选择器优先级高于标记名选择器；但是低于class选择器 */
a:visited{color: #000;text-decoration: none;
}
a:hover{color: #000;text-decoration: none;
}
a:link{color: #000;text-decoration: none;
}
a:active{color: #000;text-decoration: none;
}
.menu a{background-color: #c3c3c3;display: block;height: 22px;font-size: 10px;text-align: center;line-height: 22px;
}.menu a:hover{color: gold;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！