关于css:CSS盒子模型-3

1次阅读

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

网页布局的关键点：盒子

盒子的组成

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

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>

<!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: 表格合并

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

<!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：盒子间隔内容之间的间隔应用内边距之后盒子会变大

<!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 值撑开。

<!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 是外边距，是盒子与盒子之间的间隔

同理和 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>

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

2020-08-02

0

关于css:深入浅出-CSS-Modules

关于css:知识分享JavaScript基础语法

关于css:3D导航栏

关于css:openKylin社区SIG组2022年第四季度工作会议顺利召开

关于java:这几种实现线程的方法你一定要知道月薪20k以上的面试都会问到

关于css:CSS盒子模型-3

css 盒子模型

盒子模型组成部分

border

border 的边框写法

border-collapse

padding

padding 设置

padding 简写

新浪导航栏

盒子理论尺寸

课堂案例

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

margin

margin 的简写

块级盒子程度居中对齐

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

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

插入图片

背景图

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

外边距合并问题

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

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

盒子布局稳定性

ps 应用

去掉列表默认的款式

新闻案例

圆角边框

设置圆形

设置矩形

盒子的暗影

css 书写标准

站内搜索