css零散知识总结

1.宽度分离原则demo链接

所谓“宽度分离原则”，就是CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存,width独立占用一层标签，而padding、border、margin利用流动性在内部自适应呈现。

<div class='nav'>
    <a href="" class="nav-a">导航1</a>
    <a href="" class="nav-a">导航2</a>
    <a href="" class="nav-a">导航3</a>
</div>

.nav{
    width: 200px;
    background: #cd0000;
}
.nav-a{
    display: block;
    margin: 0 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #b70000;
    color: #fff;
}
.nav-a:last-child{
    border-bottom: none;
}

2.单行文字居中，多行文字居左 demo链接

<div class='box'>
   <p>少量文字</p>
</div>
<div class='box'>
   <p>少量文字-少量文字-少量文字-少量文字-少量文字-少量文字</p>
</div>
  
.box{
    padding: 10px;
    text-align: center;
    background: red;
}
.box>p{
    display: inline-block;
    text-align: left;
    color: #fff;
}

3.首选最小宽度demo链接

中文为单个汉字的最小宽度，英文由连续的英文字符单元决定

<div class='ao'></div>
<div class='tu'></div>

.ao,.tu{
    margin-top: 20px;
    margin-left: 120px;
    display: inline-block;
    width: 0;
}
.ao::before{
    content: 'green凹white';
    outline: 2px solid red;
    color:#fff;
}
.tu::after{
    content: '凸world凸';
    outline: 2px solid red;
    color:#fff;
}

4.宽高百分比demo1链接 demo2链接

绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内，但是，非绝对定位元素则是相对于content box计算的

<div class='box'>
    <div class='child'>160-30*2-10*2 = 80</div>
</div>
<div class='box rel'>
    <div class='child'>160-10*2 = 140</div>
</div>


.box{
    margin-top: 50px;
    height: 160px;
    padding: 30px;
    border: 10px solid yellow;
    box-sizing: border-box;
    background-color: #beceeb;
}
.child{
    height: 100%;
    text-align: center;
    background-color: #cd0000;
}
.rel{
    position: relative;
}
.rel>.child{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

5.max-height上拉下拉更加顺滑demo链接

单个记录slideUp和slideDown的实现

6.幽灵空白节点

<div class='box'>
    <span></span>
</div>

.box>span{
    display: inline-block;
}

可以通过.box{font-size: 0;}去除

7.替换元素浏览器差异性

img,video,radio,frame,input,object,textarea

分为固有尺寸（img本身宽高）、html尺寸（html上的width和height设置）和css尺寸，权重逐渐递增

8.关于img标签的src

<img>的src=''会直接请求当前页面数据，直接不添加src属性才不会请求

9.替换元素和伪元素配合content的用法

content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成,类似于设置了user-select:none

正在加载中<dot>...</dot>

dot{
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before{
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}

@keyframes dot{
    33% { transform: translateY(-2em);}
    66% { transform: translateY(-1em);}
}

10.inline的padding

10.1 增加按钮的点击范围

inline的垂直方向padding不会影响上下布局，会发生重叠

<div></div>
<p>优雅地增加链接或<a href="">按钮</a>的点击区域大小</p>
<div></div>
 
    
div{
    height: 100px;
    background: red;
}
p{
    text-align: center;
}
p>a{
    display: inline;
    padding: 30px;
}

10.实现优美的管道分隔符

点击demo

11. padding百分比

padding百分比总是以元素父元素宽度为依据

11.1 元素宽高百分比实现

点击demo

12. background-clip属性

示例1

<div class='circle'></div>

.circle{
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 50px;
    background: red;
    background-clip: content-box;
    border: 50px solid red;
    border-radius: 50%;
    transform: scale(0.1);
}

示例2

<div class='circle'></div>

.circle{
    display: inline-block;
    width: 100px;
    height: 10px;
    padding: 20px 0;
    background: red;
    background-clip: content-box;
    border-top: 10px solid red;
    border-bottom: 10px solid red;
}

border-style:double

<div></div>

div{
    margin: 0 auto;
    width: 100px;
    height: 7px;
    border-top: 21px double red;
    border-bottom: 7px solid red;
}

13.等高布局

div class='equal-hight'>
    <div class='left'>
        只要元素的尺寸表现符合“充分利用可用空间”，
        无论是垂直方向还是水平方向，都可以通过margin
        改变尺寸。CSS世界默认的流方向是水平方向，因此，
        对于普通流体元素，margin只能改变元素水平方向尺寸；
        但是，对于具有拉伸特性的绝对定位元素，则水平或垂直方向都可以，
        因为此时的尺寸表现符合“充分利用可用空间”。这在4.3.4节会继续深入
    </div>
    <div class='right'>自适应的部分是文字</div>
</div>

.equal-hight{
    overflow: hidden;
}
.left,.right{
    width: 50%;
    float: left;
    color: #333;
    text-align: justify;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}
.left{
    background: red;
}
.right{
    background: green;
}

14.垂直margin合并

合并场景

相邻的兄弟元素
父级和第一个/最后一个子元素
空块级元素上下margin合并

解决方法

父级设置为块级格式化上下文
父级设置border-top/border-bottom
父级设置padding-top/padding-bottom
父级和第一个/最后一个元素之间增加内联元素

margin合并的计算规则总结为正正取大值正负值相加负负最负值”

15.margin:auto用法

margin:auto的填充规则如下

如果一侧定值，一侧auto，则auto为剩余空间大小。
如果两侧均是auto，则平分剩余空间。

15.1 子元素居右

<div class='father'>
    <div class='son'>margin初始值0，所以margin-left:auto会居右</div>
</div>

.father{
    margin: 0 auto;
    width: 300px;
    height: 100px;
    background-color: gray;
}
.father>.son{
    width: 200px;
    height: 100%;
    margin-left: auto;
    background-color: red;
}

改变文档流方向也可以实现垂直居中writing-mode: vertical-lr

15.2 子元素绝对定位左右垂直居中

<div class='father'>
    <div class='son'></div>
</div>

.father{
    margin: 0 auto;
    width: 300px;
    height: 300px;
    background-color: gray;
    position: relative;
}
.father>.son{
    margin: auto;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: red;
}

16. 三角形和梯形

<div class='angle-1'></div>
<div class='angle-2'></div>
<div class='angle-3'></div>
<div class='angle-4'></div>
<div class='angle-5'></div>


.angle-1{
    width: 0;
    border-width: 50px;
    border-style: solid;
    border-color: red transparent transparent transparent;
}
.angle-2{
    width: 0;
    border-width: 50px;
    border-style: solid;
    border-color: red red transparent transparent;
}
.angle-3{
    width: 0;
    border-width: 50px;
    border-style: solid;
    border-color: red red red transparent;
}
.angle-4{
    width: 0;
    border-width: 20px 100px;
    border-style: solid;
    border-color: transparent red red transparent;
}
.angle-5{
    width: 30px;
    height: 30px;
    border-width: 50px;
    border-style: solid;
    border-color: red transparent transparent transparent;
}

17.多行文字的垂直居中,关于vertical-align

由于vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线,vertical-align起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素

<div class='box'>
    <p>多行文字居中借助line-height和vertical-align来实现</p>
</div>
.box{
    margin: 0 auto;
    width: 200px;
    line-height: 120px;
    background: black;
}
.box p{
    margin: 0 20px;
    display: inline-block;
    color: #fff;
    line-height: 20px;
    vertical-align: middle;
    text-align: left;
}

18.实现水平垂直居中的弹框

<div class='container'>
    <div class="dialog">
        <div class="content">内容区域</div>
    </div>
</div>

.container{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    white-space: nowrap;
    font-size: 0;
    z-index: 99;
    overflow: auto;
}
.container::after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog{
    display: inline-block;
    vertical-align: middle;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    text-align: left;
    white-space: normal
}
.content{
    padding: 20px;
    width: 200px;
    height: 100px;
}

19. 锚点

实现锚点跳转的方法有两种，一种是标签以及name属性，还有一种就是使用标签的id属性

卡片切换可以采用锚点跳转和label-input聚焦两种方式实现

20.无依赖absolute用法

如果所有元素都不设置relative定位，则absolute相对当前元素可用padding/margin实现定位，好处就是无论字数多少或者padding/margin/border变动都不需要重新计算绝对定位位置

20.1 小图标定位

<div class="nav">
    <h4 class="nav-list">
        <a href class="nav-a">普通导航</a>
    </h4>
    <h4 class="nav-list">
        <a href class="nav-a">
            热门导航<i class="icon-hot"></i>
        </a>
    </h4>
    <h4 class="nav-list">
        <a href class="nav-a">
            新导航<i class="icon-new"></i>
        </a>
    </h4>
</div>

.nav {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 600px;
    margin: 1em auto; 
    background-color: #333;
    text-align: center;
}
.nav-list { 
    display: table-cell;
    font-weight: 400;
}
.nav-a { 
    display: block; 
    line-height: 20px; 
    padding: 20px; 
    color: #bbb; 
    text-decoration: none; 
}
.nav-a:hover { 
    color: #fff; 
}

.icon-hot { 
    position: absolute; 
    width: 28px; height: 11px; 
    margin: -6px 0 0 2px; 
    background: url(https://demo.cssworld.cn/images/6/hot.gif);
}
.icon-new { 
    position: absolute; 
    width: 12px; height: 13px; 
    margin: -6px 0 0 2px; 
    background: url(https://demo.cssworld.cn/images/6/new.png) no-repeat center;
}

20.2 form表单定位点击demo

20.3 下拉列表点击demo

21.关于滚动穿透

position:fixed蒙层之所以出现背景依然滚动，那是因为滚动元素是根元素，正好是position:fixed的“包含块”。所以，如果希望背景被锁定，可以借鉴“absolute模拟fixed定位”的思路，让页面滚动条由内部的普通元素产生即可。如果网站的滚动结构不方便调整，则需要借助JavaScript来实现锁定。如果是移动端项目，阻止touchmove事件的默认行为可以防止滚动；如果是桌面端项目，可以让根元素直接overflow:hidden。但是，Windows操作系统下的浏览器的滚动条都是占据一定宽度的，滚动条的消失必然会导致页面的可用宽度变化，页面会产生体验更糟糕的晃动问题，那怎么办呢？很简单，我们只需要找个东西填补消失的滚动条就好了。那该找什么东西填充呢？这时候就轮到功勋卓越的border属性出马了—消失的滚动条使用同等宽度的透明边框填充！

移动端

禁止touchmove

<div class="content"></div>
<div class="shade" id='shade'></div>
<script>
    document.getElementById('shade').addEventListener('touchmove', function(e){
        return e.preventDefault();
    })
</script>

pc+移动

设置高度元素父元素包裹性

<div style="max-height: 100vh;overflow: scroll;">
    <div class="content"></div>
</div>
<div class="shade" id='shade'></div>

window的pc端滚动条计算

<div class="content"></div>
<div class="shade" id='shade'></div>
<script>
    const content = document.getElementsByClassName('content')[0],
    shade = document.getElementById('shade'),
    doc = document.documentElement;
    let barWidth = 17;
    if(typeof window.innerWidth === 'number'){
        barWidth = window.innerWidth - doc.clientWidth;
    }//感觉没必要增加border，浏览器滚动条一直处于占位
    content.addEventListener('click',function(){
        if(content.classList.contains('visible')){
            doc.style.borderRight = '';
            doc.style.overflow = '';
        }else{
            doc.style.overflow = 'hidden';
            doc.style.borderRight = barWidth + 'px solid transparent';
        }
        shade.classList.toggle('visible')
    })
</script>

22.css元素的层叠顺序

当元素发生层叠的时候，其覆盖关系遵循下面准则：

谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
opacity的值不是1的时候，是具有层叠上下文的，层叠顺序是z-index:auto级别，跟没有z-index值的absolute/relative/fixed定位元素是平起平坐的
z-index负值渲染的过程就是一个寻找第一个层叠上下文元素的过程，然后层叠顺序止步于这个层叠上下文元素

23.字体格式用途

字体文件格式分别是．eot、.woff2、.woff、.ttf和．svg

svg格式是为了兼容iOS 4.1及其之前的版本，考虑到现如今iOS的版本数已经翻了一番，所以svg格式的兼容代码大可舍弃。
eot格式是IE私有的。注意，目前所有版本的IE浏览器都支持eot格式，并不是只有IE6～IE8支持。只是，IE6～IE8仅支持eot这一种字体格式。
woff是web open font format几个词的首字母简写，是专门为Web开发而设计的字体格式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4开始全面支持。
woff2是比woff尺寸更小的字体，小得非常明显。因此，Web开发第一首选字体就是woff2，只是此字体目前仅Chrome和Firefox支持得比较好。
ttf格式作为系统安装字体比较多，Web开发也能用，就是尺寸大了点儿，优点在于老版本Android也支持。

综合上面的分析，我们可以得到如下的结论。

svg格式果断舍弃。
如果无须兼容IE8浏览器，eot格式果断舍弃。
如果无须兼容Android 4.3之前版本手机，ttf格式果断舍弃。

24.选择器

普通选择器

div[class] 包含属性
div[class='a'] 属性值等于
div[class~='a'] 属性值有a 比如class='a b'
div[class^='a'] 属性值以a开头
div[class$='a'] 属性值以a结尾
div[class*='a'] 属性值中包含a字符串
li+li li的下一个兄弟元素

伪类选择器

a:visited 已经访问的链接
a:link 超链接

动态伪类选择器

input:focus 聚焦
a:active 用户鼠标点击下去激活链接
a:hover 用户鼠标悬停在链接上
el:first-child 作为子元素的第一个元素比如div:first-child 这个div必须是第一个子元素

伪元素选择器可以动态的插入假想的元素即虚拟元素

p:first-letter 为块元素首字母设置样式
p:first-line 文本的第一行
p:before 之前
p:after 之后

25. margin和padding

左右margin ,父级的content宽度等于子元素所有宽度之和，margin：auto可能为负值,从左向右，左边不能先auto
padding和margin的百分比值都是以父元素的宽度为百分比

行内非替换元素的左右外边距起作用，上下外边距不会影响视觉也不会影响其他元素排布，行内替换元素和块级元素的表现一样

元素增加点击范围可以通过border或者padding增加点击范围，然后用负的margin拉回来

<p>
  行内非替换元素的上下外边距和上下外边框都不会影响视觉高度和其他元素的排版
  <span class='border'>border</span>
  因此可用作元素点击区域的扩大
  <span class='margin'>margin</span>
  行内非替换元素的上下外边距和上下外边框都不会影响视觉高度和其他元素的排版
</p>

p{
    background: green;
    text-align: left;
}
span{
    background: red;
}
.border{
    margin: -20px;
    border: 20px solid yellow;
}
.margin{
    margin-top: 20px;
    margin-bottom: 20px;
}

26. vertical-align和line-height

行内元素的边框边界由font-size默认的行高而不是line-height决定,内容区域高度为字体浏览器默认的行高决定

关于vertical-align属性

代码

<p>包含元素 
  <img src="./1.jpeg" alt="">
  <img src="./1.jpeg" alt="">
  <img src="./1.jpeg" alt="">
  <img src="./1.jpeg" alt="">
  <img src="./1.jpeg" alt="">
  <img src="./1.jpeg" alt="">
</p>

p{
    line-height: 50px;
    background: #dedede;
}
img{
    display: inline-block;
    width: 30px;
    height: 30px;
}
img:first-child{
    vertical-align: top;
}
img:nth-child(2){
    vertical-align: bottom;
}

img:nth-child(3){
    vertical-align: text-top;
}
img:nth-child(4){
    vertical-align: text-bottom;
}
img:nth-child(5){
    vertical-align: middle;
}
img:nth-child(6){
    vertical-align: baseline;
}

top: 将元素行内框的顶端与包含该元素的行框顶端对齐

bottom: 将元素行内框的顶端与包含该元素的行框底端对齐

text-top: 将元素行内框的顶端与父元素内容区域顶端对齐

text-bottom: 将元素行内框的顶端与父元素内容区域底端对齐

middle: 将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐

baseline: 元素的基线和父元素基线对齐

27. background-attachment

background-attachment:fixed相对于视图区域定位背景图

28. float

浮动元素和当前行的内容区域顶端对齐
浮动元素只在所在父级元素的内容区域内浮动

其他

word-space单词间距，text-align:justify情况下word-space失效
letter-space字间距
white-space空白部分如何处理，用于换行
text-transform:uppercase|lowercase输入全部大写或小写
background-attachment：fixed让背景图固定，+outline用作局部非蒙层显示，也可用clip实现
direction:ltr|rtl规定流体的流向
writing-mode可以实现内容从上到下，从右到左的书写等，总之很强大