学习了 张鑫旭 的 《CSS世界》之后，记录下部分内容
1、文字少时居中显示，多时居左
p21
<style>
.box {
text-align: center;
width: 100px;
border: 1px solid;
}
.content {
display: inline-block;
text-align: left;
}
</style>
<div class="box">
<div class="content">
字少
</div>
</div>
<hr>
<div class="box">
<div class="content">
字有点多字有点多字有点多字有点多字有点多字
</div>
</div>
2、手写 凹凸 图案
p23 ，
利用了 inline-block 的宽度 是首选 最小宽度的特点，然后 连续的英文 在这里不会换行
<style>
.ao {
display: inline-block;
width: 0;
}
.ao::before {
content: 'LOVE 你 LOVE';
outline: 2px solid #cd0000;
color: #fff;
}
</style>
<div class="ao"></div>3、图片没有src时展示自定义内容
p53
- 当 img 没有 src 属性的时候，或者 src 属性为 空的时候，是 普通元素，可以有 ::after
当 有了 src， 就变成了替换元素，就不会 再有 ::after 了 ，或者说 ::after 元素就不会在 img 标签上生效
<style>
img {
display: inline-block;
width: 100px;
height: 100px;
/* 隐藏Firefox alt文字 */
color: transparent;
position: relative;
overflow: hidden;
}
img::after {
content: attr(alt);
position: absolute;
bottom: 0;
line-height: 100px;
width: 100%;
background-color: gray;
color: white;
left: 0;
text-align: center;
}
</style>
<img src="../images/icon-high.png" alt="这是一张图片">
<img src alt="这是一张图片">4、鼠标hover的时候，修改图片的 src 内容
p55
在这里 image 是替换元素，决定其这个性质的，是 content 属性，所以直接修改 content 属性，就能做到 修改 src
<style>
img{
height: 100px;
height: 100px;
}
img:hover {
/* 修改的就是 这个 content 属性 */
content: url(../images/icon-low.png)
}
</style>
<img src="../images/icon-high.png" hover-img="../images/icon-low.png" alt="" srcset="">5、展现loading 的省略号
p61
这里使用了 animation 动画属性，但是 使用的 动画函数 是 step-start 动画函数，没有过度，直接就是一帧一帧地绘制
<style>
.dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
font-style: initial;
}
.dot::before {
display: block;
content: '. . . .\A . . .\A . .\A .';
white-space: pre-wrap;
/* step-start 动画函数，没有过度，直接就是一帧一帧地绘制 */
animation: dotstep 4s infinite step-start;
}
@keyframes dotstep {
25% {transform: translateY(-3em)}
50% {transform: translateY(-2em)}
75% {transform: translateY(-1em)}
}
</style>
<span>拼命加载中<i class="dot">...</i></span>6、使用padding绘制图形
p81
这一块没什么原理好讲，但是
padding 设置 百分比的时候，无论是纵轴还是横轴，都是根据 父元素的宽度来的 ，margin 也是一样
<style>
.icon-dot{
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
background-color: gray;
background-clip: content-box;
border-radius: 50%;
box-sizing: border-box;
}
.icon-menu {
display: inline-block;
width: 100px;
height: 100px;
padding: 35px 0;
border: 10px solid;
border-left: 0;
border-right: 0;
background-color: black;
background-clip: content-box;
box-sizing: border-box;
}
</style>
<div class="icon-dot"></div>
<div class="icon-menu"></div>都说 padding 不能给 行内元素增加 上下，但是这里影响到的只是排版，实际上该增加的还是加上去了，所以上下的部分依旧可以被当作是 热区，也就是可以被点击的区域
所以想要不影响排版，又想增加点击区域，可以试着 使用padding
<style>
.btn {
padding: 20px;
background-color: yellowgreen;
}
</style>
<span class="btn">按钮</span>7、块级元素的左右对齐
p95
以前很常用的 margin: 0 auto 的变种，所以说，能不适用 float ，还是尽量不使用 float 吧
<style>
.content {
width: 200px;
border: 1px solid;
}
.left {
width: 100px;
height: 50px;
background-color: red;
margin-right: auto;
}
.right{
height: 50px;
width: 100px;
background-color: red;
margin-left: auto;
}
</style>
<div class="content">
<div class="left">左对齐</div>
<div class="right">右对齐</div>
</div>8、line-height撑起的高度
p126
- 可以看到这两个的父元素 都是 90px 的高度，也就是说，这里父元素的高度是根据最大的那个 line-height 决定的
有没有奇怪 这两个都 垂直居中了？其实这里还有一个东西，叫做 ‘幽灵子节点’ 这里默认的 vertical-align 是 baseline ，自然上下居中
<style>
.content1{
background: red;
width: 100px;
line-height: 90px;
}
.content1 span{
line-height: 20px;
}
.content2{
width: 100px;
background: red;
line-height: 20px;
}
.content2 span{
line-height: 90px;
}
</style>
<div class="content1">
<span>内容1</span>
</div>
<br>
<div class="content2">
<span>内容2</span>
</div>9、块级元素垂直居中
p131
重点还是在 table 布局上面，可以发现在 table 的 td 里面甚至 vertical-aligin 是可以生效的
<style>
/* 给父级元素设置 tab-cell */
.content {
height: 200px;
width: 200px;
vertical-align: middle;
display: table-cell;
border: 1px solid;
}
</style>
<div class="content">
<div class="cell">cell</div>
</div>10、图片下面的空隙
p135
有一个很常见的现象，那就是在 img 标签下面往往会有一个空隙
其实就是 文中常常提到的 “幽灵空白子节点”，往往需要设置 line-height: 0 或者 font-size: 0 来消除影响
<style>
.content {
border: 1px solid;
line-height: 0;
}
.ib {
display: inline-block;
}
</style>
<div class="content"><img src="../images/icon-high.png" alt=""></div>
11、icon和文字对齐
p139
实际上 是 让标签里面的字 ("文字") 和 右边的 字进行 对齐，然后把 那两个字 又隐藏掉，这样 无论两边 的字号有多大，都可以 进行 对齐了
<style>
.content {
line-height: 20px;
border: 1px solid;
margin-top: 100px;
}
.icon {
display: inline-block;
width:20px;
height:20px;
white-space: nowrap;
letter-spacing: -1em;
text-indent: -999em;
background: url(../images/point_right.png) no-repeat center;
}
.font{
/* 这里无论多大，都可以对齐 */
font-size: 40px;
}
</style>
<div class="content font">
<i class="icon">文字</i>前往
</div>12、弹框的水平垂直居中
p145
以前处理这个需求，往往是 使用 position: absolute 的定位 和 transform 的位移 来进行居中的，
不过 可以试着使用 line-height 加上 vertical-aligin 对齐 来解决这个问题
<style>
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 这里是 左右 居中 */
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
}
/* 这里是关键，将 after 设置为 垂直方向的 排列基准 */
.container::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
display: inline-block;
vertical-align: middle;
background-color: #fff;
width: 240px;
height: 100px;
padding: 20px;
text-align: left;
}
</style>
<div class="container">
<div class="dialog">
内容占位
</div>
</div>13、BFC
p160
- html 根元素
- float 不为 none
- overflow 的值为 auto scroll hidden
- display 为 table-cell table-caption inline-block
- position 不为 relative 或者 static
14、scroll和overflow
p176
传统的 设置滚动 是 overflow:hidden + position/transform， 但是在文中提出了一个新的思路，overflow + scrollTop
无需做 边界判断，也就是说，设置 为 0 就是 到顶了，设置 为 9999999(很大的数字) 最多也就是到底
和原生的 scroll 方法无缝对接
15、absolute
p179
- position: absolute 的边界 是 padding box 而不是 content box
- 在没有设置 top 等属性 ，这个元素本身的排版 是 和position relative 一致的，但是又不会占位置，不影响 其他元素的排版
- 也就是说，就是 定在了 原本应该处在的位置上的，而且可以使用 margin 来进行 定位，
- 上面两点，fixed 和 absolute 保持一致
16、伪元素提示框
p181
一个伪元素 作为 背景，一个伪元素 展示 文字
<style>
.tips[data-title] {
position: relative;
}
.tips[data-title]::before,
.tips[data-title]::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
}
.tips[data-title]::before {
white-space: nowrap;
content: attr(data-title);
top: -33px;
padding: 2px 10px 3px;
line-height: 18px;
border-radius: 2px;
background-color: #333;
text-align: left;
color: #fff;
font-size: 12px;
}
.tips[data-title]::after {
content: "";
border: 6px solid transparent;
border-top-color: #333;
top: -10px;
}
.tips[data-title]:hover::before,
.tips[data-title]:hover::after {
transition: visibility .1s .1s;
visibility: visible;
}
.icon-delete {
margin-top: 40px;
display: inline-block;
width: 40px;
height: 20px;
background-size: 16px;
}
</style>
<a href="javascript:" class="icon-delete tips" data-title="删除">删除</a>17、position模拟 fixed
p194
<style>
*{
padding: 0;
margin: 0;
}
.container {
height: 100px;
overflow: auto;
padding-top: 30px;
}
.head {
height: 30px;
/* top: 0; */
width: 100%;
text-align: center;
background-color: red;
color: white;
position: absolute;
}
</style>
<div class="container">
<header class="head">头部</header>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
<p>很多内容</p>
</div>18、计算滚动条的宽度
p210
全篇仅有的 js 代码
<style>
div{
height: 100px;
overflow: auto;
}
</style>
<body>
<div>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
</div>
<script>
var div = document.querySelector('div')
var width = div.offsetWidth - div.clientWidth;
</script>
</body>
2516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
