css相关

发表于

对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别 在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算 在内，但是，非绝对定位元素则是相对于 content box 计算的。

超越!important 指的是 max-width 会覆盖 width，而且这种覆盖不是普通的覆盖，是超级 覆盖，覆盖到什么程度呢?大家应该都知道 CSS 世界中的!important 的权重相当高，在业界，往 往会把!important 的权重比成“泰坦尼克”，比直接在元素的 style 属性中设置 CSS 声明还要高， 一般用在 CSS 覆盖 JavaScript 设置上。但是，就是这么厉害的!important，直接被 max-width 一 个浪头就拍沉了。

min-width超越max-width

展开的效果

使用 height + overflow:hidden 实现。但是，很多时候，我们展 开的元素内容是动态的，换句话说高度是不固定的，因此，height 使用的值是默认的 auto， 应该都知道的 auto 是个关键字值，并非数值，正如 height:100%的 100%无法和 auto 相计 算一样，从 0px 到 auto 也是无法计算的，因此无法形成过渡或动画效果。

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

其中展开后的 max-height 值，我们只需要设定为保证比展开内容高度大的值就可以，因为 max-height 值比 height 计算值大的时候，元素的高度就是 height 属性的 计算高度，在本交互中，也就是 height:auto 时候的高度值。于是，一个高度 不定的任意元素的展开动画效果就实现了。

max-height 太大会有动画延时, 最好保证在安全范围内

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

padding

padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的! (可以用padding实现等宽的盒子)

button

button在不同浏览器中默认的padding值是不同的, 为了兼容可以做以下处理,既语义良好行为保留，同时 UI 效果棒兼容效果好的实现小技巧，那就是使用

1
2
<button id="btn"></button> 
<label for="btn">按钮</label>
1
2
3
4
5
6
7
8
9
button {
  position: absolute;
  clip: rect(0 0 0 0);
  }
label {
      display: inline-block;
      line-height: 20px;
      padding: 10px;
}

padding与图形绘制

可以利用background-clip与padding结合绘制一下简单图像

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。

如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果（查看 border-style 或 border-image），不然的话，这个属性造成的样式变化会被边框覆盖住。

background-clip: border-box 背景延伸到边框外沿（但是在边框之下）。
background-clip: padding-box 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box 背景裁剪到内容区 (content-box)外沿。
background-clip: text 背景被裁剪为文字的前景色。
background-clip: inherit

​

兼容

滚动条触发

Chrome 浏览器是子元素超过 content box 尺寸触发滚动条显示，

IE和Firefox浏览器是超过padding box尺寸触 发滚动条显示。

所以滚动条底部使用留白只有Chrome会显示, 此时应该使用margin来设置

margin

和 padding 属性一样，margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算 的。

margin合并

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个边距

(1)块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。

(2)只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流 是水平流，因此发生 margin 合并的就是垂直方向。

三种情况可能合并: 1. 相邻兄弟元素; 2. 父元素和第一个/最后一个子元素; 3. 空块级元素

合并规则: 正则取最大, 负负取最小, 正负相加

用margin实现垂直居中

1
2
3
4
5
6
7
8
.father {
       height: 200px;
       writing-mode: vertical-lr;
}
.son {
       height: 100px;
       margin: auto;
    }

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

1
2
3
4
5
6
7
8
9
10
> /* Keyword values */
> writing-mode: horizontal-tb;
> writing-mode: vertical-rl;
> writing-mode: vertical-lr;
>
> /* Global values */
> writing-mode: inherit;
> writing-mode: initial;
> writing-mode: unset;
>

水平垂直居中

绝对定位元素的 margin:auto 居中: 

1
2
3
4
5
6
7
8
9
10
11
12
13
//  IE8 及以上版本浏览器才支持
.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;
}

margin无效

一下情况margin值无效

  • display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素， 垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。
  • 表格中的和元素或者设置 display 值是 table-cell 或 table-row 的元素的 margin 都是无效的。但是，如果计算值是 table-caption、table 或者 inline-table 则没有此问题，可以通过 margin 控制外间距，甚至::first-letter 伪元素也可以解析 margin。
  • 绝对定位元素非定位方位的 margin 值“无效”。
  • 定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的 定位“失效”。

border

透明边框: border-right: 50px solid transparent;

绘制三角形

1
2
3
4
5
div {
      width: 0;
      border: 10px solid;
       border-color: #f30 transparent transparent;
    }

x-height

小写字母x的高度 => 决定基线

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

baseline 元素基线与父元素的基线对齐。

sub 元素基线与父元素的下标基线对齐。

super 元素基线与父元素的上标基线对齐。

text-top 元素顶端与父元素字体的顶端对齐。

text-bottom 元素底端与父元素字体的底端对齐。

middle 元素中垂线与父元素的基线加上小写x一半的高度值对齐。

top 及其后代的顶端与整行的顶端对齐。

bottom 元素及其后代的底端与整行的底端对齐。 如果元素没有基线baseline，则以它的外边距的下边缘为基线。

单位 ex

图标垂直居中, 可以用ex给图标做高度单位

1
2
3
4
5
6
.icon-arrow {
      display: inline-block;
      width: 20px;
      height: 1ex;
      background: url(arrow.png) no-repeat center;
}

line-height

对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。line-height不影响替换元素的高度.

行距 = line-height - font-size。

边距带小数是文字上边距，则向下取整;如果是文字下边距，则向上取整.

对于块级元素，line-height 对其本身是没有任何作用的，我们平时改变 line-height， 块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。

line-height:1.5、line-height:150%和 line-height:1.5em 这 3 种 用 法 是 一 模 一 样 的 ，最 终 的 行 高 大 小 都 是 和 f o n t - s i z e 计 算 值 ，但 是 ，实 际 上 ，l i n e - h e i g h t : 1 . 5 和另外两个有一点儿不同，那就是继承细节有所差别。如果使用数值作为 line-height 的属性值， 那么所有的子元素继承的都是这个值;但是，如果使用百分比值或者长度值作为属性值，那么所有 的子元素继承的是最终的计算值。

无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的 那个 line-height 决定的，我称之为“内联元素 line-height 的大值特性”

vertical-align

• 线类，如 baseline(默认值)、top、middle、bottom;
• 文本类，如 text-top、text-bottom;
• 上标下标类，如 sub、super;
• 数值百分比类，如 20px、2em、20%等。

vertical-align 起作用是有前提条件的，这个前提条件就是:只能应用于内联元 素以及 display 值为 table-cell 的元素。

vertical-align 的百分比值是相对于 line-height 计算的, line-height 的百分比值是相对于 font-size 计算的

一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible， 则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。

BFC 块级格式化上下文

如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻 云覆雨，都不会影响外部的元素。

触发条件

  • 根元素;
  • float 的值不为 none;
  • overflow 的值为 auto、scroll 或 hidden;
  • display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;
  • position 的值不为 relative 和 static。

要想彻底清除浮动的影响，最适合的属性不是 clear 而是 overflow。一般使用 overflow:hidden，利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。

当 absolute 和 float 同时存在的时候，float 属性是无任何效果的。

absolute

通元素的百分 比宽度是相对于父元素的 content box 宽度计算的，而绝对定位元素的宽度是相对于第一个 position 不为 static 的祖先元素计算的。

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