전언
이 글은 에서 읽은 필기와 깨달음에 대한 것이니 잘못이 있으면 바로잡아 주십시오.
개술
CSS 디자인은 도문을 더욱 잘 보여주기 위한 것이다."HTML 요소는""외부 상자""의 내부 또는 블록 레벨에 따라 블록 레벨 요소와 내부 요소로 나뉘어집니다.HTML 요소는 바꿀 수 있는 내용이 있는지 여부에 따라 대체 요소와 대체 아닌 요소로 나뉘어집니다."
블록 레벨 요소
하나의 수평 흐름에는 하나의 블록 레벨 요소만 표시되고 여러 블록 레벨 요소는 줄바꿈으로 표시됩니다.display 값은 block,list-item,table입니다.

/*              ：*/
.clear:after{
    content:'',
    display:table;
    clear:both;
}

흔히 볼 수 있는 블록급 원소는 div, li, table이다.

      ={
      :{
            ：block|table{
            content-box:"width      "
            padding-box:
            border-box:"  box-sizing  width    "
            margin-box:
        },
            ：block,
    },
       (  )：  list-item,
}

[호환] IE는 before/after 위조 요소 디스플레이를list-item으로 지원하지 않습니다.width:auto의 표현:fill-available,fit-content,min-content,max-content
디스플레이의 높이와 절대 포지셔닝을 설정하면 원소가 height:100%을 지원할 수 있다. 전자는 콘텐츠-box에 비해 후자는padding-box에 비해 백분율을 계산할 수 있다.min-width/height의 초기값은 auto이고 max-width/height의 초기값은 none이다.가중치: min-width > max-with > width!important[기술]transition 코디 max-height로 전개 접기 애니메이션 만들기
인라인 요소
와 문자를 한 행에 표시할 수 있습니다.디스플레이 값은 inline, inline-block이고 inline-table에서 흔히 볼 수 있는 내연 요소는 button, img, input, select이다.

      ={
      :{
            ：block|table{
            content-box
            padding-box
            border-box
            margin-box
        },
            ："inline",
    },
}

       
    
        em
    
    
      em

HTML5의 내연 요소는 모든 줄 상자 앞에'유령 공백 노드'즉strut(기둥)이 있고 이 요소의 글씨체와 줄의 높은 속성을 가진 0폭의 내연 상자*(이와 같은 효과)

    ...



      ...

위의 유령 공백 노드 해결 방법:

내연원소 블록상화

용기line-height: 0

font-size:0

내연 요소 설정vertical-align:top|middle|bottom

대체 요소
어떤 속성을 수정하여 내용을 바꿀 수 있는 요소를 나타냅니다.예를 들어 img, object, video, iframe, textarea, input이다.내용 외관은 css의 영향을 받지 않고 많은 css 속성에 자신만의 표현 규칙이 있다.[호환]textarea & input i와 크롬은 inline-block, Firefox는 inline
[기교]img의 src와 콘텐츠를 조합하면 보이는 그림은 콘텐츠이고, 저장된 것은 src[기교]콘텐츠는attr(alt)와 사용자 정의 속성인attr(data-title),font-icon[기교]콘텐츠계수기counters를 설정할 수 있다.
상자 모형
padding
인라인 요소 패딩이 끊어집니다.
[기교]padding은 클릭 구역을 증가하고 닻 링크의 맨 위에 흰색을 남긴다. [기교]padding의 백분율 가로와 세로는 모두 너비에 대한 계산이고 블록 원소의 자체 적응 등 비례 직사각형을 실현한다.
[호환]ol/ul 목록 내장padding-left 단위는 px(chrome 내장 40px)[호환] Firefox의button은button::::-moz-focus-inner{padding:0}을 설정해야 padding을 제거할 수 있습니다
margin
margin 백분율 가로 세로 너비 대비 계산
[기교] margin의 한쪽은 auto이고 auto는 남은 공간 크기이다.양측 auto는 남은 공간을 고르게 나눈다 [기교] writing-mode를 사용하여 방향을 바꾸고margin: auto 수직 가운데[기교] absolute 상하 좌우 0 + 고정 너비 + margin: auto는 수평 수직 가운데로 할 수 있다
[호환] 용기가 굴러갈 수 있다면 i와 Firefox는padding-bottom을 무시하고 크롬은 굴러갈 수 없습니다. 전자는content-box를 초과하면 굴러갈 수 있고 후자는padding-box를 초과하면 굴러갈 수 없습니다.그래서 Margin-bottom을 추천합니다.margin
블록급 요소의margin-top과margin-bottom을 하나로 합칩니다.병합 계산: 양수 큰 값 양수 마이너스 더하기 음수 최음수 병합 장면:
1. 인접 형제 요소 margin 합병
디자인 이유: 도문 정보의 조판을 더욱 편안하고 자연스럽게 한다.

p { margin: 1em 0; }
   
   

2. 상위 및 첫 번째/마지막 하위 요소
디자인 이유:div의 의미 작용은 그룹을 나누는 것이고, 끼워 넣는 그룹은 합병을 막지 않도록 설계되었다.

• 对于margin-top合并，解决方案选其一：

  • 父元素设置为块状格式化上下文元素;
  • 父元素设置 border-top 或 padding-top 值;
  • 父元素和第一个子元素之间添加内联元素进行分隔。

• 对于margin-bottom合并，解决方案选其一：

  • 父元素设置为块状格式化上下文元素;
  • 父元素设置 border-bottom 或 padding-bottom 值;
  • 父元素和最后一个子元素之间添加内联元素进行分隔;
  • 父元素设置 height、min-height 或 max-height

3. 空块级元素margin合并

设计缘由：可以避免多个空标签（如

）影响排版

.father { overflow: hidden; }
.son { margin: 1em 0; }

• 对于空块级元素margin合并，解决方案选其一：

  • 设置垂直方向的 border 或 padding;
  • 里面添加内联元素(直接 Space 键空格是没用的);
  • 设置 height 或者 min-height。

margin无效情形

1. display:inline的费替换元素的垂直margin无效
2. tr|td或display:table-cell|table-row的margin无效
3. margin合并，见上节
4. 绝对定位元素非定位方位的 margin 值看上去“无效”
5. 定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位看上去“失效”。
6. 鞭长莫及（float和overflow）导致的 margin 无效
7. 内联特性(vertical-align)导致的 margin 无效

border

• border-width 不支持百分比值
• border-style 的默认值是 none

[兼容]虚线边框(dashed)在 Chrome 和 Firefox下，颜色区的宽高比是 3:1,颜色区和透明区的宽度比例是 1:1;而 IE 颜色区的宽高比是 2:1,颜色区和透明区的宽度比例也是 2:1
[兼容]虚点边框(dotted)在Chrome 和 Firefox 浏览器下是方点;而 IE 下则是小圆点

[技巧]双线边框(double)在3px以上才开始有双线边框的表现（包括retina屏）。
[技巧]利用double+solid实现三道杠
[技巧]缺省border-color可以统一用color设置边框颜色（currentColor）
[技巧]border绘制三角形

line-height

vertical-align:middle是对文字中线，不是相对容器

[技巧]内联图标使用height:1ex使得基线对齐

内联元素line-height的高度作用细节：
em-box=font-size（不含gq等字母尾巴，汉字图形高度略小于font-size）
行距 = line-height - em-box
半行距 = 行距/2
内容区域=文本选中带背景色的区域，高度受font-family和font-size影响（宋体内容区域和em-box等高）

块级元素高度不受 line-height 影响,平时我们看到的高度本质是由内联元素“行框盒子”line-height撑开高度(如div内有文字时)

替换元素高度不受 line-height 影响，平时我们看到的高度本质是“行框盒子”前面的“幽灵空白节点”撑开高度

内联替换元素和内联非替换元素在一起时会共同形成一个“行框盒子”，line-height决定这个行盒的最小高度。原因有二：

1. 替换元素的高度不受 line-height 影响
2. vertical-align

line-height 可以让单行或여러 줄内联元素近似垂直居中（“近似”：文字中线位置低于“行框盒子”；多行需搭配vertical-align）

line-height默认值为normal，不同字体不同。值为数值（如1.5）时：子元素继承该数值；值为百分比（150%）或长度（20px）时：子元素继承计算值。（注：line-height数值需向上舍入）

line-height 是相对于 font-size 计算的

vertical-align

只能应用于内联元素以及 display：table-cell 的元素。（浮动和绝对定位会让元素块状化，vertical-align失效）

负值全部都是往下偏移,正值全部都是往上偏移,而且数值大小全部都是相对于基线位置计算的,即vertical-align:baseline等同于vertical-align:0。

值类型：

• 线类,如 baseline(默认值)、top、middle、bottom;
• 文本类,如 text-top、text-bottom;
• 上标下标类,如 sub、super;
• 数值百分比类,如 20px、2em、20%等(相对于 line-height 的计算值计算的)

[技巧]vertical-align:middle的table-cell使得内部元素垂直居中

vertical-align:baseline的显示：

• 内联元素：字符x的下边缘
• 替换元素：替换元素的下边缘

• inline-block:

  • 里面无内联元素或overflow不是visible: margin底边缘
  • 否则：最后一行内联元素的基线

vertial-align:top的显示：

• 内联元素:元素底部和当前行框盒子的顶部对齐。
• table-cell 元素:元素底 padding 边缘和表格行的顶部对齐

vertial-align:bottom的显示：“顶部”换成“底部”,“上边缘”换成“下边缘”。

vertial-align:middle的显示：

• 内联元素:元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。
• table-cell 元素:单元格填充盒子相对于外面的表格行居中对齐。

vertical-align:text-top:盒子的顶部和父级内容区域的顶部对齐。
vertical-align:text-bottom:盒子的底部和父级内容区域的底部对齐
vertical-align:super:提高盒子的基线到父级合适的上标基线位置。
vertical-align:sub:降低盒子的基线到父级合适的下标基线位置。

流

float

浮动的本质就是为了实现文字环绕效果。
特性:
• 包裹性;
• 块状化并格式化上下文;
• 破坏文档流;
• 没有任何 margin 合并;

块状化：一旦 float 的属性值不为 none,则其 display 计算值就是block或者 table。

float 定位参考的是“行框盒子”。

BFC

如果一个元素具有 BFC,内部子元素不会影响外部的元素。（不会 margin 重叠）;可以用来清除浮动的影响（子元素浮动则父元素高度塌陷）。

触发BFC的情况：

• 根元素;
• float 的值不为 none;
• overflow 的值为 auto | scroll | hidden;
• display 的值为 table-cell | table-caption | inline-block
• position 的值不为 relative | static。

overflow

当子元素内容超出容器宽度高度限制的时候,剪裁的边界是 border box 的内边缘,而非 padding box 的内边缘。
PC端浏览器滚动条作用在html而不是body。
*[技巧]text-overflow:ellipsis搭配-webkit-line-clamp实现多行文字打点效果

absolute

absolute 是非常独立的 CSS 属性值，其样式和行为表现不依赖其他任何 CSS 属性就可以完成。

“包含块”规范：

• 根元素(html)被称为“初始包含块”，尺寸=浏览器可视窗口的大小。
• 对于其他元素，如果该元素的position :relative|static，则“包含块”由其最近的块容器祖先盒的 content box 边界形成。
• 如果元素 position:fixed，则“包含块”是“初始包含块”。

• 如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立，具体方式如下:

  • 如果该祖先元素是纯 inline 元素：

    • 假设给内联元素的前后各生成一个宽度为 0 的内联盒子（inline box），则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”；
    • 如果该内联元素被跨行分割了，规范并没有明确定义，浏览器自行发挥。
  • 否则，“包含块”由该祖先的 padding box 边界形成。
  • 如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

如果overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则overflow 无法对 absolute 元素进行剪裁。

[技巧]避免被“包含块”限制一柱擎天，使用white-space:no-wrap。
[技巧]右上角标签通过absolute配合透明border实现
[技巧]text-align实现“返回顶部”

[兼容]overflow 元素自身 transform，IE9 +、Firefox 和 Safari（OS X、iOS）剪裁； Chrome 和 Opera 不剪裁

relative最小化影响原则能避免创建新的层叠上下文。
默认的文档流是自上而下、从左往右，因此优先级top>bottom.left>right。

蒙层弹窗2种实现方案：

1. absolute模拟fixed定位，滚动结构调整大
2. js:
   移动端：阻止touchmove
   桌面端：根元素overflow:hidden + border代替滚动条

层叠上下文

特性

• 层叠上下文的层叠水平要比普通元素高。
• 层叠上下文可以阻断元素的混合模式。
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
• 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

创建

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位
• 一个 z-index != "auto"的 flex 项目 (flex item)，即：父元素display:flex|inline-flex
• opacity < 1 的元素
• transform != "none"的元素
• mix-blend-mode != "normal"的元素
• filter != “none”的元素
• perspective != “none”的元素
• isolation : "isolate"的元素
• position: fixed
• 在 will-change 中指定了任意 CSS 属性
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

层叠顺序

从低到高：

• background、border

  • 负z-index

    • block块状水平盒子

      • float浮动盒子

        • inline水平盒子

          • z-index:auto 或 不依赖z-index数值的层叠上下文(看成z-index:0)

            • 正z-index

[技巧]z-index布局不超2，浮层组件利用js层级计数不超9

文本

font-weight取值是100,200,...,800,900。系统自带不同粗细字体决定浏览器能否渲染。
italic 是使用当前字体的斜体字体，而 oblique 只是单纯地让文字倾斜。
::first-letter包含符号(包括空格)，::before直到一个字符。
font属性:caption | icon | menu | message-box | small-caption | status-bar
[兼容]caption、icon、message-box 在 Windows下Chrome无效
[技巧]html { font: menu; }可以让浏览器字体跟随系统
font-face兼容写法：

@font-face {
    font-family: ICON;
    src: url('icon.eot');
    src: local('☺'),
        url('icon.woff2') format("woff2"),
        url('icon.woff') format("woff"),
        url('icon.ttf');
}

[기술] font-weight 응답식 아이콘text-indent의 백분율 값은 현재 요소의'포함 블록'에 비해 계산된 것이지 현재 요소가 아닙니다.[기교]text-indent+overflow:hidden은img의alt 테두리letter-space,word-spacing 기본normal,0이 아니라 마이너스,소수를 지원하며 백분율을 지원하지 않습니다.[기교] 화이트-space: nowrap 해결 사이즈가 너무 작고 수평 목록 전환 [기교] text-transform: uppercase 해결 신분증 인증 코드 입력 자동 대문자 [기교] 도움말:after 보행 조합 text-align:justify 양쪽 정렬
기타
위조: 일부 선택기에 특수한 효과를 추가하는 데 사용됩니다.(:active,:focus,:hover,:link,:visited,:first-child,:lang) 위조 요소: 선택기에 특수한 효과를 추가하는 데 사용합니다.(:first-letter,:first-line,:before,:after)visibility는 계승할 수 있으며 계수기에 영향을 주지 않으며display:none는 반대입니다.유니버설-bidi:bidi-override 강제 문자는direction:rtl|ltr 방향에 따라 writing-mode:horizontal-tb|vertical-rl|vertical-lrwriting-mode 특성:

수평방향도

일반 블록 요소는margin:auto를 사용하여 수직 중심

을 실현할 수 있습니다

text-align:center를 사용하여 그림의 수직 중심을

text-indent를 사용하여 텍스트 가라앉기 효과

전역 불가 outline: 0 none [기술]visibility와transition을 조합하여 정지 시간 표시를 실현하고 순간 숨기기 [기술] 큰 outline을 제거하여 금요일 반투명 커버를 실현한다. 커팅된 그림의 직사각형 펀칭과 웹 페이지의 밑부분을 채우기 [호환] display: none 서브 요소 배경 그림은 크롬 사파리에 불러오지 않고 다른 상황은 불러옵니다
CSS 우선 순위
유니버설 선택기;원소(유형) 선택기;클래스 선택기;속성 선택기;가짜ID 선택기,인라인 스타일