前端学习笔记（三）

盒模型

HTML是由一个个html元素组成的

盒模型:把每一个html元素想象成一个盒子

本篇主要介绍两个方面：1.盒模型的结构；2.盒模型如何影响元素之间的位置关系

盒模型的结构:
   1.content(内容):用来显示内容(图片或者文字)
   2.padding(内边距):内容与边框的距离
   3.border(边框):元素的边框
   4.margin(外边距):元素与元素之间的距离(父子元素,兄弟元素)

在普通盒模型下:

普通盒模型又叫标准盒模型

盒子的宽=width + 左右padding + 左右border + 左右margin
盒子的高=height + 上下padding + 上下border + 上下margin
<style>
    #div0 {
        background-color:yellow;
        padding-left:50px;
        padding-right:60px;
        padding-top:70px;
        padding-bottom:80px;
        border-top:5px solid red;
        border-right:6px dotted black;
        border-bottom:7px dashed blue;
        border-left:8px solid pink;
        margin-top:40px;
        margin-right:50px;
        margin-left:60px;
        margin-bottom:70px;
    }
</style>

<div id="div0">
    这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div
</div>
content（内容）——盒子的内容，显示文本和图像。

背景色会渲染到border区域
   书写顺序可随意
   边框宽度可不写,默认3px
   颜色可不写,默认与当前元素文本默认色相同
<style>
    #div1 {
        background-color:yellow;
    }
</style>

<div id="div1">
    这是content这是content这是content这是content这是content这是content这是content这是content
</div>
padding（内边距）——清除内容周围的区域，内边距是透明的。
<style>
    #div2 {
        background-color:cyan;

        /*内边距 padding*/
        /*padding-left: 50px;
        padding-right:60px;
        padding-top:70px;
        padding-bottom:80px;*/

        /*简写 4个值 顺时针 上 右 下 左*/
        /*padding:10px 20px 30px 40px;	*/

        /*简写 3个值 上 左右 下*/
        /*padding:10px 20px 30px*/

        /*简写 2个值 上下 左右*/
        /*padding:20px 30px;*/

        /*简写 1个值 上下左右*/
        /*padding:20px;*/

        /*padding值为0时候,单位px可以不写*/
    }
</style>

<div id="div2">
    这是padding这是padding这是padding这是padding这是padding这是padding这是padding这是padding
</div>
border（边框）——围绕在内边距和内容外的边框。
<style>
    #div3 {
        /*
        设置一个边框需要三种值
        1.边框的宽度 px
        2.边框的类型
            solid:实线;
            dotted:小正方点;
            dashed:虚线;
        3.边框的颜色
        */


        background-color:green;

        /*border-top:5px solid red;
        border-right:6px dotted black;
        border-bottom:7px dashed blue;
        border-left:8px solid pink;*/


        /*简写*/
        /*border:3px solid orange;*/


        /*方向：上、右、下、左   （顺时针）*/
        border-width:10px 20px 30px 40px;
        border-style:solid dotted dashed solid;
        border-color:red blue yellow orange;
    }

    a{
        border:8px solid
    }
</style>

<div id="div3">
    这是border这是border这是border这是border这是border这是border这是border这是border
</div>
<a href="">这是a链接</a>
margin（外边距）——清除边框外的区域，外边距是透明的
<style>
    #div4{
        background-color:cyan;
        /*外边距 margin*/
        /*margin-top:40px;
        margin-right:50px;
        margin-left:60px;
        margin-bottom:70px; */

        /*简写 方法和效果与padding一样*/
        margin:10px 20px 30px 40px;
        margin:10px 20px 30px;
        margin:10px 20px;
        margin:10px;
    }
</style>

<div id="div4">
    这是margin这是margin这是margin这是margin这是margin这是margin这是margin这是margin这是margin
</div> 
margin的坑

1.相邻兄弟之间在垂直方向上margin会出现融合，会取两个元素中margin值较大的为融合后的值。
解决办法：
    1.padding代替
    2.只设置其中一个的margin

2.父子关系的元素，如果父元素和子元素都设置了margin,，子元素的margin会传递到父级。
解决办法
       1.父元素padding代替
       2.给父元素添加 overflow:hidden 样式(建议使用)
       3.给子元素加 float:left;或display:inline-block;
       4.给父元素或子元素透明边框加 border:1px solid transparent;
       5.给子元素绝对定位 postion:absolute;
       6.给子元素加 padding:1px;

margin合并的计算规则（兄弟和父子关系规则相同）：
1.正正最大指。
2.正负值相加。
3.负负最负值。

单个元素height为0时的自身margin合并：
1.正正值情况该元素的外部尺寸是最大的那个值
2.正负值情况该元素的外部尺寸是相加值。
3.负负值情况该元素的外部尺寸是绝对负值最大的值。

怪异盒模型下：

怪异盒模型又叫IE盒模型，和标准盒模型的区别就是：怪异盒模型的宽或者高包含padding和border

设置盒模型类型
       1.box-sizing:content-box 普通盒模型
       2:box-sizing:border-box 怪异盒模型

盒子的宽=width(左右padding+左右border)+左右margin
盒子的高=height(上下padding+上下border)+上下margin

auto

auto是一个值,可以帮助我们灵活的进行元素布局
在盒模型里面,只有width和margin可以用auto作为其值,auto一般用在块元素的横向布局上
   1.如果width,margin-left,margin-right三个值有一个为值auto,其余两个必须为定值.
   2.如果width,margin-left,margin-right三个值都为定值,发生冲突时系统会强制修改margin-right的值.
   3.如果margin-left和margin-right都为auto,width必须为定值

前端学习笔记（三）

盒模型

在普通盒模型下:

怪异盒模型下：

auto

猜你喜欢