《css世界》笔记

块级元素：换行，有行宽高 行内元素：不换行，无行宽高 inline-block：不换行，有行宽高【inline盒子包着block】【同理还有inline-table】包裹性（内部尺寸）效果显示相当于有个max-width：100%罢辽 拥有包裹性的元素： float浮动的元素 position为absolute或fixed的元素 display为inline-block, table-cell, table-caption, inline-flex的元素 宽度分离 box-sizing:border-box;任意高度的展开收起 <input id="check" type="checkbox"> <p>个人觉得，...</p> <div class="element"> <p>display:table-cell其他...</p> </div> <label for="check" class="check-in">更多↓</label> <label for="check" class="check-out">收起↑</label> .element { max-height: 0; overflow: hidden; transition: max-height .25s; } :checked ~ .element { max-height: 666px; } 替换元素：<img><input>等，改变属性内容可替换尺寸：固有尺寸<html尺寸<css尺寸counter() 页65 首先， counter-reset主要功能是用来标识计数器的作用域的。它只能作用于选择器上，它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），counter-reset还可以同时声明多个计数器比如： counter-reset: count 0 /*标识计数器count从1开始*/ counter-reset: count2 2 /*标识计数器count2 从3开始*/ counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器，count1，count2，count3*/

counter-increment表明计数器实际用到的范围 。他的值也包括两部分：第一个为计数器的名字，即counter-reset设置好的名字，第二个值标识递增的值（默认为1），比如：

counter-increment: count 1 /*表明每次递增 1*/ counter-increment：count 2 /*表明每次递增 2*/

最后一个，content和counter搭配使用，content主要是跟 :after, :before,::after,::before来搭配用的，counter主要是给元素插入计数器的值。 整体例子如下：

<dl> <dt>example</dt> <dd>example</dd> <dd>example</dd> <dd>example</dd> <dt>example2</dt> <dd>example2</dd> <dd>example2</dd> <dd>example2</dd> <dd>example2</dd> </dl> dl { counter-reset:test1 0;} dt { counter-increment: test1; counter-reset: test2 0;} dt:before{ content:counter(test1)"、";} dd{ counter-increment:test2;} dd:before{ content:counter(test1)"-"counter(test2)"、"; }

效果图如下：

background-clip:content-box|border-box|padding-box决定背景色从哪个盒子开始

颜色属性currentColor等同于当前文字颜色【背景色使用这个 hover只需改变color即可】

子元素使用margin-right后 父元素使用负margin

等高布局

.father { overflow:hidden; } .son-left,.son-right { margin-bottom:-9999px; padding-bottom:9999px; }

左对齐/右对齐

浮动，不建议使用。margin-left/right：auto左对齐则写右，右对齐则写左内联用text-align

格式化居中【元素有宽】：

position:absolute; width:100px; height:auto; left:0; right:0; bottom:0; top:0; margin:auto;

margin失效：

border无设置颜色时跟随当前元素颜色【同理还有box-shadow texr-shadow】

透明border

定位增大点击区域画三角形等高布局

文字后的icon对齐文字：height:1ex;background:center;

line-height垂直居中

.box { line-height: 120px; background-color: #f0f3f9; } .content { display: inline-block; line-height: 20px; margin: 0 20px; vertical-align: middle; } <div class="box"> <div class="content">基于行高实现的...</div> </div>

19. 浮动和绝对定位让元素块化 20. vertical-aligin只作用于内联 21. 用vertical-align实现弹框居中

<div class="container"> <div class="dialog"></div> </div> .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .dialog { display: inline-block; vertical-align: middle; text-align: left; font-size: 14px; white-space: normal; }

还可以非常灵活控制垂直居中的比例，比方说设置:

.container:after { height: 90%; }

则弹框不是垂直居中对齐，而是近似上下 2:3 这种感觉的对齐，反而会让人有视觉上居中的 感觉。 此方法实现的原理关键就是两个vertical-align:middle，前面“图片近似垂直居中” 那里只图片一个元素 vertical-align:middle 就实现了垂直居中，原因就是 line-height 大小设置得恰到好处，但是对于弹框，高度不确定，显然不能使用某个具体的行高值创建足够 高的内联元素。于是，这里借助伪元素创建了一个和外部容器一样高的宽度为 0的 inline- block元素。有种“幽灵空白节点”的感觉。 下面是原理作用的关键部分，在 5.3.7 节讲过如何分析多个vertical-align 的作用，根 据定义专注当前元素即可。vertical-align:middle定义是元素的中线和字符x中心点对齐。

在本例中，由于font-size设置为 0，所以x中心点位置就是.container的上边缘，此时，高度100%的宽度为0的伪元素和这个中心点对齐。如果中心点位置不动，这个伪 元素上面一半的位置应该在.container的外面，但是 CSS 中默认是左上方排列对齐的，所以， 伪元素和这个原本在容器上边缘的x 中心点一起往下移动了半个容器高度，也就是此时x中心 点就在容器的垂直中心线上。弹框元素.dialog也设置了 vertical-align:middle。根据定义，弹框的垂直中 心位置和x 中心点位置对齐，此时，x 中心点就在容器的垂直中心位置，于是.dialog元素就 和容器的垂直中心位置对齐了，从而实现了垂直居中效果。水平居中就text-align:center实现，非常好理解。 按照初衷，块级元素负责布局，内联元素设置内容。但是，这里的弹框居中却是把块级元素内联化，利用一些内联属性实现垂直居中效果，这也是不得已而为之，因为 vertical-align等内联属性确实比块级属性强悍，也正因为 CSS 世界在布局上的弱势，后来多栏布局、弹性盒 子布局以及栅格布局一个一个都出来补强了。 clear属性是让自身不能和前面的浮动相邻，直接用clear:both浮动锚点和浮动定位 <h3>标题<a href="#">更多</a></h3> 如果a标签直接用右浮动(对齐第二个行框盒子 浮动锚点是float元素所在的“流”中的一个点，这个点本身并不浮动，就表现而言 更像一个没有 margin、border和padding 的空的内联元素。浮动参考指的是浮动元素对齐参考的实体。

float元素的“浮动参考”是“行框盒子”，也就是 float 元素在当前 “行框盒子”内定位。 24. :after等伪元素都是默认内联水平26. 抽象类名，通用css一个类27. 除非overflow-x和overflow-y的属性值都是visible否则visible会被当成auto来解析28. <a herf="javascript:">url地址不能出现# 25. 选项卡 “focus 锚点定位”，只要定位的元素在浏览器窗体中，就不会触发窗体的滚动，也就是选项卡切换的时候 页面不会发生跳动。

<div class="box"> <div class="list"><input id="one">1</div> <div class="list"><input id="two">2</div> <div class="list"><input id="three">3</div> <div class="list"><input id="four">4</div> </div> <div class="link"> <label class="click" for="one">1</label> <label class="click" for="two">2</label> <label class="click" for="three">3</label> <label class="click" for="four">4</label> </div> .box { height: 10em; border: 1px solid #ddd; overflow: hidden; } .list { height: 100%; background: #ddd; position: relative; } .list > input { position: absolute; top:0; height: 100%; width: 1px; border:0; padding: 0; margin: 0; clip: rect(0 0 0 0); }

原理其实很简单，就是在每个列表里塞入一个肉眼看不见的<input>输入框，然后选项卡 按钮变成<label>元素，并通过for 属性与<input>输入框的 id 相关联，这样，点击选项按 钮会触发输入框的 focus行为，触发锚点定位，实现选项卡切换效果。

绝对定位是相对于当前位置再作改变，不一定要用left、top，可以用外边距（祖先元素无非定位元素）外框按钮 <div class="alignright"> <span class="follow"></span> </div> .alignright { height: 0; text-align: right; overflow: hidden; } .alignright:before { content: "\2002"; } .follow { position: fixed; bottom: 100px; z-index: 1; }

\2002 表示某一种空格。通过插入显式的内联字符，而非借助飘 渺的“幽灵空白节点”实现所有浏览器下的一致表现。 使用:before伪元素在前面插入一个空格，此时.alignright设置text-align:right， 则此空格对齐主结构的右边缘显示，后面的固定定位元素(同绝对定位元素)由于“无依赖定 位”特性，左边缘正好就是主结构的右边缘，天然跑到主结构的外面显示了，而这个效果正是 固定在右下角的“返回顶部”以及“反馈”小按钮布局需要的效果。 此方法兼容性很好，层级单纯，唯一的问题就是插入了一个空格，会占据一定的高度，这 是不推荐的，最好就是有没有“返回顶部”等元素都不影响主结构的布局。所以，我们要把占 据的高度抹掉，方法很简单，设置 height:0同时overflow:hidden即可。 28. overflow和absolute 如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow 无法对absolute元素进行剪裁。 因此下面 HTML 中的图片不会被剪裁:

<div style="overflow: hidden;"> <img src="1.jpg" style="position: absolute;"> </div>

overflow元素父级是定位元素也不会剪裁，例如:

<div style="position: relative;"> <div style="overflow: hidden;"> <img src="1.jpg" style="position: absolute;"> </div> </div>

但是，如果overflow属性所在的元素同时也是定位元素，里面的绝对定位元素会被剪裁:

<div style="overflow: hidden; position: relative;"> <img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> </div>

如果overflow元素和绝对定位元素之间有定位元素，也会被剪裁:

<div style="overflow: hidden;"> <div style="position: relative;"> <img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> </div> </div>

如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽 比overflow元素高宽还要大，也都不会出现滚动条。例如，下面的 HTML 和 CSS 代码:

<div class="box"> <img src="1.jpg"> </div> .box { width: 300px; height: 100px; background-color: #f0f3f9; overflow: auto; } .box > img { width: 256px; height: 192px; position: absolute; }

图片高度 256px 比容器.box高度100px明显高出了一截，但是，没有滚动条出现。 实际开发的时候，绝对定位元素和非绝对定位元素往往可能混杂在一起，虽然绝对定位元素不能让滚动条出现，但是非绝对定位元素可以，于是，就可能出现另外一种很有特色的现象， 即当容器滚动的时候，绝对定位元素微丝不动，不跟着滚动，表现类似 fixed 固定定位，滚动到头和滚动到尾，图片的位置都是一样的。

剪裁属性clip clip:rect(top right bottom left) clip: rect(30px 200px 200px 20px) 裁剪fixed最佳可访问性隐藏 绝对定位：四个方向值则流体 相对定位：上下/左右只有一个方向起作用（上左）relative最小化影响 relative的最小化影响原则”是我自己总结的一套更好地布局实践的原则，主要分为 以下两部分: 尽量不使用relative，如果想定位某些元素，看看能否使用“无依赖的绝对定位”;如果场景受限，一定要使用relative，则该relative 务必最小化。

我们可以看一个简单的例子。例如，我们希望在某个模块的右上角定位一个图标，初始 HTML 结构如下:

<div> <img src="icon.png"> <p>内容 1</p> <p>内容 2</p> <p>内容 3</p> <p>内容 4</p> ... </div>

如果让大家去实现的话，我估计十有八九都会如下面这样实现:

<div style="position:relative;"> <img src="icon.png" style="position:absolute;top:0;right:0;"> <p>内容 1</p> <p>内容 2</p> <p>内容 3</p> <p>内容 4</p> ... </div>

但是，如果采用“relative 的最小化影响原则”则应该是如下面这般实现:

<div> <div style="position:relative;"> <img src="icon.png" style="position:absolute;top:0;right:0;"> </div> <p>内容 1</p> <p>内容 2</p> <p>内容 3</p> <p>内容 4</p> </div>

差别在于，此时relative 影响的元素只是我们的图标，后面的“内容 1”之类的元素依然保持开始时干净的状态。 因为相比普通元素，相对定位元素的层叠顺 序是“鬼畜”级别的。 32. 背景锁定：无法滚动 如果是移动端项目，阻止touchmove事件的默认行为可以防止滚动;如果是桌面端项目， 可以让根元素直接 overflow:hidden。但是，Windows 操作系统下的浏览器的滚动条都是占 据一定宽度的，滚动条的消失必然会导致页面的可用宽度变化，页面会产生体验更糟糕的晃动 问题，那怎么办呢?很简单，我们只需要找个东西填补消失的滚动条就好了。那该找什么东西 填充呢?这时候就轮到功勋卓越的border 属性出马了— 消失的滚动条使用同等宽度的透明 边框填充! 于是，在蒙层显示的同时执行下面的 JavaScript 代码:

var widthBar = 17, root = document.documentElement; if (typeof window.innerWidth == 'number') { widthBar = window.innerWidth - root.clientWidth; } root.style.overflow = 'hidden'; root.style.borderRight = widthBar + 'px solid transparent';

隐藏的时候执行下面的 JavaScript 代码:

var root = document.documentElement; root.style.overflow = ''; root.style.borderRight = '';

就可以实现我们期望的锁定效果了。 33. z-index属性只有和定位元素在一起时才有用（flex盒子子元素） 34. 层叠顺序：谁大谁上，后来居上

谁大谁上:当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。后来居上:当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。 字体图例 rgba颜色和hsla颜色不可全局a设置outline:none 一些浏览器内置的focus 效果可能和我们的网页设计格格不入，因此需要重置，要使用专门的类名。例如: .input { outline: 0; /* outline:none亦可*/ }

但是，必须把focus态样式加上。例如，我们可以让输入框的边框颜色高亮:

.input:focus { border-color: Highlight; } 自动填满屏幕剩余位置 <p>Designed Powered by zhangxinxu</p> 高度不足导致底部下面留白示意 <div class="footer"> </div> .footer { height: 50px; } .footer > p { position: absolute; left: 0; right: 0; text-align: center; padding: 15px 0; background-color: #a0b3d6; outline: 9999px solid #a0b3d6; clip: rect(0 9999px 9999px 0); }

最关键的 CSS 就是设置一个超大轮廓范围的outline 属性。例如，这里是 9999px，作 用是保证无论屏幕多高，轮廓色块也一定能够覆盖。 outline是无法指定方位的，只能被动地四周扩展。 还有就是采用这里的 clip 剪裁策略，让底部内容元素绝对定位，同时以上边缘和 左边缘为界进行裁剪，这样，就完全不用担心 outline 会覆盖上面的内容啦!代码组合为:

{ position: absolute; clip: rect(0 9999px 9999px 0); }

使用9999px这么大的值也是为了确保100%填满屏幕。 39. 自定义光标：cursor:url(xx.cur); chrome可以用png 40. direction:ltr/rtl（左到右 右到左流向） 省略文字可改前者还是后者