CSS盒子模型

HIMK

已于 2023-03-19 14:19:16 修改

阅读量48

点赞数

分类专栏： HTML5与Css 文章标签： css 前端

于 2023-03-19 14:18:59 首次发布

本文链接：https://blog.csdn.net/m0_74447658/article/details/129650083

版权

HTML5与Css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、

        *{
               margin: 0px;   /* 外边距为0 */
               padding: 0px;   /* 内边距为0 */
           }

            /*position: absolute; 绝对定位
               left: 20px; 离左边距离
               top: 50px; 离顶部距离
               right:20px; 离右边距离
               bottom:20px; 离底部距离
               z-index: 1; 层叠次序：1~999整数，值越大表示越在上方
           */

               盒子模型：所有html都可以看成是一个盒子
               （盒子有大小、边框、内外边距这些特征）


           /*
           html元素在CSS中分为两类：
           1）块级元素:（一般都自带换行效果）
           h1,p,table,form,img,ul,ol,div
           可以直接设置宽高

           2）行内元素:
           a,font,b,i,u,span
           不可以直接设置宽高，通过display属性设置元素以改变他的显示方式才能设置宽高
           */

        h1{
               background-color: coral;   /* 背景颜色 */
               width: 400px;               /* 宽高 */
               height: 200px;
               border: 7px dashed red;    /*边框虚线颜色*/
               padding: 20px;               /* 内边距 */
               margin: 30px;               /* 外边距 */
           }

<body>
<h1>aaaaa</h1>
</body>

2、

#span2{
           display: inline-block; (元素布局)
           width: 200px;
           height: 200px;
           /*
               solid 实线
               double双线
               dotted 点线
               dashed 虚线
           */
           border:10px double #f00; /*边框*/
           border-top: 20px solid blue;
           border-bottom: 20px solid blue;
       }

<span id="span2">ccccc</span>

3、盒子模型元素居中

        <body>
                <div id="one">
                            aaaaaaaa
                </div>
       </body>

以上介绍完毕、可以参考