CSS盒模型

1 边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性上</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*border: 5px solid blue;*/
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/

            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
    </style>
</head>
<body>
<!--
1.什么边框?
边框就是环绕在标签宽度和高度周围的线条

2.边框属性的格式
2.1连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;

快捷键:
bd+ border: 1px solid #000;

注意点:
1.连写格式中颜色属性可以省略, 省略之后默认就是黑色
2.连写格式中样式不能省略, 省略之后就看不到边框了
3.连写格式中宽度可以省略, 省略之后还是可以看到边框

2.2连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;

快捷键:
bt+ border-top: 1px solid #000;
br+
bb+
bl+
-->
<div class="box"></div>
</body>
</html>

1 什么是元素的边框
2 边框属性的连写格式是什么,连写格式中的取值哪些可以省略
3 如何单独设置某一边的边框


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性下</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            /*border-width: 5px 10px 15px 20px;*/
            /*border-style: solid dashed dotted double;*/
            /*border-color: blue green purple pink;*/
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
    </style>
</head>
<body>
<!--
2.3连写(分别设置四条边的边框)
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;

注意点:
1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
2.这三个属性的取值省略时的规律
2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
2.3上 右 下 左 > 上 > 右下左边取值和上边一样


3.非连写(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
-->
<div class="box"></div>
</body>
</html>

1 如何单独设置每一边的宽度
2 如何单独设置每一边的样式
3 如何单独设置每一边的颜色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框练习</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            border: 5px solid black;
            /*
            border-top: 5px solid #000;
            border-right: 5px solid #000;
            border-bottom: 5px solid #000;
            border-left: 5px solid #000;
            */
            /*
            border-width:5px;
            border-style:solid;
            border-color: #000;
            */
            /*
            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: #000;

            border-right-width: 5px;
            border-right-style: solid;
            border-right-color: #000;

            border-bottom-width: 5px;
            border-bottom-style: solid;
            border-bottom-color: #000;

            border-left-width: 5px;
            border-left-style: solid;
            border-left-color: #000;
            */
        }
        .box2{
            /*
            border-top: 5px solid red;
            border-right: 5px solid green;
            border-bottom: 5px solid blue;
            border-left: 5px solid purple;
            */
            border-width:5px;
            border-style:solid;
            border-color: red green blue purple;
        }

        .box3{
            border: 5px solid red;
            border-right:5px dashed red;
            /*同一个选择器中后面的边框属性会覆盖前面的边框属性*/
        }
        .box4{
            border: 5px solid red;
            border-style:solid dashed solid dashed;
            /*border-right:5px dashed red;*/
            /*border-left:5px dashed red;*/
        }
        .box5{
            border: 5px solid #000;
            border-bottom: none;
            /*none 代表不需要边框*/
        }
        .box6{
            width: 0px;
            height: 0px;
            border-width:25px;
            border-style:solid;
            border-color: red white blue white;
            border-bottom:none;
        }
    </style>
</head>
<body>

<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<hr>
<div class="box5"></div>
<hr>
<div class="box6"></div>
</body>
</html>

2 内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距属性</title>
    <style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
        }
        .box2{
            padding-right:40px;
        }
        .box3{
            padding-bottom:80px;
        }
        .box4{
            padding-left:160px;
        }
        .box5{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
    </style>
</head>
<body>
<!--
1.什么是内边距?
边框和内容之间的距离就是内边距

2.格式
2.1非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

2.2连写
padding: 上 右 下 左;

2.这三个属性的取值省略时的规律
2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
2.3上 右 下 左 > 上 > 右下左边取值和上边一样

注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

-->
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>

1 什么是内边距
2 内边距属性的连写格式是什么,连写格式中的取值哪些可以省略
3 给标签设置内边距之后,标签占用的宽高会不会变化
4 给标签设置背景颜色和内边距之后,内边距的部分会不会显示背景颜色


3 外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距属性</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .box1{
            /*
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
            */
            /*margin:20px 40px 80px 160px;*/
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            margin:20px;
        }

    </style>
</head>
<body>
<!--
1.什么是外边距?
标签和标签之间的距离就是外边距

2.格式
2.1非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

2.2连写
margin: 上 右 下 左;

2.这三个属性的取值省略时的规律
2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
2.3上 右 下 左 > 上 > 右下左边取值和上边一样

注意点:
外边距的那一部分是没有背景颜色的
-->
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><div class="box4"></div>

</body>
</html>

1 什么是外边距
2 外边距属性的连写格式是什么,连写格式中的取值哪些可以省略
3 给标签设置外边距之后,标签占用的宽高会不会变化
4 给标签设置背景颜色和外边距之后,外边距的部分会不会显示背景颜色
不会


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并/塌陷现象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<!--
在默认布局的水平方向上, 默认情况下外边距是会叠加的, 不会出现合并现象
在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
-->
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

1 什么情况下会出现外边距合并现象
2 如何解决外边距合并现象

4 CSS盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒子模型</title>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 6px solid #000;
            padding: 20px;
            margin: 20px;
        }

    </style>
</head>
<body>
<!--
1.什么是CSS盒子模型?
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论
1.在HTML中所有的标签都可以设置
宽度/高度  == 指定可以存放内容的区域
内边距  == 填充物
边框  == 围墙
外边距  == 盒子和盒子之间的间隙
-->
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>

</body>
</html>

1 什么是CSS盒模型


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型宽度和高度</title>
</head>
<body>
<!--
1.内容的宽度和高度
就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证

3.元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
-->
</body>
</html>

1 如何计算元素内容的宽度和高度
2 如何计算元素的宽度和高度
3 如何计算元素占用空间的高度和宽度


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子宽高练习</title>
    <style>
        /*判断是否是内容宽高为100的盒子
        只需要看width/height是否为100即可*/
        .box1{
            width:50px;
            height: 50px;
            padding: 25px;
            background-color: green;
        }
        .box2{
            width: 96px;
            height: 96px;
            border: 2px solid #000;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        /*判断是否是元素宽高为200的盒子
        只需要看 边框 + 内边距 + 内容宽度/内容高度 时候等于200即可*/
        .box4{
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: red;
        }
        .box5{
            /*25+25+150 = 200*/
            width: 150px;
            height: 150px;
            border: 25px solid #000;
        }
        .box6{
            /*25+25+150 = 200*/
            /*5+5+20+20+150=200*/
            width: 150px;
            height: 150px;
            /*padding: 25px;*/
            padding:20px;
            border: 5px solid #000;
            background-color: blue;
        }
        /*判断是否是元素空间宽高为300的盒子
        只需要看 外边距+边框+内边距+内容宽度/内容高度*/
        .box7{
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .box8{
            /*
            50+50+25+25+25+25+100
            100 +50 +50 + 100
            300
            */
            width: 100px;
            height: 100px;
            padding: 25px;
            border: 25px solid #000;
            margin: 50px;
        }
        /*现有如下盒子模型, 要求增加padding属性为25之后仍然保持元素宽高为200

        元素宽高 = 边框 + 内边距 + 内容宽高
                 = 0 + 0 + 200 = 200
                 = 0 + 25 + 25 + 200 = 250
                 = 0 + 25 + 25 + 150 = 200
         规律:
         1.增加了padding之后元素的宽高也会发生变化
         2.如果增加了padding之后还想保持元素的宽高, 那么就必须减去内容的宽高
        */
        .box9{
            width: 150px;
            height: 150px;
            padding: 25px;
            background-color: red;
        }
        /*现有如下盒子模型, 要求增加border属性为20之后仍然保持元素宽高为200
        元素宽高 = 边框 + 内边距 + 内容宽高
                 = 0 + 0 + 200 = 200
                 = 0 + 20 + 20 + 200 = 240
                 = 0 + 20 + 20 + 160 = 200
          规律:
         1.增加了border之后元素的宽高也会发生变化
         2.如果增加了border之后还想保持元素的宽高, 那么就必须减去内容的宽高
        */
        .box10{
            width: 160px;
            height: 160px;
            border: 20px solid #000;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<!--<div class="box1">box1</div>-->
<!--<div class="box2">box2</div>-->
<!--<div class="box3">box3</div>-->
<!--<hr>-->
<!--<div class="box4">box4</div>-->
<!--<div class="box5">box5</div>-->
<!--<div class="box6">box6</div>-->
<!--<hr>-->
<!--<div class="box7">box7</div>-->
<!--<div class="box8">box8</div>-->
<!--<hr>-->
<div class="box9">box9</div>
<div class="box10">box10</div>
</body>
</html>

5 box-sizing属性

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子box-sizing属性</title>
    <style>
        .content{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .article{
            /*
            1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
            2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
            和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
            3.box-sizing取值
            3.1content-box
            元素的宽高 = 边框 + 内边距 + 内容宽高
            3.2border-box
            元素的宽高 = width/height的宽高
            */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
            border: 20px solid #000;
            padding: 20px;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>

</body>
</html>

1 box-sizing的作用是什么
2 box-sizing: content-box;的含义是什么
3 box-sizing: border-box;的含义是什么


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习</title>
    <style>
        .big{
            /*width: 350px;*/
            /*height: 350px;*/
            width: 500px;
            height: 500px;
            background-color: red;
            /*
            box-sizing: border-box;
            padding-top:150px;
            padding-left:150px;
            */
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            /*
            注意点:
            1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
            2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
            3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
            margin本质上是用于控制兄弟关系之间的间隙的
            */
            /*
            margin-top:150px;
            margin-left:150px;
            */
            /*
            注意点:
            1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
            2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效
            */
            margin:150px auto;
        }
    </style>
</head>
<body>
<!--
需求
有一个大盒子, 元素的宽高是500
有一个小盒子, 元素的宽高是200
要求将小盒子放到大盒子中, 并且让小盒子在大盒子中水平垂直居中
-->

<div class="big">
    <div class="small"></div>
</div>
</body>
</html>

6 盒子居中和内容居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中和内容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*text-align: center;*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--
1.text-align:center;和margin:0 auto;区别
text-align: center;作用
设置盒子中存储的文字/图片水平居中

margin:0 auto;作用
让盒子自己水平居中
-->
<div class="father">
    我是文字<br/>
    <img src="images/girl.jpg" alt="">
    <!--<div class="son"></div>-->
</div>
</body>
</html>

1 text-align:center;和margin:0 auto;区别是什么
2 text-align:center;会被后代元素继承吗

3 margin:0 auto;会被后代继承吗
不会

7 清空默认边距

实际开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清空默认边距</title>
    <style>
        /*
        *{
            margin: 0;
            padding: 0;
        }
        */
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin:0;padding:0
        }
        p{
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<!--
1.为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

2.如何清空默认的边距
格式
*{
            margin: 0;
            padding: 0;
}

3.注意点
通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好

-->
<p>葬爱:非主流文化的常用词,是当今网络流行术语.且流行于非主流杀马特之中。葬,即埋葬,爱,即爱情,翻译成外语就bury love</p>
</body>
</html>

1 为什么要清空默认边距
2 如何清空默认边距
3 企业开发中如何清空默认边距


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 2月21日 星期三 亲子日记第77天 今天是大年初六,六六大顺的好日子,也是我亲子日记写到第77天的日子,还是我进...
    涓涓流水_672f阅读 101评论 0 3
  • 在APP维护过程中,总是想懒省事儿,Ctrl+C加Ctrl+V,就连属性定义都懒得写@property,直接cop...
    34df2971538e阅读 174评论 0 0
  • 哈哈哈哈
    even依雯阅读 153评论 0 0