- 块级元素：换行，有行宽高
行内元素：不换行，无行宽高
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（左到右 右到左流向）
省略文字可改前者还是后者
扫一扫
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
