:thinking:css深入学习
如果觉得对你帮助，记得打赏哦。
你想知道的 CSS 奇技淫巧，在这里，都有。
本系列围绕 CSS 展开，谈一些有趣的话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。
所有文章都在 Issues 中，同步更新到我的个人博客，也可以点击下面链接进行跳转。
本 CSS 系列同步更新在我的博客：
如何实现下列这种多列均匀布局：
看看下图，常见于一些导航栏中，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷最优雅的实现？
不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏 Tab 切换：
规定下面的布局，实现多列等高布局，要求两列背景色等高。
<div class="container">
<div class="left">多列等高布局左</div>
<div class="right">多列等高布局右</div>
</div>使用单个标签，如何实现下图所示的斜线效果:
如何实现下述的背景色渐变动画？
查看地址 https://zuobaiquan.github.io/css/CSS实现自适应高度布局.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{ margin:0;padding:0;}
.top {
width: 100%;
height: 40px;
background: #000;
color:#fff;
position:absolute;
top:0;
/*以上设置是重点必须的*/
text-align:center;
line-height:40px;
}
.bottom{
width:100%;
height:40px;
background:#000;
color:#fff;
position:absolute;
bottom:0;
/*以上设置是重点必须的*/
text-align:center;
line-height:40px;
}
.mainBox{
width:100%;
position:absolute;
top:40px;
bottom:40px;
/*以上设置是重点必须的*/
}
.mainBox .leftBox{
height:100%;
width:200px;
float:left;
margin-bottom:40px;
overflow: auto;
/*以上设置是重点必须的*/
border:6px solid green;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
line-height:40px;
}
.mainBox .rightBox{
height:100%;
margin-left:220px;
/*以上设置是重点必须的*/
border:6px solid crimson;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
text-align:center;
line-height:40px;
}
</style>
</head>
<body>
<div class="top">顶部，高度40px</div>
<div class="mainBox">
<div class="leftBox">左盒子，固定宽度200px，高度自适应铺满屏幕剩余高度</div>
<div class="rightBox">右盒子，距离左盒子20px，高度自适应宽度自适应铺满屏幕剩余高度</div>
</div>
<div class="bottom">底部，高度40px</div>
</body>
</html>
</body>
</html>
.close{
display: inline-block;
width: 14px;
height: 1px;
background: #95835e;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.close:after {
content: '';
display: block;
width: 14px;
height: 1px;
background: #95835e;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
实现方法：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
//滚动条整体部分
&::-webkit-scrollbar{
width: 3px;
height:10px;
background:rgba(0,0,0,0.5);
}
//scroll轨道背景
&::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px #eee;
border-radius: 10px;
background:#ccc;
}
//滚动条中能上下移动的小块
&::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px #eee;
background-color:rgba(0,0,0,0.5);
}
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
sticky 粘性定位 是相对定位和固定定位的混合。
元素在跨越特定阈值前为相对定位，之后为固定定位
#one { position: sticky; top: 10px; }
在 vIEwport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 vIEwport 视口回滚到阈值以下。
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
作用是无论父元素有多少子元素，都根据子元素的数量设定样式，而无需使用任何 class。
主要代码
/* one item */
li:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
原文 http://lightcss.com/styling-children-based-on-their-number-with-css3/
div class="user-btn">
可匹配到div,class为“-btn”结尾的元素
div[class$="-btn"]:active{
opacity:.8
}
div:[id^="item-"]{
color:red
}
div:[class*="-child"]{
color:red
}
[attribute|=value] 选择器用于选取属性值以指定值开头的元素
选择其 class 属性值以 "top" 开头的元素，并设置其样式
[class|=top]
{
background-color:yellow;
}
[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。
选择 titile 属性包含单词 "flower" 的元素，并设置其样式：
[title~=flower]
{
background-color:yellow;
}
"browserslist": [
"iOS >= 8",
"Android > 4",
"> 1%",
"last 2 versions",
"not ie <= 8"
]
Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+.
不对Doctype进行定义时，会触发怪异模式（IE盒子模型）
box-sizing属性可以为三个值之一：content-box（default默认属性），border-box，padding-box。
content-box，border和padding不计算入width之内（标准盒子模型）
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式（IE盒子模型）了~
ie8+浏览器支持content-box和border-box；
ff则支持全部三个值。
使用时：
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
参看链接地址 http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html
http://www.jianshu.com/p/9a3090f1924a
原因：
By default, Safari Mobile does not use the :active state unless there is a
touchstart event handler on the relevant element or on the .
解决方法：
1.body标签上添加ontouchstart空方法（页面首个元素起作用）
2.document或body添加touchstart空事件（页面首个元素起作用）
document.addEventListener("touchstart", function() {},false);
//或
document.body.addEventListener("touchstart", function() {})
/添加如下css配合/
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
3.单个a元素添加ontouchstart空事件
Click me
4.所有a元素添加touchstart空事件
var a=document.getElementsByTagName(‘a’);
for(var i=0;i<a.length;i++){
a[i].addEventListener(‘touchstart’,function(){},false);
}
参考： https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
padding-bottom:1.7rem;
}
/*iphone Xs Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
padding-bottom:1.7rem;
}
/*iphone XR*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
padding-bottom:1.7rem;
}
//定义一个方法并执行
(function(doc, win) {
var docEl = doc.documentElement;
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
var recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 50 * ((clientWidth >= 750 ? 750 : clientWidth) / 375) + 'px';
/*docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';*/
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
<style type="text/css">
.post>p:nth-child(3){color:red;}
/* .post>p:nth-of-type(2){color:red;} */
</style>
</head>
<body>
<div class="post">
<h2>我是h2标签</h2>
<h4>我是h4标签</h4>
<p>我是文章的第一个段落</p>
<p>我是文章的第二个段落</p>
<!-- ==我要变成第二个段落== -->
</div>
</body>
//这里我们发现
“我是文章的第一个段落”是红色的，其余的是黑色。
.post>p:nth-child(2){color:red;}
这时 都是黑色的。
.post>p:nth-of-type(2){color:red;}
这时第二个 p标签的颜色是 红色。
总结：“nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；“nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.