• CSS基础6-盒子模型


    报纸也是盒子模型啊!

     

     一定要设置style,才能看见边框

    盒子根据父元素居中

    marging 0 auto

    这样就不会有缝隙了

    行内元素,没有宽高

    无论是padding还是marging,都只有水平有效

    行内元素特性:一行显示多个

    块级特性:宽高/padding/margin

    例子:

    //无样式
    <div class="school">
    
            <div class="name">电子科技大学</div>
    
            <div class="department">计算机学院</div>
            <div class="department">数学学院</div>
            <div class="department">软件学院</div>
            
    </div>

     注意文字怎么居中

    1、line-height,单行文字

    2、设置计算后的padding

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
    
            /*文字和容器之间是有默认的间隔的*/
            *{
                margin: 0;
                padding: 0;
            }
            
            .name{
                width: 200px;
                /*height: 100px*/;
                background-color: black;
                color: white;
                /*20px的字,在浏览器里面是27px*/
                font-size: 20px;
                font-weight: bold;
                /*水平居中*/
                text-align: center;
                /*单行文字,可以用line-height*/
                /*另一种方法,使用计算过后的padding-top*/
                /*想保持盒子高度是100px,又居中,字体是20px,不要设置height了,那么应该是40+20+40*/
                padding-top: 40px;
                padding-bottom: 40px;
    
            }
    
            .department{
                text-align: center;
                /*不设置宽,div就是占满整个屏幕,无法居中*/
                width: 200px;
                border: 1px solid gray;
            }
    
            .school{
                margin: 0 auto;
                /*不设置宽,div就是占满整个屏幕,无法居中*/
                width: 200px;
            }
            
    
        </style>
    </head>
    <body>
    
        <div class="school">
    
            <div class="name">电子科技大学</div>
    
            <div class="department">计算机学院</div>
            <div class="department">数学学院</div>
            <div class="department">软件学院</div>
            
        </div>
    
    </body>
    </html>

  • 相关阅读:
    20165334 我期待的师生关系
    20165228 我期望的师生关系
    20165232 预备作业3 Linux安装及学习
    20165232 学习基础和c语言基础调查
    20165232 我期望的师生关系
    20165320 第一周学习总结
    20165320 预备作业3 :Linux安装及命令入门
    20165320 预备作业2:技能学习心得与C语言学习
    20165320 我期望的师生关系
    20165203 学习基础和C语言基础调查
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9357442.html
Copyright © 2020-2023  润新知