今日事，今日毕
11. 内敛块元素间隙问题
-
虽然
img和input都是内联元素，但是他们表现的是内联块元素的效果：- 可以和非区块元素在同一行显示
- 支持所有的样式
- 不设置宽高的时候由内容(文字图片等)撑开
- 换行符会被解析
-
由于内联块会解析换行符，因此用内联块布局的时候两个相邻的元素间会出现空格，不利于我们计算布局，如何去掉内联块之间的空格
-
用注释、连续标签、拆分标签等方式去掉换行符(无论哪种方法都会使页面结构混乱和不利于阅读)
<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浏览器中会有问题)
<!-- margin: [1/4 font-size] 谷歌不符合该比例--> <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. 浮动
-
用div+css做布局有个问题，就是区块元素不能在同一排显示。
-
浮动样式float可以解决这个问题：元素脱离文档流，按照浮动方向移动，遇到父级边界或者相邻浮动元素停住：
float：left/right/none(默认值)- 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流
- HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流
- 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
- 脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
.parent{
border: 2px solid black;
}
.parent div{
width: 80px;
height: 80px;
background-color: cadetblue;
border: 1px solid red;
/*
移动到父元素的边界或兄弟元素的旁边
父元素高度崩塌
*/
float: right;
}
12.1 溢出问题
- 溢出设置overflow(复合样式，由overflow-x和overflow-y集合成)：当有内容或子元素溢出此元素时的处理方法：
- visible(默认值，溢出时不处理)，
- hidden(溢出裁剪，裁剪部分不可见)，
- scroll(元素显示滚动条，溢出部分可以通过滚动条查看)，
- auto(x/y方向有溢出部分时，该方向出现滚动条)，
- inherit(继承)
- 溢出的部分不会影响页面布局
<div class="box1">离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻；离离原上草，一岁一枯荣；海内存知己，天涯若比邻</div>
<div class="box2"></div>
12.2 浮动问题及解决
-
设置浮动后，由于元素脱离文档流，结果会使父元素高度崩塌并与其他元素发生重叠，解决浮动元素脱离文档流不占位的方法
-
为父元素设置高度：优点简单、兼容性好；缺点高度有时未知、子元素数量变化导致换行
-
将父元素设置为BFC盒子
- 父元素浮动【不用】
overflow:hidden：优点简单、兼容性好；缺点hidden可能裁剪有用的东西
-
在浮动元素的最后设置空标签的样式clear:both：优点本身就是W3C给我们的闭合浮动的方法、兼容性好；缺点会给父元素中增加无意义的空标签
<div class="parent"> <!-- 脱离文档流；父元素高度崩塌，没有高度 --> <div>div1</div> <div>div2</div> <div>div3</div> <!-- 给浮动元素之后设置兄弟节点；设置clear:both[创建了无意义的空标记] --> <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 商品排列练习
<!--
用浮动做一个商品列表，要求12个商品元素每个尺寸120px*100px,一行4个，每两个商品间距离10px
【只有上下外边距会发生折叠】
【浮动不存在外边距折叠问题】
-->
<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. 列表
-
把一系列类似的项在页面中展示出来就要用到列表，如名词定义、商品列表等
- 包括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>mysql</dd> </dl> <ul> <li>1</li> <li>2</li> <li>apple</li> </ul> <ol> <li>banana</li> <li>banak</li> <li>选择题</li> </ol>ul,ol{ margin: 0px; padding: 0px; } ul li,ol li{ list-style: none; } -
导航
- 通过一定的技术手段，为网页的访问者提供一定的途径，使其可以方便地访问到所需的内容
- 通常制作导航要用到列表元素(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;
}
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
