CSS学习笔记 - 盒模型

外边距margin内边距padding背景background背景图background-image 边框border样式宽度颜色圆角边框图片border-image边框图片资源border-image-source 显示隐藏display溢出隐藏overflow单行文本溢出text-overflow多行文本溢出 盒尺寸box-sizing尺寸控制参考资料

简写对应四个边一个值四个边相同两个值1上边和下边，2左边和右边三个值1上边，2右边和左边，3下边四个值1上、2右、3下、4左（从头开始，顺时针）

外边距margin

设置（上下左右）方向的外边距

auto 自动支持负值支持百分比 margin: 10px 20px 30px 40px; /* 等同于 */ margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px;

内边距padding

设置（上下左右）方向的内边距

不支持负值支持百分比

背景background

支持纯色、渐变、图片

背景图background-image

支持多张 1.1. 用逗号分隔。先上后下 1.2. 相应控制属性也一样用逗号分隔。支持各种填充方式

边框border

样式

默认值：none

border-style: dashed;

搬运自 MDN

样式说明none和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。hidden和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。dotted显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。dashed显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。solid显示为一条实线。

宽度

支持px 和 %

border-width: 300px; border-[top|right|bottom|left]-width: 300px;

颜色

支持 #FFFFFF、#FFF、rgb(255,255,255)、rgba(255,255,255,1)

border-color : #FFF; border-[top|right|bottom|left]-color : #FFF;

支持px 和 %

圆角

border-top-[left|right]-radius : 25px; /* 左上右上 */ border-bottom-[left|right]-radius : 25px; /* 左下右下 */ border-radius: 25px 25px 25px 25px; /* 左下右下 */

边框图片border-image

语法

<'border-image-source'> || <'border-image-slice'> [ <'border-image-width'> | <'border-image-width'> ? <'border-image-outset'> ]? || <'border-image-repeat'>

边框图片资源border-image-source

/* 边框图片 */ border-image-source: url(image.jpg); /* 使用渐变色 */ border-image-source: linear-gradient(to top, red, yellow);

显示隐藏display

控制显示模式

选项说明none隐藏元素block显示为块元素inline显示为行元素，不能设置宽/高inline-block行级块元素，允许设置宽/高flex弹性盒模型grid网格布局

溢出隐藏overflow

选项说明hidden溢出内容隐藏scroll显示滚动条（有些浏览器会一直显示，有些在滚动时显示）auto根据内容自动处理滚动条

单行文本溢出text-overflow

overflow : hidden; /* 超出宽度隐藏 */ text-overflow : ellipsis; /* 超出隐藏用 ... 代替 */

多行文本溢出

overflow : hidden; /* 超出隐藏 */ text-overflow : ellipsis; /* 文本溢出时显示省略符号代表被修剪的文本 */ display : -webkit-box; /* 和 -webkit-line-clamp 结合使用，将对象作为弹性伸缩盒子模型显示 */ -webkit-line-clamp : 5; /* 限制显示的行数, 5表示最多显示5行。 为了实现该效果，需要组合其他的WebKit属性 */ -webkit-box-orient : vertical; /* 和 -webkit-line-clamp 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 */

盒尺寸box-sizing

控制宽度中是否包含外边距

值结果content-boxwidth 不包括 padding 和 borderborder-boxwidth 包括 padding 和 borderinherit从父元素继承 box-sizing 属性

尺寸控制

选项说明width宽度height高度min-width最小宽度min-height最小高度max-width最大宽度max-height最大高度fill-available撑满可用的空间fit-content根据内容适应尺寸

参考资料

MDN：盒模型 MDN：CSS_背景、边框 官方页面上有个推荐的样式生成器 MDN：CSS属性值定义语法