本帖最后由 clearwater 于 2020-1-9 12:47 编辑
***********
1、回答正确，并能帮助我理解的前两位大神，各一个热心。（如果当天没有，隔天会补上）
2、其他的大神， 不管答对或答错，在此我都表示感谢。因为每天热心有限，无法一一评分，请见谅。
3、请毒舌和水神放过，不要来回复。我看了心情很不好。
**************
有一个父级 块级盒子 A ， 里面装子级 行内元素 B.
给B加上绝对定位之后，B就带有 行内块的特点了，即 宽度是 B的内容撑开的。 （高度也应该是这样。） －－－我自己做了一个简单的代码当测试也是这样。
但是我在跟某马的教学视频学习，为啥截图中我圈起来的子级 行内元素（没有宽度），加了绝对定位之后，这个截图中的圈起来的盒子变成和 父级的盒子（购物车）一样高？
该盒子里面装一个 ”8“， 它的宽度和 8一样宽，这个我理解了。
我的问题是 高度，为什么不是 和 8一样高？ 我哪里理解错了。
问题的相关代码在： CSS公共部分的124-129行。
（以下代码是我跟着教视抄的。我也知道怎么改正确，我就想知道原理。）
我把所有的代码和图片也上传到百度盘了。
链接：https://pan.baidu.com/s/1riio3SW8c2-w2ikJujGS1w
提取码：r0dp
第一部分是：HTML
第二部分是：CSS的公共部分
第三部分是：CSS的基础部分
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
<!-- 引入favicon.ico网页图标 -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- 引入css初始化的css文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共样式的common.css -->
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!-- 顶部快捷导航starts -->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！</li>
<li>
<a href="#">请登录</a>
<a href="#" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li><a href="#">我的品优购</a><i class="icomoon"></i> </li>
<li class="spacer"></li>
<li><a href="#"> 品优购会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购 </a></li>
<li class="spacer"></li>
<li><a href="#">关注品优购</a><i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a><i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a><i class="icomoon"></i></li>
</ul>
</div>
</div>
</div>
<!-- 顶部快捷导航ends -->
<!-- header starts -->
<div class="header w">
<!-- logo starts -->
<div class="logo">
<h1>
<a href="index.html" title="品优购">品优购</a>
</h1>
</div>
<!-- search starts -->
<div class="search">
<input type="text" class="text" value="请搜索内容...">
<button class="btn">搜索</button>
</div>
<!-- hotwords starts -->
<div class="hotwords">
<a href="#" class="style-red">优惠购首发 </a>
<a href="#">亿元优惠</a>
<a href="#">9.9元团购</a>
<a href="#">美满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<!-- shopcart starts -->
<div class="shopcart">
<i class="cart"></i> 我的购物车<i class="arrow"></i>
<i class="count">8</i>
</div>
</div>
<!-- header ends -->
</body>
</html>
[Asm] 纯文本查看 复制代码 /*公共样式*/
.fl {
float: left;
}
.fr {
float: right;
}
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icomoon {
font-family: 'icomoon';
font-size: 16px;
/*行高小于高，文字可以偏小。高是继承shortcut 31px*/
line-height: 26px;
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
.style-red {
color: #c81623;
}
.spacer {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 14px 0;
}
/*顶部快捷导航*/
.shortcut {
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.shortcut li {
float: left;
}
/*header 区域*/
.header {
position: relative;
height: 105px;
background-color: pink;
}
.logo {
position: absolute;
top: 25px;
left:0;
width: 175px;
height: 56px;
/*background-color: purple;*/
}
.logo a {
display: block;
width: 175px;
height: 56px;
overflow:hidden;
background: url(../img/logo.png);
/*color: transparent;*/
text-indent:-999px;
font-size: 0;
}
.search {
position: absolute;
top:25px;
left: 348px;
}
.text {
float: left;
width: 445px;
height: 32px;
padding-left: 10px;
border: 2px solid #b1191a;
color: #ccc;
}
.btn {
float: left;
width: 82px;
height: 36px;
background-color: #b1191a;
border: none;
color: #fff;
font-size: 16px;
}
.hotwords {
position: absolute;
top: 65px;
left: 348px;
}
.hotwords a {
margin: 0 10px;
}
.shopcart {
position: absolute;
right: 62px;
top: 25px;
width: 138px;
height: 34px;
line-height: 34px;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
color: #666;
text-align: center;
}
.cart {
font-family: 'icomoon';
color: #d94f4f;
}
.arrow {
font-family: 'icomoon';
margin-left: 5px;
}
.count {
position: absolute;
top: 0;
right: 0;
background-color: #e60012;
}
[CSS] 纯文本查看 复制代码 /*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
li {
list-style: none;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
button,
input {
font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
/*取消轮廓线 蓝色的*/
outline: none;
}
body {
background-color: #fff;
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
color: #666
}
.hide,
.none {
display: none;
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
| 
发表于 2020-1-9 12:07
|
发表于 2020-1-9 12:31
