【网页设计】CSS中的盒模式概念介绍与简单尝试（练习代码涉及CSS浮动定位）

一、盒模式知识点介绍

1、盒子中主要的属性就5个：width、height、padding、border、margin。
padding:内边距
margin：外边距
盒模型的示意图：
在这里插入图片描述
2、padding
①说出下面盒子真实占有宽高
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding: 40px 50px 60px; // 上右下左（顺时针方向）
padding-bottom: 30px;
/border: 8px solid #000000;/
border: 8px solid #000;
}
RGB R:red G:green B:blue
200+82+502=316
200+8*2+40+30=286
②给出盒模型图，请写出相关盒模型参数：
在这里插入图片描述

width:123px;
height:123px;
padding:20px 40px
border: 1px solid red;

3、去除多余padding
有一些标签，默认是带有padding，比如ul标签：
在这里插入图片描述

所以做网站时候便于精确计算，把这些默认的padding都去掉
*{
margin: 0;
padding: 0;
}
*效率不高，可以使用并集选择器，罗列出所有标签，这个标签不用背，直接拷贝过来即可。
ul,ol{
margin: 0;
padding: 0;
}

4、border
border就是边框。边框有三个要素：粗细、线型、颜色。
实线：solid 点：dotted 虚线： dashed
颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。
border是一个大综合属性:border:1px solid red;
border属性能够被拆开，有两大种拆开的方式：
1）按3要素:border-width、border-style、border-color
2）按方向：border-top、border-right、border-bottom、border-left
在这里插入图片描述

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title></title>
     <style>
        div {
           width: 200px;
           height: 200px;
           border: 1px solid red;
           border-top: 3px dashed green;
           border-right: 7px dotted blue;
        }
     </style>
   </head>
   <body>
     <div></div>
   </body>
</html>

二、盒模式相关尝试（涉及CSS浮动定位）

记得在img文件夹下放置代码对应所需要的图片

<html>
   <head>
     <meta charset="UTF-8">
     <title>照片墙</title>
     <style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          background-color: rgb(0, 102, 102);
        }
        ul {
          border: 2px solid red;
          width: 726px;
          /*去掉ul中小圆点*/
          list-style-type: none;
          /*上下20px，auto实现左右自动居中*/
          margin: 20px auto;
        }
        img {
          width: 200px;
          height: 200px;
        }
        li {
          float: left;
          border: 1px solid red;
          padding: 10px;
          margin: 10px;
          background-color: rgb(204, 204, 204);
        }
        p {
          /*文字水平居中*/
          text-align: center;
        }
        .clearFloat {
          clear: both;
        }
     </style>
   </head>
   <body>
     <ul>
        <li>
          <img src="img/01.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/02.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/03.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/04.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/05.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/06.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/06.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/06.jpg"/>
          <p>Java学习教程</p>
        </li>
        <div class="clearFloat"></div>
     </ul>
   </body>
</html>

代码运行结果：
在这里插入图片描述

Vivid-victory

发布了86 篇原创文章 · 获赞 83 · 访问量 3万+

私信关注