老师好，小慕医生的header部分，为什么不直接用定位或margin设置元素位置呢？
老师好，关于小慕医生的header部分，我看设计图里面每个元素都有标定他们在页面X\Y的位置。为什么不直接用postion：absolute去设置他们的位置？或者float以后用margin调整元素位置？
下面代码是我在学了浮动以后、看4-1项目视频之前，直接敲的，似乎也能实现定位目的，当然不是很成熟。
请老师指教。
谢谢。
自己写的header部分css如下：
/* 初始化格式 */
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
header {
}
header .headertop {
、
position: relative; /*建立BFC压制下方盒子 */
width: 100%;
height: 126px;
}
/*用浮动方式，放置logo到预定位置 */
header .headertop .logo {
color: #00978e;
font-family: Helvetica;
line-height: 58px;
width: 192px;
height: 63px;
float: left;
margin-top: 39px;
margin-left: 360px;
}
/*用浮动方式，放置电话一行的元素到预定位置 */
header .headertop .tool .telbar {
background-color: #fff;
display: inline-block;
float: right;
margin-top: 34px;
margin-right: 361px;
}
/* 用号码把左右图片撑开 */
header .headertop .tool .telbar span {
margin-right: 13px;
margin-left: 25px;
}
/* 将中英字间距撑开 */
header .headertop .telbar .tool a:last-child {
margin-left: 14px;
}
/* 用绝对定位，放置搜索栏到预定位置 */
header .headertop .searchbar {
width: 266px;
height: 30px;
position: absolute;
top: 72px;
right: 361px;
border: 1px solid rgba(202, 202, 202, 0.6);
}
/* 设置搜索框样式 */
header .headertop .searchbar input:first-of-type {
font-family: Helvetica;
font-size: 16px;
color: rgba(202, 202, 202, 0.6);
border: none;
margin-right: 10px;
}header部分的html代码如下：
相关代码：
<body> <!-- 页面头部 --> <header> <!-- logo、电话、搜索区 --> <div class="headertop"> <!-- 网页的logo --> <div class="logo"> <h1>小慕医生</h1> </div> <!-- 网页的功能区 --> <div class="tool"> <div class="telbar"> <img class="tel" src="../assets/tel@1x.png" alt="" /> <span class="telnumber">088-88888888</span> <a href=""><img class="chinese_icon icon" src="../assets/chinese_icon@1x.png" alt="" /></a> <a href=""><img class="english_icon icon" src="../assets/english_icon@1x.png" alt="" /></a> </div> <div class="searchbar"> <input type="text" placeholder="找医生/科室……" /> <input type="button" value="" /> </div> </div> </div>
6
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕小李
2023-02-24 13:34:49
同学你好，解答如下：
首先代码中多了个顿号，如下：
首先同学所说的使用定位和浮动确实是可以完成页面的，这个没有问题。
但定位是一把双刃剑，它确实能实现目的，只不过正式开发的时候需要适配大小屏幕的问题，那么使用定位就会出现一些bug。同学可以将浏览器屏幕缩放一下就能看出问题了。
原本右侧的input部分因为按照headertop绝对定位，那么就会出现这种问题 。
定位一般来说用在特效（脱离文档流的元素上使用）后面会有项目中会出现这样的情况，所以定位一般不用的时候尽量别用。
还有建议同学按照老师的思路去写，如header部分：
这部分应该是有一个中间部分并且左右做自适应处理的，margin：0 auto; 那么后面在涉及到屏幕大小问题，代码就会告知浏览器可以缩进那一部分。
所以建议同学在最初的学习阶段，要学会老师的布局与样式思路。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星