涨姿势时间——CSS

最新推荐文章于 2023-03-25 18:19:55 发布

置顶 AmberDeng

最新推荐文章于 2023-03-25 18:19:55 发布

阅读量651

点赞数

分类专栏：边边角角

本文链接：https://blog.csdn.net/AmberDeng/article/details/52523020

版权

边边角角专栏收录该内容

3 篇文章 0 订阅

订阅专栏

#记新遇到的小东西

1. `table` 宽度设置

 table-layout: fixed;

2. flex

flex子元素的高和父元素相同
[深入理解 Flex 布局以及计算](http://www.codeceo.com/article/flexbox-layout-and-calculation.html)

3. felx & ellipsis

flex container 加上 `min-width: 0`

4. 当flex遇上IE——bulma IE11

 - IE 不支持`.tile` 的 `min-height: min-content` ，所以不能用 `flex-basis: 0` ，改为 `flex-basis: auto`
 - IE 中 flex container 设置 `min-height` 以后，设置 `align-items: center` flex items 不会居中【解决：将 container 变为 flex item】
 [align-items, align-self not working on IE11](http://stackoverflow.com/questions/40775317/align-items-align-self-not-working-on-ie11)
 - `width: 100%; //fix for IE11 text overflow`

5. button很有个性啊

button后面有a标签，a标签垂直方向的位置会被button影响

<button class="button" onclick="console.log(1)">汉字</button>
<a class="link" href="">我是链接</a>
<style type="text/css">
	.button{
		font-size: 30px;
	}
	.link{

	}
</style>

6. aria-hidden

无障碍系列的一个鬼东西，详见 WAI-ARIA无障碍网页应用属性完全展示

7. animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见。

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

8. overflow:hidden + display:inline-block moves text upwards

9. white-space: pre-wrap;

亲测 IE8 下需手动禁用 CSS 再启用才起效，可以用 js 动态添加 style 解决


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>white-space: pre-line and pre-wrap</title>
<style type="text/css">
p {width: 25em; border: 1px dotted red;}
.cl1 {white-space: pre;}
.cl2 {white-space: nowrap;}
.cl3 {white-space: normal;}
.cl4 {white-space: pre-wrap;}
.cl5 {white-space: pre-line;}
</style>
</head>
<body id="www-meyerweb-com" class="css">

<p class="cl1">
[cl1] This paragraph should     show extra space  where there    would ordinarily         not be any.
     There should also be preservation of returns
as this sentence
     very clearly demonstrates.
</p>

<p class="cl2">
[cl2] This paragraph should not word-wrap, no matter how long the paragraph might be or over how many lines it would ordinarily wrap, as it has been set to <code>white-space: nowrap</code> and that should have the obvious effect.
</p>

<p class="cl1">
[cl1] This paragraph      should     show extra   space, <span class="cl3">[cl3] except in the       second half</span>.
</p>

<p class="cl4">
[cl4] This paragraph should     show extra space  where there    would ordinarily         not be any.  It should also wrap lines in any situation where they exceed the width of the containing element, such as with this sentence.

     There should also be preservation of returns
as this sentence
     very clearly demonstrates.
</p>

<p class="cl5">
[cl5] This paragraph should    not show extra spaces  where there    would ordinarily         not be any; in other words, whitespace is collapsed.  It should also wrap lines in any situation where they exceed the width of the containing element, such as with this sentence.

     However, there should be preservation of returns
as this sentence
     very clearly demonstrates.
</p>

</body>
</html>

10. 百分比计算规则

relative/-

属性参照
width、margin、padding【、left、right】父width
height【、top、bottom】父height
absolute

属性参照
padding、margin-right、left、right 父width
width、other-margin 父width+padding
height、top、bottom 父height+padding
line-height

属性参照
line-height font-size
transform

属性参照
width width+padding
height height+padding

属性	参照
width、margin、padding【、left、right】	父width
height【、top、bottom】	父height

属性	参照
padding、margin-right、left、right	父width
width、other-margin	父width+padding
height、top、bottom	父height+padding

属性	参照
line-height	font-size

属性	参照
width	width+padding
height	height+padding

以上 width、height 均指盒模型中计算出来的，不包含 padding 的

box-sizing: border-box; 先基于以上规则计算出大小，然后再应用box-sizing: border-box;【在盒模型中width、height减去padding】

CSS 优先级
media query 不算入优先级，所以最好写在后面，才会起效
order of precedence in css:
- Inline styles
- Embedded styles
- External styles
and selector precedence is:
- ID selector
- attribute selector
- class selector
- child selector
- adjacent sibling selector
- descendant selector
- type selector

11. 堆叠上下文

参考深入理解CSS定位中的堆叠z-index

z-index值不是auto，就会建立自己的局部堆叠上下文。【z-index:auto与z-index:0的值相等，但z-index:0会建立新的局部堆叠上下文】
计算规则
- auto值指当前堆叠上下文中生成的栈层次与其父框的层次相同
- 元素不会叠放在其堆叠上下文(即定位父级z-index为数字值)的背景之下，但可以叠放在其内容之下；当元素没有处于堆叠上下文中，元素不会叠放在<body>元素的背景之下，但可以叠放在其内容之下
堆叠显示
兼容性
- IE7定位元素的z-index的默认值是0，自动生成堆叠上下文
- 浮动元素且position是static，元素父级是relative，IE6中无论该元素父级的z-index如何设置都不起作用
- IE6下select设置z-index无效，且默认会堆叠在div上【resolve：可以利用iframe充当桥梁解决】
- CSS3下列属性会激活堆叠上下文
  1、z-index值不为auto的flex项(父元素display:flex | inline-flex)
  2、元素的透明度opacity值不等于1
  3、元素的变形transform不是none
  4、元素的mix-blend-mode值不是normal
  5、元素的filter值不是none
  7、will-change指定的属性值为上面的任意一个
  8、元素的-webkit-overflow-scrolling设置为touch