盒子模型&&值的书写方式

最新推荐文章于 2023-02-08 10:53:47 发布

二三子_

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量221

点赞数

分类专栏： Web前端技术文章标签： html css

本文链接：https://blog.csdn.net/dai_0724/article/details/115449369

版权

Web前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、盒子模型

1. 代表选择所有的标签，可以通过进行清除样式操作；

2.很多标签，自带样式，但是实际开发的时候不需要；

3.清除样式的代码，放在css的最顶端.

*{
     margin:0px;
     padding:0px
 }

盒子模型：指的是标签占位。width/height+margin+padding+border，width和height指的是内容，不包含border、padding、margin.

div{
            /* 宽度 */
            width: 100px;
            /* 高度 */
            height: 100px;
            /* 边框
              三个值，值与值之间用空格隔开
              第一个值：线的粗细
              第二个值：线的类型 solid实线 dashed虚线 dotted点线(个别浏览器不兼容，识别为虚线)
              第三个值：线的颜色。可以是英文或者十六进制
             */
            border: 10px dotted green;
            /* 外边距 */
            margin:10px;
            /* 内边距:边框和内容的留白 */
            padding:10px;
            /* 英文和数字换行 */
            /* word-break: break-all; */
     }

值的书写方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding:0px
            }
            div{
                width: 100px;
                height: 100px;
                /* margin padding border都可以只指定一个方向去写 */
                /*四个方向都有边框 border: 1px solid #000; */
                /* border可以只写一个方向的值 border-left border-right border-top border-bottom */
                border-left:10px solid red;
            }
            p{
                width: 100px;
                height: 100px;
                border-left: 10px solid #000;
                /* padding可以单独指定一个方向 margin同理 */
                /* padding-left:8px;
                margin-top: 20px; */

                /* margin和padding 
                   一个值：四个方向
                    二个值：第一个值：上下  第二个值：左右
                    三个值：第一个值：上 第二个值：左右 第三个值：下
                    四个值：上右下左
                 */
                margin:10px 30px 40px 50px;
            }
        </style>
    </head>
    <body>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <div></div>
        <div></div>
    </body>
</html>