css 盒子模型介绍

最新推荐文章于 2025-08-05 18:26:43 发布

原创最新推荐文章于 2025-08-05 18:26:43 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

CSS 专栏收录该内容

10 篇文章

订阅专栏

块盒

display:block
常见标签 div p h1-h6
宽度占整个一行
高度默认为0，可根据内容自行撑开
设置高度有效

行盒

display:inline
常见标签 span a
默认宽度 auto 根据内容展示宽度
有空格会自动默认合并成一个空格
设置高度无效

行块盒

display:inline-block
常见标签input
高度随内容撑开
可设置高度有效
有空格折叠

盒子模型由哪些组成

content
padding
border
margin

// 300+10+10+10
<style>
    .box {
        width: 300px;
        height: 300px;
        background: yellow;
        padding: 10px;
        border: 10px dashed black;
        margin: 10px;
   }
</style>
<body><div class="box"></div></body>

设置元素背景区域

background-clip: content-box;  //覆盖content盒子
background-clip: border-box;   //覆盖边框  默认值
background-clip: padding-box;  //填充盒

计算元素高宽

box-sizing: border-box;//不超过设置的宽高 宽高-padding
box-sizing: content-box; //默认值

内边距 padding 外边框 margin 边框 border

块级都有效
行级左右有效上下不占据空间，没有自身的高度
行块盒除了不占整行其他与块级一样

可替换属性 img 相当于行内替换元素（input） img input textarea select 都是替换元素。这些元素往往没有实际的内容，即是一个空元素

溢出处理

.box {
        width: 200px;
        height: 200px;
        overflow: hidden;   /* 超出范围直接截取 */
        overflow: scroll;   /* 始终出现滚动条 */
        overflow-y: scroll; /* y轴 */
        overflow-x: scroll; /* x轴 */
        overflow: auto;     /* 需要滚动条时显示 */
 }

省略号

//单行省略
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
//多行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

文字换行word-wrap: normal|break-word;

normal  只在允许的断字点换行（中文自动换行，英文不会自动换行 浏览器保持默认处理）。
break-word  在长单词或 URL 地址内部进行换行。

恰当的断字点进行换行 word-break: normal|break-all|keep-all;

normal  使用浏览器默认的换行规则。
break-all   允许在单词内换行。
keep-all    只能在半角空格或连字符处换行。