属性描述值?border边框样式（上右下左），可简写border:5px solid red;border-width设置四个边框的宽度border-width: 5px 10px 1px mediumborder-style设置 4 个边框线的样式dotted点、 solid线、 double双线、 dashed虚线border-color设置四条边框的颜色border-color:red green blue pink;border-radius设置四个 border-*-radius 圆角属性border-radius:15px 0;border-collapse表格的边框的合并设置collapse /k??l?ps/?padding设置所有（上右下左）内边距属性数值/百分比%：padding:10px 5px;?margin设置所有（上右下左）外边距属性，可负数数值/百分比%：margin:10px 5px 15px 20px;border、padding、margin都有四个边（上右下左，顺时针方向：top、right、bottom、left），可以一起设置，也可以分别设置 。在浏览器的调试模式下可以看到任何元素的盒子模型结构：
文章插图
?注意：margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间 ， 但是影响的是盒子外部空间 。盒子的范围到边框border为止 —— 不会延伸到margin。?外边距折叠 ：两个外边距上下相邻的元素，他们的外边距将合并为一个外边距（重叠在一起） ， 即最大的那个外边距的大小，而不是二者的外边距之和 。当然不是绝对的 ， 参考外边距重叠 。
文章插图
用边框画三角形：四个边框可以分别设置样式，设置其他三个变为透明色 ， 就可以画出一个三角形了 。
/*用边框画三角形：全部用边框填充*/<style>.border {border: solid 50px #6af36a;border-top-color: #368cee;border-bottom-color: #368cee;width: max-content;}</style><div class="border"></div>
文章插图
基于块级元素、内联元素的区别，盒子也分为两种：块级盒子 (block box) 和 内联盒子 (inline box) 。
块级盒子 (block box)：应用完整的盒子模型
- 自动换行 ， 宽度默认和父容器一样宽
- width、height有效，内边距、外边距、边框会将盒子周围的元素“推开” 。
- 盒子不换行，width、height无效，基于元素内容自动适应 。
- 垂直方向的内边距、外边距、边框有效，但不会把其他inline盒子推开 。
- 水平方向的内边距、外边距、边框有效，会把其他inline盒子推开 。
box-sizing设置（IE8支持 ， 之前IE都只有代替盒模型） 。box-sizing描述备注content-box标准盒子模型（默认值）：元素width、height仅限
Content内容 ， padding 和 border往外扩张 。如果给元素设置 width 、height，实际设置的是 content box 。整个盒子的宽高需再加上padding 和 border ， 是不是很反人类？是就对了！切换标准盒模型：box-sizing: content-box
文章插图
border-box替代（IE）盒模型元素width、height包含
Content、padding、border，padding 和 border都向内挤压 。切换代替盒模型：box-sizing: border-box有时候为了更精确的控制布局，会强制使用IE盒模型并初始内外边距为0：box-sizing: border-box; margin: 0px; padding: 0px;
文章插图
4.3、min/max-content内容尺寸下面的
*-content（IE）“值”用来设置元素的宽度、高度 ， 是基于盒子的内容来动态设置盒子尺寸 。尺寸值描述min-content最小内容尺寸，基于盒子内容
content最小的尺寸max-content最大内容尺寸，基于盒子内容content最大的尺寸fit-content适应内容尺寸（/f?t/适应，合适），会根据视口的大小自适应min-content、max-content<style>#d1 p{background-color: antiquewhite; padding: 3px;margin: 5px 0px;}</style><div id="d1"><p style="width:min-content;">标题H2 title：min-content</p><p style="width:max-content;">标题H2 title：max-content</p><p style="width:fit-content;">标题H2 title：fit-content</p><p style="width:auto;">标题H2 title：auto</p></div>
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSS 动画一站式指南
- 怎么看电脑配置高低（100个电脑基础知识)
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
- CSS 渐变锯齿消失术
- 1 人人都懂的HTML基础知识-HTML教程
- Redis 02: redis基础知识 + 5种数据结构 + 基础操作命令
- Docker_基础知识
- 前端开发日常——CSS动画无限轮播
- Vue3 JS 与 SCSS 变量相互使用
