盒模型盒子的组成部分盒模型的应用改变宽高范围改变背景覆盖范围溢出处理断词规则空白处理box:每个元素在页面中都会生成一个矩形区域即盒子盒子类型行盒display等于inline的元素不换行块盒display等于block的元素独占一行行盒在页面中不换行块盒独占一行display默认值为inline浏览器默认样式表设置的块盒容器元素、h1~h6、p行盒:span、a、img、video、audio盒子的组成部分无论是行盒还是块盒都由以下几个部分组成从内到外分别是内容content盒子的具体内容widthheight设置盒子内容的宽高内容部分通常叫做整个盒子的内容盒content-box填充内边距padding盒子边框到盒子内容的距离padding-left左内边距padding-rightpadding-toppadding-bottompadding简写属性padding转换成 上右下左如果上和下左和右的值分别相等那就只需要书写两组像素值第一组代表上和下第二组代表左和右若四个值都相当那就可以只书写一个值填充区内容区填充盒 padding-box3.边框 border边框边框样式border-style边框宽度border-width边框颜色border-colorsolid表示粗实线 dashed表示虚线border-style、border-width、border-color也是简写属性边框填充区内容区边框盒 border-box外边距 margin边框与其他盒子的距离和padding一样margin-top、margin-left、margin-right、margin-bottom速写属性margin盒模型的应用改变宽高范围默认情况下width和height设置的是内容盒宽高。页面重构师将psd文件设计稿制作为静态页面衡量设计稿尺寸的时候往往使用的是边框盒但设置width和height实际上是内容盒的尺寸精确计算用量取的实际数据减去边框盒border和填充盒padding-left的宽高为内容盒的宽高css3通过box-sizing属性 更改width和height为content-box、border-box的宽高。改变背景覆盖范围默认情况下背景覆盖边框盒可以通过background-clip进行修改具体和box-sizing类似溢出处理溢出内容在默认情况下是可见的overflow,控制内容溢出边框盒后的处理方式溢出部分是可见的overflow:visible;表示溢出部分隐藏 overflow:hidden;表示生成滚动条 xy分别表示生成横向滚动条和纵向滚动条 auto,表示自动当你需要的时候滚动条才会出现。 overflow-x:autooverflow-y overflow:scroll;断词规则用处不大了解即可在盒子不够大需要进行换行时从哪里断词的规则word-break:会影响文字在什么位置被截断换行normal:普通CJK字符(中文日文韩文)文字位置截断非CJK字符(如英文)在单词位置截断。break-all:截断所有所有字符都在文字处截断,无论中文还是英文在所有位置都会被截断keep-all:保持所有所有文字都在单词之间截断word-breakkeep-all 汉字句子会在空格处被截断空白处理表示溢出部分做不换行处理 即空白折叠仍会发生但不会换行white-space:nowrap;对于单行文本表示文本溢出后显示不完的地方对溢出部分用三个点表示text-overflow: ellipsis;pre里面的元素不会发生空白折叠white-space:pre; 这个属性所选中的不会进行空白折叠 white-space:nowrop; 表示空白折叠仍会发生但不会换行