关于css:CSS盒子模型-3

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盒子模型-3

css盒子模型

盒子模型组成部分

border

border的边框写法

border-collapse

padding

padding设置

padding简写

新浪导航栏

盒子理论尺寸

课堂案例

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

margin

margin的简写

块级盒子程度居中对齐

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

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

插入图片

背景图

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

外边距合并问题

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

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

盒子布局稳定性

ps应用

去掉列表默认的款式

新闻案例

圆角边框

设置圆形

设置矩形

盒子的暗影

css书写标准

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于css:CSS盒子模型-3

css盒子模型

盒子模型组成部分

border

border的边框写法

border-collapse

padding

padding设置

padding简写

新浪导航栏

盒子理论尺寸

课堂案例

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

margin

margin的简写

块级盒子程度居中对齐

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

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

插入图片

背景图

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

外边距合并问题

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

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

盒子布局稳定性

ps应用

去掉列表默认的款式

新闻案例

圆角边框

设置圆形

设置矩形

盒子的暗影

css书写标准

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复