盒子模型

一张图搞定盒子模型

盒子模型

1.边框

div {
    width: 500px;
    height: 500px;
    border-width: 1px;  //边框宽度
    border-style: solid;  //边框样式
    border-color: green; //边框颜色
}

简写

div {
    width: 500px;
    height: 500px;
    border: 1px solid green;
}

边框指定各个边的样式

    <style>
        input {
            border-top: none;
            border-right: none;
            border-left: none;
            border-bottom: 1px solid ;
        }

    </style>
</head>
<body>
    <div>
        用户名： <input type="text">
    </div>
</body>

也可以这么写

        input {
            border: none;
            border-bottom: 1px solid ;
        }

表格的边框会重叠，导致设置为1px的两个盒子，边框重叠过后是2px

table,td{
    border-collapse: collapse;  //合并相邻边框
}

2.内边距padding

操控盒子里内容的位置
当给盒子指定padding值后发生了2件事
1）内容和边框有了距离，添加了内边距
2）盒子会变大

div {
    padding: 50px;
}

padding简写规则其他通用

值的个数	表达意思
padding:5px;	padding：上下左右内边距;
padding:5px 10px;	padding: 上下内边距左右内边距；
padding: 5px 10px 20px	padding：上内边距左右内边距下内边距；
padding: 5px 10px 20px 30px	padding: 上内边距右内边距下内边距左内边距；

应用：
字数不同的导航栏设计（重点）

新浪导航栏.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            height: 41px;
            background-color: #FCFCFC;
            /*上边框*/
            border-top: 3px solid #FF8500;
            /*下边框*/
            border-bottom: 1px solid #EDEEF0;
        }
        a {
            font-size: 12px;
            display: inline-block;
            text-decoration: none;
            color:rgb(44, 44, 34);
            line-height: 41px;
            /* background-color: pink; */
            padding: 0 20px; //已经居中不需要设置上下，只需要设置左右
        }

        .nav a:hover{
            background-color: #eeeeee;
            color: rgb(255,132,0);
        }
    </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>

3.内盒尺寸计算

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
如果盒子没有指定宽度或者高度，padding不会撑开盒子

4.外边距margin

操控盒子的位置
规则几乎和padding相同

    <style>
        div {
            width: 600px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>

5.块级元素居中和文本元素居中的区别

块级元素自动居中使用margin: auto;
文字水平居中text-align:center，也可以让行内元素和行内块级居中

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

插入图片：页面中的重要图片或者产品展示都是插入图片<img src="" alt="">；如果要移动图片的位置就需要用盒模型padding或者由于img是行内块元素，可以通过margin来移动

    <style>
        .pic,
        .bg {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            padding: 30px;  //方法一
        }
        .pic img {
            margin: 30px;  //方法二
        }
    </style>

小图标小按钮一般使用background；如果移动图片需要使用background-position

7.外边距合并
1）上下外边距合并
当上下两个盒子相遇时，下边距或者上边距大的那个会吞并小的那个，只显示一个

合并规则.png

解决方案：尽量只给一个盒子添加Margin值

2）嵌套块元素垂直外边距合并（塌陷）
父子关系，如果给子块元素设设置margin父子会一块跟着动

解决方案：
①给父元素定义上边框
②给父元素定义内边距
③给父元素添加overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            /*嵌套关系 垂直外边距合并  解决方案 */
            /*1. 可以为父元素定义上边框  transparent 透明*/
            /*border-top: 1px solid transparent;*/
            /*2. 可以给父级指定一个 上 padding值*/
            /*padding-top: 1px; */
            /*3. 可以为父元素添加overflow:hidden。*/
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

综合案例

新闻.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;   
        }
        .news {
            width: 298px;
            height: 198px;
            border: 1px solid rgb(204, 204, 204);
            margin: 50px auto;
            padding:15px;
            background: url(images/line.jpg);
        }
        .news h2{
            font-size: 18px;
            border-bottom: 1px solid #cccccc;
            padding: 5px 0;
            margin-bottom: 5px;

        }
        .newslist li{
            border-bottom: 1px dashed #cccccc;
            height: 30px;
            line-height: 30px;
            background: url(images/arr.jpg) no-repeat 5px center;
            /* background-repeat: no-repeat; */
    
        }
        .newslist a{
            text-decoration: none;
            color: #333;
            font-size: 12px;
            /* 因为li没有宽度，所以padding不会撑开盒子 */
            padding: 20px;
        }
        .newslist a:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <div class="newslist">
            <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>
    </div>
</body>
</html>

查漏补缺：
1）emm语法快速生成标签ul>li*5>a
2）去掉页面上所有列表的样式list-style:none;
3）对于最外层的盒模型，我们可以直接设置padding来对盒内所有模型控制边距，这样就需要一个一个设置其他的小盒子，例如，对.news设置padding后里面的h2以及newslist就不需要设置margin了
4）背景的通用写法background: url(images/arr.jpg) no-repeat 5px center;
5）盒内文字的位置可以使用padding或者margin都可以，只要盒子没有width都不会影响盒子的大小
6）对于盒子的分析要明确，这里是三个盒子，外边框一个，标题h2为行内块也算一个，最后一个就是li ；

CSS3圆角边框

圆形：
先写一个正方形，然后border-radius: 50%;
矩形圆角：
先写一个矩形，然后变为矩形高度的一半border-radius: height/2 px;