盒子及行、块元素

最新推荐文章于 2024-10-09 15:34:51 发布

YourLie_in_April

最新推荐文章于 2024-10-09 15:34:51 发布

阅读量529

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/123821316

版权

盒子 = 盒子的内容（content）+ padding + border + margin（盒子的宽度 = 左border+ 左padding + 内容的宽度 + 右padding + 右border ）

问题：现在设置完border之后盒子会撑大，怎么样才能满足需求呢？

解决： 1、手动内减 2、自动内减（给盒子设置 box-sizing:border-box 的属性。此时设置的width和height就是盒子的实际宽度）

一般来说浏览器会默认设置内外边距，所以我们需要在项目开始之前清除这些标签默认的margin和padding。

* {
padding: 0;
margin: 0;
}

块元素：1、独占一行（一行只能显示一个）2、宽度默认是父元素的宽度 3、可以设置宽高。

（<h1>…<h6>、<p>、<div>、列表）

行内元素：1、一行可以显示多个 2、宽高由内容撑开（即不可以设置宽高）。

（<span>、<a>、<img/>、<strong>、<em>、<i>）

行内块元素：1、一行可以显示多个 2、可以设置宽高。

三种显示方式的转换：

display: block; 转成块级

display: inline; 转成行内

display: inline-block; 转成行内块

示例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东最上方导航</title>
    <style>
    * {
  padding: 0;
  margin: 0;
}
#box ul {
  background: #f1f1f1;
  padding-left: 60px;
}
#box ul li {
  padding: 0 10px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  display: inline-block;
}
.zc {
  color: red;
  font-weight: 700;
}
.sj {
  text-indent: 10px;
  background: 0 6px;
  background-image: url(./img/tel.png);
  background-repeat: no-repeat;
}

    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>你好，请登录</li>
            <li>|</li>
            <li class="zc">免费注册</li>
            <li>|</li>
            <li>我的订单</li>
            <li>|</li>
            <li>我的京东</li>
            <li>|</li>
            <li>京东会员</li>
            <li>|</li>
            <li>企业采购</li>
            <li>|</li>
            <li class="sj">手机京东</li>
            <li>|</li>
            <li>关注京东</li>
            <li>|</li>
            <li>客户服务</li>
            <li>|</li>
            <li>客户服务</li>
        </ul>
    </div>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
    * {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
#box {
  margin: 0 auto;
  width: 300px;
  border: 1px solid #3a6587;
}
#box div {
  padding-left: 20px;
  vertical-align: middle;
  height: 40px;
  color: #e4fcfe;
  font-size: 18px;
  background-color: #3a6587;
  line-height: 40px;
}
#box ul {
  padding: 30px 20px;
}
#box .yi {
  padding-left: 32px;
}
#box .er {
  padding-left: 32px;
}
#box .san {
  padding-left: 68px;
}
    </style>
</head>
<body>
    <div id="box">
        <div class="title">
            会员登陆
        </div>   
    <form>
        <ul>
            <li class="yi"><label for="xm">姓名:</label><input type="text" id="xm" name="xm"></li>
            <li class="er"><label for="yx">邮箱:</label><input type="email" id="yx" name="yx"></li>
            <li><label for="dh">联系电话:</label><input type="number" id="dh" name="dh"></li>
            <li class="san"><input type="button" value="登录"></li>
        </ul>
    </form>
    </div>
</body>
</html>