css盒模型

一、内容尺寸

一般情况下，为元素设置width/height,指定的是内容框的大小。

内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然课件，可以使用overflow调整溢出部分的显示，取值如下：

取值	作用
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	强制在水平和垂直方向添加滚动条
auto	自动在溢出方向添加可用滚动条

示例：overflow:hidden;

二、边框

1、边框实现

语法：border:width style color;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

2、单边框设置

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

#d1{
    border:10px double gray;
}
div{
    border-top:20px solid red;  
}

3、网页三角标制作

元素设置宽高为0
统一设置四个方向透明边框
调整某个方向边框可见色

<style>
    div{
        width:0px;
        height:0px;
        border:10px solid transparent;/*transparent:透明*/
         border-left:10px solid red;
    }
</style>
--------------
/*箭头向右的三角标，注意：width的大小要一致，否则不是等边*/
==========================
<style>
    span{
        width:0px;
        height:0px;
        font-size:0;
        /*行内元素默认不能手动调高度，空标签默认高度为0，默认高度与字体大小有关可以设置字体大小为0实现高度为0的效果；*/
        border:10px solid transparent;
        border-left:10px solid gray;
    }
</style>

三角标制作演示

4、圆形边框

属性：border-radius 指定圆角半径
取值：像素值或百分比
取值规律：
- 一个值：表示统一设置上右下左
- 四个值：表示分别设置上右下左
- 两个值：表示分别设置上下左右
- 三个值：表示分别设置上右下，左右保持一致

<style>
    div{
        width:300px;
        height:50px;
        background:orange;
        /*上 右 下 左*/
        /*border-radius:10px 20px 30px;*/
        /*百分比表示参照元素自身尺寸,分别计算横轴半径和纵轴半径,统一设置四个角的圆角半径时,最多取到50%,改变元素形状*/
    /*border-radius:50%;*/
    border-radius:25px;
    }
/*创建h1,设置尺寸为100*100，自定义背景颜色，鼠标悬停时修改背景颜色并且显示为圆形*/
    h1{
        width:100px;
        height:100px;
        background:orange;
        /*过渡属性：在元素两种状态切换是添加平滑过渡效果*/
        transition:3s;/*鼠标放上面，3秒转变圆形，鼠标离开后3秒变回方形*/
    }
    h1:hover{
        width:100px;
        height:100px;
        background:blue;
        border-radius:50px;
        /*transition:3s;鼠标放上面，3秒转变圆形，鼠标离开后立即变回方形*/
    }
</style>

圆形边框演示

5、轮廓线

属性：outline
取值：width style color
区别：边框实际占位，轮廓不占位
特殊：取none可以取消文本输入框默认轮廓线

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{/*四边有5px的绿色轮廓实线*/
            outline:5px solid green;
        }
        input{
            /*取消表单控件焦点状态下默认轮廓线（无变化）*/
            outline:none;
        }
    </style>
</head>
<body>
    <h1>Python</h1>
    <input type="text">
</body>

轮廓线演示

6、盒阴影

属性：box-shadow
取值：offsetX offsetY blur (spread) color;
使用：不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向

offsetX	取像素值，阴影的水平偏移距离
offsetY	取像素值，阴影的垂直偏移距离
blur	取像素值，表示阴影的模糊程度，值越大越模糊
spread	选填，取像素值，阴影是否要延伸
color	设置阴影颜色，默认为黑色

<style>
    h2{
        width:300px;
        height:100px;
        background:pink;
        box-shadow:20px 10px 5px 3px red;
        /*阴影最佳不超过20px*/
    }
</style>

盒阴影演示

三、内边距

1. 属性：padding

2. 作用：调整元素内容框与边框之间的距离

3. 取值：

20px;　　一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左

4. 单方向内边距,只能取一个值：

padding-top
padding-right
padding-bottom
padding-left

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:200px;
            border:1px solid orange;
            /*padding:10px 50px 60px;*/
            padding-top:10px;
            padding-left:50px;
        }
        h1{
            width:200px;
            height:200px;
            background:pink;
            padding:50px;
            padding-top:10px;
            padding-left:50px;
        }
        span{
            width:200px;
            height:200px;
            border:1px solid blue;
            /*行内元素对盒模型属性不完全支持，不能设置宽高，不支持上下内边距*/
            padding:0 100px;
        }
    </style>
</head>
<body>
    <div>人生苦短</div>
    <h1>我学Python</h1>
    <span>人生苦短，我学Python</span>
</body>

内边距演示

四、外边距

1.属性：margin

2.作用：调整元素与元素之间的距离

3.特殊：

　　1)margin:0; 取消默认外边距

　　2)margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中

　　3)margin:-10px;元素位置的微调

4.单方向外边距：只取一个值

margin-top
margin-right
margin-bottom
margin-left

5.外边距合并：

1)垂直方向

　　1. 子元素的margin-top作用于父元素上

　　解决：

　　　　为父元素添加顶部边框；

　　　　或为父元素设置padding-top:0.1px;

　　2. 元素之间同时设置垂直方向的外边距，最终取较大的值

2)水平方向

　　块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;

　　行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距

　　行内元素水平方向上的外边距会叠加显示

　　带有默认边距的元素：

　　body,h1,h2,h3,h4,h5,h6,p,ul,ol{

　　　　margin:0;

　　　　padding:0;

　　　　list-style:none;

　　　　取消内外边距，取消列表样式，列表前无项目符号

　　 }

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:red;
        }
        #d1{
            background:yellow;
            border:1px solid blue;
            padding:50px;
            margin:50px;
        }
        b,span{
        /*行内元素不支持上下边距*/
            background:green;
            margin:50px;
        }
        b{margin-right:-55px;}
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <b>加粗</b>
    <span>span</span>
</body>

外边距演示

五、元素最终尺寸的计算

盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局

1.属性：box-sizing

2.取值：content-box/border-box

　　1）标准盒模型计算：各个属性值累加得到最终尺寸

　　　　box-sizing:content-box;

　　　　元素设置width/height指定的是内容框的大小

　　　　最终尺寸 = width/height+padding+border+margin

　　2）特殊盒模型计算（按钮元素）：

　　　　box-sizing:border-box;

　　　　元素设置width/height指定的是包含边框在内的区域大小

最终尺寸 = width/height+margin