Bang

Appearance

2019-04-17    csscss元素尺寸css世界

前言 ​

上次去整了本张鑫旭大佬编的《CSS世界》，一直没有时间研读，仅记录一些之前未接触的内容。

块级元素 ​

粗略理解为 display 值为 table，block，list-item等值元素。具有独占一行水平流的功能，可以使用clear 属性。

list-item 出现项目符号理解 ​

元素可以理解为多个盒子构成，外在盒子，容器盒子（内在盒子），标记盒子（这个是list-item独有的盒子）。可以按照每种盒子具有自身的display来理解行为。block => block-flow inline-block => inline-block

理解width：auto ​

  1. 充分利用可用空间：表现在div，p等元素上，会尽可能扩伸。
  2. 收缩与包裹：表现在table，inline-block上面，收缩到合适。有种根据内容来设置min-width的感觉。
  3. 收缩到最小：table-layout：auto 会出现
  4. 超出限制：长连续的英文和数字会出现。还有 white-space:nowrap设置后的内联元素

元素的宽度是由什么决定的？ ​

外部尺寸 ​

指的是元素自身就能决定宽度

  1. 正常流，div，p等元素，总是尽可能扩伸。按照流来理解
  2. position为absolute，fixed等情况下对边属性都存在时。可以理解为，自身把自身拉开
  3. 显式设置宽度

内部尺寸 ​

指的是元素的尺寸由内部元素决定

  1. 包裹性的元素：下方inline-block宽度为123宽度
html
<div style="display: inline-block;">
  <div>123</div>
</div>
  1. 首选最小宽度：当父元素宽度设置为0时，子元素表现出最小宽度

伪元素::after ::before 的定义 ​

命中元素的最后|最前一个子元素

宽度分离 ​

当需要限定宽度时，把宽度定义单独提取出一个元素，box-sizing: border-content功能相同

宽度100% 和 高度100% ​

width：100% _ auto = 无效 height：100% _ auto = 无效。但是宽度这种未定义行为各个厂商把auto视为包含块的最小宽度来处理的。
要明白其中的原因要先了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。套用本例就是，先渲染父元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素宽度已经固定，此时的 width:100%就是已经固定好的父元素的宽度。宽度不够怎么办？溢出就好了，overflow 属性就为此而生的

如何让高度支持100% ​

position: absolute; 不过注意的是绝对定位的宽高百分比计算是相对于 padding box 的

超越! important和超越最大 ​

权重优先级 min-_ > max-_ > ! important

任意高度的展开动画效果 ​

通过过度 max-* 来实现效果

css
.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}
.element.active {
  max-height: 666px; /* 一个足够大的最大高度值 */
}

幽灵空白节点 ​

在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。
<div><span></span></div> 高度为span空白节点的高度

内联元素的定义 ​

可以看做外在盒子是 inline 的元素

BFC ​

块级格式化上下文

  1. 格式化上下文中的box在垂直方向排列
  2. 上下文中的垂直margin会合并，取最大那个
  3. 上下文中margin-left 会和容器的border-left 紧贴
  4. 上下文中高度会考虑浮动元素
  5. 上下文中的子元素不会和float-box 重叠
  6. 两个不同的BFC不会触发margin 重叠

盒子默认情况不下触发BFC，通过下面几种方式开启

  1. html 默认是BFC
  2. 存在float
  3. overflow 不等于visible
  4. display: inline-block inline-table table-cell
  5. position 是absolute或者fixed

字体大小 ​

字体大小建议设置为偶数倍，因为windows的默认字体支持的是偶数倍，对于奇数字体会表现成大小相同，但是间距变大的情况

​

元素设置100%的参考 ​

padding: 包含块的宽度 margin: 包含块的宽度 border: // 不能使用百分比 font-size: 相对于父元素的文子大小 background-size： 相对于背景区域来设置图片大小，只设置一遍另一边会等图片比例获取（auto） height: 包含块高度 width: 包含块宽度 left: 包含块宽度，从包含块的padding开始计算 top: 包含块高度 translate: 根据子元素本身，（考虑子元素box-size情况,相对的是border-box 计算的宽度或者高度（加了border还有padding还有content的宽度）

总结下来两个点，padding根据的包含块宽度，margin竖直方式按照包含块宽度translate 根据自身的border-box 宽度来计算，其余的都是常规逻辑

居中 ​

水平居中 ​

  1. inline-block + 父元素text-align: center
  2. absolute left:50% margin-left: 50px;
  3. absolute left:calc(50% - 50px);
  4. absolute left: 0 right: 0 margin: auto;
  5. absolute left: 50% transform: translate(-50%);
  6. flex justify-content: center;

垂直居中 ​

  1. line-height 和 vertical-algin: middle
  2. flex align-items: center;

css特殊关键字 ​

  1. unset 如果该属性是能够继承，表现和inherit 相同，如果是不能继承，使用initial
  2. initial 初始值
  3. none 表示忽略这条属性的解析
  4. auto
  5. inherit 父元素的值, 即使当前属性不能被继承

<color> ​

  1. transparent 表示rgba(0, 0, 0, 0)
  2. currentColor 表示当前色，一般指文本的颜色

grid ​

规划单元格 ​

grid-template: grid-template-rows / grid-template-columns 设置单元格轨道大小，fr 等比分配剩余空间，repeat类似于宏命令，会重复执行
在规划单元格时，通过 200px [col1-start] 这种方式可以给轨道线命令，如果一个轨道两侧的轨道线命令方式[x-start] 和 [x-end], 这个轨道将会被命令x

其中有auto-fill 和 auto-fit 能够在repeat中被使用，正常情况下，两个取值相同，在和minmax(200px, 1fr) 配置时有区别 ，autofill是使用先最小的200px来填充，比如总宽度是1500px, auto-fill 先填充7个单元格（即使没有7个项目），再将剩余的100px分配到7个单元格上面。auto-fit是先按照子项目个数来确定初始单元格，比如子项目只有3个， 单元格是按照3个来分配，再把剩余空间分配给这三个单元格。

还有比较常见的是百分比，百分比大小是根据容器的的宽度或者高度来计算的，如果是存在gap的情况，比如3等分需要repeat(3, calc(100% - 2 * 10px) / 3)来计算

还有个两个属性max-content和min-content, 一个会尽量把剩余空间填充满， 一个会最小填充。 auto等价于max-content

通过grid-template-area: "top top" "content content" "....... content"

这种方式还能生成具名的轨道，其中连续的... 会被处理成匿名的块。生成具名的轨道也会默认生成轨道线,比如[top-start] 和 [top-end]

大部分情况都写具体的属性， 不要用简写。不方便理解。

摆设单元格 ​

子项目通过摆设有三种情况，如果设置了order属性，按照order的大小，小的值有限排列 如果设置了grid-column或者grid-row，优先排列有定位属性的。，剩下的就是自动排列，规则是轨道的开始线必须要在上一个自动排序的项目后面

grid-areas: 设置子项目的具名轨道或者是grid-row-start / grid-column-start/ xx /xx 的缩写

子元素的定位是要么选择两边，要么选择一边再选择span的块，要么只选择span，span 指的是横跨的个数，也可以指定到横跨的具名轨道 span main表示横跨到下一个main之前(包含这个main)

对齐 ​

容器对齐 如果容器中子元素并不能撑满容器，比如容器长1000px；规划了3个轨道，一个轨道长200px; 就会有400px的空白 通过 justify-content 主轴方向调整 align-content 副轴调整或者 place-content简写来调整

子项目对齐，子项目能够通过容器统一调整或者子项目本身调整。 place-items = justify-items / align-items 容器统一调整 place-self = justify-self / align-self 子项目调整

注意区分 space-around - 在每个网格项目之间放置均匀的空间，在远端有一半大小的空间（子项目左右两边有相同间距，两个子项目相邻就会有两个间距， 第一个项目左边的空间只有中间的空间的一半） space-between - 在每个网格项目之间放置均匀的空间，远端没有空间 space-evenly - 在每个网格项目之间放置均匀的空间，包括远端（子项目左右共享间距，这样第一个子项目左边的空间和中间的间隙是相同的）

© 2018 xunserver | Powered by VitePress | 蜀ICP备17019511号