前端基础：为啥本案例中加了定位的行内元素高度和父级一样高（毒舌和水神不要进来）
本帖最后由 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的基础部分
<!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>
/*公共样式*/
.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;
}
/*清除元素默认的内外边距*/
* {
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
}
你没有跟count设置宽度，他就是内容的宽度 本帖最后由 clearwater 于 2020-1-9 12:34 编辑
z970815 发表于 2020-1-9 12:30
你没有跟count设置宽度，他就是内容的宽度
这个我知道。
我的问题是：为什么高度不是跟 内容－“数字8”的高度？（而是和父级元素一样高）
count的宽高我都没有设。count加了绝对定位之后，他的属性就变成了类似行内块的元素，即宽高是由内容撑开的，对不对？
{:1_904:} 因为你在shopcart里面设置了行高为34，所以此时你shopcart下面的每一个i标签的高度都已经确定了，而它的宽度是没有的所以只能有里面的文本撑开，这样一来你看到的样式就是宽度是刚好被8撑开的宽度而高度却和它的父元素一样了。 clearwater 发表于 2020-1-9 12:31
这个我知道。
我的问题是：为什么高度不是跟 内容－“数字8”的高度？（而是和父级元素一样高）
你跟父元素设置了行高 z970815 发表于 2020-1-9 12:43
你跟父元素设置了行高
@北海以北少年痴
@z970815
谢谢两位大神的帮助。
@z970815我现在没有能量了，要等晚一点才能给您评分。
本帖最后由 ZJReason 于 2020-1-9 13:19 编辑
clearwater 发表于 2020-1-9 12:31
这个我知道。
我的问题是：为什么高度不是跟 内容－“数字8”的高度？（而是和父级元素一样高）
因为position：absolute属性是相对于 static 定位以外的第一个父元素进行定位，并生成块级框。意思就是说你这里的<i class="count">是根据<div class="shopcart">来定位的，在<div class="shopcart">里相当于一个块级。在不给定高度的情况下，默认跟<div class="shopcart">等高，换句话说，它就是父级元素里的行内块，高度默认一致，宽度是内容宽度。
验证方法就是，你把i标签里面的position属性去掉，它就会是本身内容高度 ZJReason 发表于 2020-1-9 13:11
因为position：absolute属性是相对于 static 定位以外的第一个父元素进行定位，并生成块级框。意思就是说 ...
谢谢您的回复。
因为shopcart是父级元素，设有行高，行高可以可以被子元素继承，但是高度并不能子元素继承。
我把公共COMMON. CSS 中110行 line-height：34px注释掉后， 那个子元素高度就变成很小了。
不过不知为啥 8 上下还有padding值？这个我想想看。
如果我说得不对，请大神赐教。{:1_904:} @北海以北少年痴
@z970815
两位大神，你们随便哪位能不能帮我看看。 如果我把shopcart里面的110行中的line-height注释掉。
为什么shopcart 或 8 上面会有那么大的空隙？ 我用黄色把那个地方涂出来？
我想8是继承了shopcart里面的啥参数。应该去找找shopcart.
但是我没发现shopcart里面有啥padding 值，能再教教我吗？
clearwater 发表于 2020-1-9 16:54
@北海以北少年痴
@z970815
你的父级元素shopcart使用了absolute，这是会脱离文档流的，会造成子元素拥有浮动的属性，会造成子元素向上靠，或者说你里面的子元素本来就是这样的大小，当你删除掉行高之后会向上聚拢也就很正常了
页:
[1]