CSS 学习笔记 - 盒模型

柔光的暖阳◎ 2022-12-03 13:14 224阅读 0赞

### CSS学习笔记 - 盒模型 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

<table> 
 <thead> 
  <tr> 
   <th>简写</th> 
   <th>对应四个边</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>一个值</td> 
   <td>四个边相同</td> 
  </tr> 
  <tr> 
   <td>两个值</td> 
   <td><code>1</code>上边和下边，<code>2</code>左边和右边</td> 
  </tr> 
  <tr> 
   <td>三个值</td> 
   <td><code>1</code>上边，<code>2</code>右边和左边，<code>3</code>下边</td> 
  </tr> 
  <tr> 
   <td>四个值</td> 
   <td><font>1上、2右、3下、4左（从头开始，顺时针）</font></td> 
  </tr> 
 </tbody> 
</table>

# [外边距margin][margin] #

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

*  auto 自动
 *  支持负值
 *  支持百分比

margin: 10px 20px 30px 40px;
    /* 等同于 */
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;

# [内边距padding][padding] #

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

*  不支持负值
 *  支持百分比

# [背景background][background] #

*  支持纯色、渐变、图片

## [背景图background-image][background-image] ##

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

# [边框border][border] #

## 样式 ##

默认值：`none`

border-style: dashed;

搬运自 MDN

<table> 
 <thead> 
  <tr> 
   <th>样式</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td align="left">和关键字 <code>hidden</code> 类似，不显示边框。在这种情况下，如果没有设定背景图片，<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width" rel="nofollow">border-width</a> 计算后的值将是 <code>0</code>，即使先前已经指定过它的值。在单元格边框重叠情况下，<code>none</code> 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td align="left">和关键字 <code>none</code> 类似，不显示边框。在这种情况下，如果没有设定背景图片，<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width" rel="nofollow">border-width</a> 计算后的值将是 <code>0</code>，即使先前已经指定过它的值。在单元格边框重叠情况下，<code>hidden</code> 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。</td> 
  </tr> 
  <tr> 
   <td>dotted</td> 
   <td align="left">显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width" rel="nofollow">border-width</a> 计算值的一半。</td> 
  </tr> 
  <tr> 
   <td>dashed</td> 
   <td align="left">显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。</td> 
  </tr> 
  <tr> 
   <td>solid</td> 
   <td align="left">显示为一条实线。</td> 
  </tr> 
 </tbody> 
</table>

## 宽度 ##

支持`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] ##

语法

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

### [边框图片资源border-image-source][border-image-source] ###

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

# [显示隐藏display][display] #

控制显示模式

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

# [溢出隐藏overflow][overflow] #

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

## 单行文本溢出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][box-sizing] #

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

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>结果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">content-box</a></td> 
   <td>width 不包括 padding 和 border</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>width 包括 padding 和 border</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承 box-sizing 属性</td> 
  </tr> 
 </tbody> 
</table>

# 尺寸控制 #

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>高度</td> 
  </tr> 
  <tr> 
   <td>min-width</td> 
   <td>最小宽度</td> 
  </tr> 
  <tr> 
   <td>min-height</td> 
   <td>最小高度</td> 
  </tr> 
  <tr> 
   <td>max-width</td> 
   <td>最大宽度</td> 
  </tr> 
  <tr> 
   <td>max-height</td> 
   <td>最大高度</td> 
  </tr> 
  <tr> 
   <td>fill-available</td> 
   <td>撑满可用的空间</td> 
  </tr> 
  <tr> 
   <td>fit-content</td> 
   <td>根据内容适应尺寸</td> 
  </tr> 
 </tbody> 
</table>

# 参考资料 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: /images/20221123/292b4ccbdb1a45348514622bc222451b.png
[margin]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin
[padding]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding
[background]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
[background-image]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image
[border]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
[border-image]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image
[border-image-source]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-source
[display]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
[overflow]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
[box-sizing]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
[MDN]: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
[MDN_CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders
[Link 1]: https://cssgenerator.org/
[MDN_CSS 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax