老师这个黄色边框怎么才能让它充满整个高度

老师这个黄色边框怎么才能让它充满整个高度

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

        *{

            margin:0;

            padding:0;

        }

ul{

list-style: none;

}

a{

text-decoration:none;

color: white;

}

        body{

        font-family: '宋体';

        width: 100%;

        }

        .header{

        width: 100%;

        height: 100px;

        background: #000000;

        overflow: hidden;

        }

        .header a img{

        height: 100px;

        float: left;

        }

          

        .header ul{

        float: right;

        overflow: hidden;

        padding-right: 30px;

        }

        .header ul li{

        height: 100px;

line-height: 100px;

        float: left;

        padding: 0 30px;

        }

        .header ul li a{

        margin-right: 30px;

        }

        

        

        .container{

            width:100%;

            height:400px;

            background:#afeeee;

overflow: hidden;

        }

        .left{

float: left;

margin: 100px auto;

        }

.left h3,.left ul{

width: 300px;

line-height: 2em;

margin-left: 100px;

}

span{

    width:30px;

    height:10px;

    background:orange;

}

       

        .middle{

            width:250px;

line-height: 2em;

            float:left;

margin: 100px auto;

        }

.middle h3,.middle ul{

width: 250px;

line-height: 2em;

margin-left: 100px;

}

.right{

height: 400px;

float: right;

margin: 100px auto;

border-left: 2px orange solid;

}

input{

width: 250px;

height: 25px;

}

.right h3,.right input{

margin:10px 150px;

}

.footer{

width: 100%;

height:100px;

background: #000000;

}

.footer ul{

text-align: center;

}

.footer li{

display:inline-block;

height: 100px;

line-height: 100px;

padding:0 30px;

}

  </style>

</head>

<body>

    <div class='header'>

          <a><img src='http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png'><a/>

      <ul>

          <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>

    </div>

    <div class='container'>

        <div class='left'>

            <h3>课程推荐</h3>

            <ul>

<li><span>职业路径</span>&nbsp;HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>&nbsp;零基础入门安卓</li>

<li><span>职业路径</span>&nbsp;iOS</li>

<li><span>职业路径</span>&nbsp;PHP入门开发</li>

<li><span>职业路径</span>&nbsp;JAVA入门开发</li>

</ul>

        </div>

        <div class='middle'>

            <h3>相关课程</h3>

            <ul>

<li>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JAVA</li>

<li>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;JQUERY</li>

<li>移动端基础&nbsp;&nbsp;移动端app开发</li>

            </ul>

        </div>

<div class='right'>

<h3>登录</h3>

<input type='text' placeholder="请输入邮箱或手机号"><br/>

<input type='text' placeholder="6-18位密码,区分大小写,不能用空格"> <br/>

<input type='button' value="登录" style="background-color: red;">

</div>

    </div>

<div class='footer'>

<ul>

    <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>

</div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2020-06-21 10:04:58

同学你好,这样理解是可以的:边框长度=内容长度+内边距长度。

举一个小例子

http://img1.sycdn.imooc.com//climg/5eeec01f09717f1b07430533.jpg

http://img1.sycdn.imooc.com//climg/5eeebffc09b7079b05790436.jpg

一个盒子的分布从内到外:内容--padding--border--margin

自己可以再测试理解下,祝学习愉快!

好帮手慕慕子 2020-06-20 18:55:06

同学你好,将right盒子的margin属性调整为padding属性就可以了。示例:

http://img1.sycdn.imooc.com//climg/5eede9db09ebe6b607260290.jpg

代码中存在的其他问题

1,如下所示位置a结束标签书写格式不对,建议修改了,让代码更加规范

http://img1.sycdn.imooc.com//climg/5eedea2c091ecc4516720160.jpg

http://img1.sycdn.imooc.com//climg/5eedea4a0966cf2d09760720.jpg

2、如下所示,浏览器默认会给input元素添加2px的边框,由于浏览器解析问题,导致输入框和按钮没有对齐显示

http://img1.sycdn.imooc.com//climg/5eedeab2093e82fe06760344.jpg

建议:去掉按钮的边框,调整宽度,实现对齐

http://img1.sycdn.imooc.com//climg/5eedeafc0924807306580194.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 twtszz #1
    老师这个边框跟内边距有什么关系呢
    2020-06-20 19:14:24
  • 提问者 twtszz #2
    是边框长度=内容长度+内边距长度?
    2020-06-20 19:18:33
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师