CSS 상자 모델의 네 가지 속성 소개(코드 포함)

"외부 상자"가 인라인 수준인지 블록 수준인지에 따라 요소를 인라인 요소와 블록 수준 요소로 나눌 수 있으며, 여부에 따라
컨텐츠를 교체하기 위해 요소를 교체된 요소와 교체되지 않은 요소로 나눌 수도 있습니다

1. 콘텐츠의 내부 간격, 배경색 및 기타 단일 확인란 스타일과 같은 CSS의 영향을 받지 않습니다. 2.

3. 많은 CSS 속성에는 수직 정렬에서 자체적인 성능 규칙 세트가 있으며 대체 요소는 기본적으로 기준선(문자 x의 아래쪽 가장자리)으로 설정되고 대체 요소의 기준선은 갑자기 아래쪽으로 정의됩니다. 요소의 가장자리

1.3 대체 요소의 크기 계산 규칙

대체 요소의 크기는 내부에서 바깥쪽으로 3가지 범주로 나뉩니다: 고유 크기, HTML 크기 및 CSS 크기

#🎜 🎜#

1. 고유 크기는 대체된 콘텐츠의 원래 크기를 나타냅니다. 예를 들어 사진, 비디오 및 입력이 독립된 파일로 존재하는 경우 모두 고유한 너비를 갖습니다. 및 높이

2. HTML 크기 , "HTML 크기"는 HTML 기본 속성을 통해서만 변경할 수 있습니다. 이러한 HTML 기본 속성에는 <img alt="CSS 상자 모델의 네 가지 속성 소개(코드 포함)" >의 너비 및 높이 속성, <input> 속성이 포함됩니다. ; size 속성, <textarea></textarea>의 cols 및 rows 속성#🎜🎜 ## 🎜🎜#HTML原生属性改变，这些HTML原生属性包括<img alt="CSS 상자 모델의 네 가지 속성 소개(코드 포함)" >的width和height属性、<input> 的size属性、<textarea></textarea>的cols 和 rows 属性

3. CSS 尺寸特指可以通过 CSS 的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box

尺寸计算优先级: CSS 尺寸 > HTML 尺寸 > 固有尺寸

二、content属性

注意，content属性不仅能用于::before/::after中，还能用于元素中，不过有一定兼容性。

在 Chrome 浏览器下，所有的元素都支持 content 属性，而其他浏览器仅在::before/::after 伪元素 中才有支持

案例1：基于伪元素的图片内容生成技术

HTML：

<img alt="美女沉思图" data-src="1.jpg">
<p><button>设置src属性显示图片</button></p>

var eleButton = document.querySelector('button'),
    eleImg = document.querySelector('img');if (eleButton && eleImg) {
    var initValueButton = eleButton.innerHTML;    // 图片地址
    var srcImage = eleImg.getAttribute('data-src');    // 移除该属性
    eleImg.removeAttribute('data-src');    // 按钮点击事件
    eleButton.addEventListener('click', function() {
        if (this.innerHTML == initValueButton) {
            this.innerHTML = '移除src属性';            // 图片显示
            eleImg.setAttribute('src', srcImage);        } else {
            this.innerHTML = initValueButton;            // src属性移除
            eleImg.removeAttribute('src');        }
    });}

CSS：

img {
    display: inline-block;    width: 256px; height: 192px;    /* 隐藏Firefox alt文字 */
    color: transparent;    position: relative;    overflow: hidden;}img:not([src]) {
    /* 隐藏Chrome alt文字以及银色边框 */
    visibility: hidden;}img::before {
    /* 淡蓝色占位背景 */
    content: "";    position: absolute; left: 0;    width: 100%; height: 100%;    background-color: #f0f3f9;    visibility: visible;}img::after {
    /* 黑色alt信息条 */
    content: attr(alt);    position: absolute;    left: 0; bottom: 0;    width: 100%;    line-height: 30px;    background-color: rgba(0,0,0,.5);    color: white;    font-size: 14px;    transform: translateY(100%);    /* 来点过渡动画效果 */
    transition: transform .2s;    visibility: visible;}img:hover::after {
    transform: translateY(0);}

原理：图片没有src时，::before和::after可以生效；给图片添加一个src地址时，图片从普通元素变成替换元素，原本都还支持的::before和::after

는 구체적으로 너비와 높이 또는 최대값을 나타냅니다. CSS의 너비/최소 너비 및 최대 높이/최소 높이로 설정된 크기는 상자 크기

2. 콘텐츠 속성

content 속성은 ::before/::after뿐만 아니라 요소에는 있지만 특정 호환성이 있습니다.

Chrome 브라우저에서는 모든 요소가 content 속성을 지원하는 반면 다른 브라우저는 ::before/::after 의사 요소만 지원합니다.

1. Case 1: 이미지 콘텐츠 생성 의사 요소 기반 기술 HTML:

img { content: url(1.jpg); }

<img  alt="CSS 상자 모델의 네 가지 속성 소개(코드 포함)" >

img:hover {
content: url(laugh-tear.png);
}

2. CSS:

   <h1>《CSS 世界》</h1>
   h1 {
       width: 180px;
       height: 36px;
       background: url(logo.png); /* 隐藏文字 */
       text-indent: -999px;
   }

Principle

元 素的 margin-top 和 margin-bottom 合并在一起了

如何阻止margin发生合并？

对于 margin-top 合并，可以进行如下操作(满足一个条件即可):

• 父元素设置为块状格式化上下文元素;

• 父元素设置 border-top 值;

• 父元素设置 padding-top 值;

• 父元素和第一个子元素之间添加内联元素进行分隔。

对于 margin-bottom 合并，可以进行如下操作(满足一个条件即可):

• 父元素设置为块状格式化上下文元素;

• 父元素设置 border-bottom 值;

• 父元素设置 padding-bottom 值;

• 父元素和最后一个子元素之间添加内联元素进行分隔;

• 父元素设置 height、min-height 或 max-height。

margin 合并的计算规则：

“正正取大值”“正负值相加”“负负最负值”

4.3 margin:auto深入

margin:auto 的填充规则如下
(1)如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
(2)如果两侧均是 auto，则平分剩余空间。

一侧auto应用

<div>
    <div></div>
</div>

.father {
    width: 300px;
}
.son {
    width: 200px;
    margin-right: 80px;
    margin-left: auto;
}

两侧auto，水平垂直居中

.father {
    width: 300px; height: 150px;
    background-color: #f0f3f9;
    position:relative;
}
.son {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    background-color: #cd0000;
    margin: auto;
}

注意：

display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素， 垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。

五、border属性

几个特点：

1. border属性值不支持百分比

2. border-style 默认值为none

3. border-color 默认值为currentColor

应用1：图片上传hover变色

.add {
    color: #ccc;
    border: 2px dashed;
}
.add:before {
    border-top: 10px solid;
}
.add:after {
    border-left: 10px solid;
}
/* hover变色 */
.add:hover {
    color: #06C;
}

应用2：优雅增加点击区域

/* box-sizing非border-box时 */
.icon-clear {
    width: 16px;
    height: 16px;
    border: 11px solid transparent;
}

应用3：三角形绘制

div {
    width: 0;
    border: 10px solid;
    border-color: #f30 transparent transparent;
}

border能构成三角形和梯形的原理如下：

通过改变width/height以及border-width在不同方位的尺寸，可以改变三角形的倾角方位和尺寸

应用4：border等高布局

.box {
    border-left: 150px solid #333;
    background-color: #f0f3f9;
}
.box > nav {
    width: 150px;
    margin-left: -150px;
    float: left;
}
.box > section {
    overflow: hidden;
}

border等高布局的局限性：

1. 由于 border 不支持百分比宽度，因此，适合至少一栏是定宽的布局

2. 等高布局的栏目有限制。基本上，border 等 高布局只能满足 2~3 栏的情况，除非正好是等比例的，那还可以使用 border-style:double 实现最多 7 栏布局

相关文章推荐：

CSS中流体布局、元素以及尺寸的介绍

css box-sizing属性（盒子模型）的用法介绍