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
