关于css:CSS盒子模型-3

19次阅读

共计 7550 个字符，预计需要花费 19 分钟才能阅读完成。

css 盒子模型

网页布局的关键点：盒子

盒子模型组成部分

盒子的组成

  • margin(外边距)
  • border(边框)
  • padding(内边距)
  • content(内容)

border

  • border-width: 盒子的宽度
  • border-style: 边框的款式 默认值：none(无款式) solid(实线) dashed(虚线) dotted(点线)
  • border-color: 边框的色彩

简写形式

    border:border-width  border-style  border-color

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                border: 10px solid #008000;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

border 的边框写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            input {
                border: none;
                border-bottom:1px solid red;
            }


        </style>
    </head>
    <body>
        账号：<input type="text" name="username"> <br />
        明码：<input type="password" name="password"> <br />
    </body>
</html>

border-collapse

border-collapse: 表格合并

因为表格中的行标签和单元格标签都领有本人的边框 因而须要合并边框

<!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 type="text/css">
            table,
            tr,
            td,
            th {border-collapse: collapse;}

            .t-red {background-color: hotpink;}
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500">
            <caption>
                <h2> 小说排行耪 </h2>
            </caption>
            <tr class="t-red">
                <th> 排名 </th>
                <th> 关键词 </th>

                <th> 今日搜寻 </th>
                <th> 最近七日 </th>
                <th> 相干链接 </th>
            </tr>
            <tr>
                <td>1</td>
                <td> 鬼吹灯 </td>

                <td>345</td>
                <td>123</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td> 盗墓笔记 </td>

                <td>34555</td>
                <td>123444</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td> 西游记 </td>

                <td>24555</td>
                <td>13444</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>
            <tr class="t-red">
                <td>4</td>
                <td> 东游记 </td>

                <td>3455</td>
                <td>3444</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td> 甄嬛传 </td>

                <td>3555</td>
                <td>1444</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td> 水浒传 </td>

                <td>355</td>
                <td>12344</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>
            <tr class="t-red">
                <td>7</td>
                <td> 三国演义 </td>

                <td>3555</td>
                <td>13444</td>
                <td>
                    <a href="#"> 贴吧 </a>
                    <a href="#"> 百度 </a>
                    <a href="#"> 图片 </a>
                </td>
            </tr>


        </table>
    </body>
</html>

padding

padding：盒子间隔内容之间的间隔 应用内边距之后盒子会变大

padding 设置

padding 简写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                color: red;
                border: 1px solid blue;
                padding: 20px 50px 20px 60px;
            }
        </style>
    </head>
    <body>
        <div> 尧子陌 </div>
    </body>
</html>

新浪导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                height: 41px;
                border-top: 3px solid #ff8500;
                border-bottom: 1px solid gray;
            }

            .nav>a {
                display: inline-block;
                line-height: 41px;
                text-decoration: none;
                color: #000000;
                padding: 0px 20px;
            }

            .nav>a:hover {
                background-color: #eee;
                color: red
            }
        </style>
    </head>
    
    <body>
        <div class="nav">
            <a href="#"> 设为首页 </a>
            <a href="#"> 手机新浪网 </a>
            <a href="#"> 挪动客户端 </a>
            <a href="#"> 登录 </a>
            <a href="#"> 微博 </a>
            <a href="#"> 博客 </a>
        </div>
    </body>
</html>

效果图

盒子理论尺寸

    盒子的宽度：Elements width= content Width + padding Width + border
    盒子的高度：Elements height= ontent height + padding height +border

在真正的理论开发中，内边距是肯定要实在存在的，所以只能减去盒子的宽高，来维持盒子的宽高不变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                padding: 20px;
                border: 1px solid red;
            }
            /* 盒子的理论宽度 =200px+20px+20px+1px+1px=242px */
            /* 盒子的理论高度 =200px+20px+20px+1px+1px=242px */
        </style>
    </head>
    <body>
        <div class="nav"></div>
    </body>
</html>

课堂案例

案例 1

盒子的宽度为 130

案例 2

盒子宽度为 200px+100px+50px+2px=352px

盒子高度为 200px+50px+50px+1px+5px=306px

padding 不影响盒子大小的状况下

在非凡状况下，如果指定的盒子没有给宽度，则盒子不会被 padding 值撑开。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                height: 200px;
                width: 200px;
                background-color: #0000FF;
            }

            .nav p {
                height: 200px;
                padding-left: 20px;
                /* 此时 p 的宽度和父元素同为 200px */
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <p></p>
        </div>
    </body>
</html>

margin

margin 是外边距，是盒子与盒子之间的间隔

margin 的简写

同理和 padding 值的简写统一

块级盒子程度居中对齐


满足两种条件能力让盒子居中对齐

1. 盒子必须指定宽度
2. 左右的外边距 margin 设置 auto

设置 auto 的三种办法

  • margin-left:auto margin-right:auto;
  • margin:auto
  • margin:0 auto;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .nav {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="nav"></div>
    </body>
</html>

盒子程度居中对齐和文字水平居中对齐

text-align: 不仅能够让文字水平居中对齐，还能够让行内块元素和行内元素程度居中对齐

margin:auto : 能够让块级盒子程度居中对齐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {background-color: rgba(0, 0, 0, 0.6);
            }

            .nav {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                color: wheat;
                margin: 20px auto;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="nav"> 尧子陌 </div>
    </body>
</html>

插入图片和背景图片的区别

插入图片

插入图片个别用于展现类，通过盒模型的 padding 和 margin 来挪动地位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                width: 800px;
                height: 800px;
                      border:1px solid red;

            }

            .nav img {
                margin: 20px;
                margin-top: 50px;
            }
        </style>
    </head>
    
    <body>
        <div class="nav">
            <img src="../WEB 照片 / 素材.jpg" alt="">
        </div>
    </body>
</html>

背景图

背景图片个别用于做一些精灵图等等，通过 background-position 来挪动地位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .nav {
                width: 800px;
                height: 800px;
                border: 1px solid red;
                background-image: url(../WEB 照片 / 素材.jpg);
                background-position: 20px 50px;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="nav"></div>
    </body>
</html>

革除元素的默认的内外间距

* {

    margin：0；padding:0;
}

注意事项

  • 为了关照行内元素的兼容性，只设置左右内外边距，不设置高低内外边距；

外边距合并问题

相邻块元素外边距合并问题

相邻块元素合并：取两个块元素外边距合并的较大值，所以只给一个盒子的外边距是最好的解决办法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .head,
            .foot {
                width: 200px;
                height: 200px;
                background-color: #0000FF;

            }

            .head {margin-bottom: 50px;}

            .foot {margin-top: 60px;}
        </style>
    </head>
    <body>
        <div class="head"></div>
        <div class="foot"></div>
    </body>
</html>

嵌套块元素外边距合并问题的三个办法

嵌套块元素外边距合并问题的三个办法

  • 给父元素 border 值
  • 给父元素 padding 值
  • 给父元素 overfiow:hidden;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            .father {
                width: 600px;
                height: 600px;
                background-color: pink;
                /* border-top: 1px solid transparent; */
                /* padding-top:1px ; */
                overflow: hidden;
            }

            .son {
                width: 200px;
                height: 200px;
                background-color: #0000FF;

                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>

    </body>
</html>

盒子布局稳定性

ps 应用

  • ctrl+o: 关上文件
  • ctrl+r : 关上标尺
  • ctrl+ +：放大
  • ctrl+ –：放大
  • 按住空格 能够挪动视图
  • 吸管工具：汲取色彩
  • 选框工具：测量宽高

去掉列表默认的款式

    li {list-style:none;}

新闻案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            width: 300px;
            height: 230px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 0px 15px;
            background: url(images/line.jpg);
        }
        
        .nav h2 {
            font-size: 16px;
            padding-top: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #CCCCCC;
        }
        
        .nav ul li {
            height: 32px;
            line-height: 32px;
            list-style: none;
            padding-left: 15px;
            background: url(images/arr.jpg) no-repeat 0px center;
            border-bottom: 1px dashed #ccc;
        }
        
        .nav li a {
            color: #333;
            font-size: 12px;
            text-decoration: none;
        }
        
        .nav li a:hover {text-decoration: underline;}
    </style>
</head>

<body>
    <div class="nav">
        <h2> 最新文章 /New Articles</h2>
        <ul>
            <li><a href="#"> 北京招聘平面设计，网页设计，php</a></li>
            <li><a href="#"> 体验 javascript 的魅力 </a></li>
            <li><a href="#">jquery 的世界降临 </a></li>
            <li><a href="#"> 网页设计师的幻想 </a></li>
            <li><a href="#">jquery 中的链式编程是什么 </a></li>
        </ul>
    </div>
</body>

</html>

效果图

圆角边框

设置圆形

    border-radius:50%;

设置矩形

border-radius: 高度的一半

border-radius 的简写

border-radius: 左上角  右上角 右下角  左下角

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 设置圆角 */
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
        }

        /* 设置矩形 */
        div:nth-child(2) {
            width: 200px;
            height: 50px;
            background-color: red;
            border-radius: 25px;
        }

      
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

盒子的暗影

box-show: 盒子暗影

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            box-shadow: 20px 20px 2px 20px red inset;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>


css 书写标准

  • 选择器与 {} 之间保留空格 属性与属性值之间保留空格
  • 嵌套元素不应该超过三级
  • 属性值应以分号完结

正文完
css
发表至： css
2020-08-02
 0
记一次grid布局实战应用分享会
关于css:day15-怪异盒模型-h5新增标签-多媒体-新增表单-弹性盒
关于css:Sass的数据类型
关于css:vue-中使用-css-变量