css揭秘读书笔记

currentColor属性让hr和段落相同的颜色：

div {
color: red;
}
hr {
background: currentColor;
/* 一定要设置高度*/
height: 0.1rem;
}
<div>
<p><hr>p里面的hr标签不变色<hr></p>
<hr>
</div>

background-origin:padding-box是背景图片的默认原点，background-position:right 10px bottom 10px;可以让图片偏移，如果不支持这个属性，可以这样background:url() no-repeat right bottom;

记忆border-image类似background，第一个属性是颜色可以是渐变，第二个是图像地址，第三个是切割位置 第四个是平铺方式 (默认stretch拉伸。repeat，round比较常用)

想把一个矩形盒子变成椭圆，只需要设置border-radius:50%;如果是一个正方形就会变成圆

关于border-radius圆角半角的详细理解：border-radius:50% / 100% 100% 0 0;就相当于border-radius:50% 50% 50% 50% / 100% 100% 0 0;左边是半径r1相当于x坐标，右边半径r2相当于y坐标，两个坐标确定一个圆心点，以这个点画出的圆角可能是四分之一圆(当r1，r2相等时)，可能是四分之一的椭圆(r2是r1的二倍时)，总结一下就是两点确定圆角区域，理解的时候可以想象把一个盒子放到了x坐标上。

快速记忆半圆角规则：11确定单角，51确定二上，15确定二右

图片应用半透明遮罩层：

<div class="layer">
<a href="#"><img src="demo.jpg"></a>
</div>
<style type="text/css">
.layer {
background-color:#000;
}
a {
transtion:opacity .5s;
}
a:hover {
opacity: .5;
}
</style>

为某个字符指定特殊的字体样式：

@font-face {
font-family: Ampersand;
src: local('Baskerville-Italic'),
local('GoudyOldStyleT-Italic'),
local('Garamond-Italic'),
local('Palatino-Italic');
<!-- 指定使用字体的Unicode码位，可以是区间 -->
unicode-range: U+26;
}
h1 {
font-family: Ampersand, Helvetica, sans-serif;
}
<!-- 标题中的&符号会应用Ampersand字体，其他文字会应用Helvetica字体 -->
<h1>html &amp; css</h1>

浮动元素的水平居中：

.box {
float: left;
position: relative;
left: 50%;
}
.box p {
float: right;
position: relative;
right: 50%;
}
<div class="box">
<p>我是浮动的</p>
<p>浮动居中</p>
</div>

高级选择器的组合使用：
这个选择器选中li为n的所有列表项
li:first-child:nth-last-child(n),
li:first-child:nth-last-child(n)~li{}
这个选择器选中li大于4的所有列表项
li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4)~li{}
这个选择器选中li最大为4的所有列表项
li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4)~li{}
这个选择器选中li为2到6个的所有列表项
li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6)~li{}

页脚固定到底部的解决方案

<header>这是头部</header>
<main>这是主要区域</main>
<footer>这是页脚</footer>
<style type="text/css">
mian{
min-height:calc(100vh - hh-fh);
box-sizing:border-box;
}
<!-- 另外一种完美的方法 -->
body{
display:flex;
min-height:100vh;
flex-flow:column;
}
main {
flex:1;
}
</style>

头部和页脚宽屏布局：

<footer>这是内容区域</footer>
<style type="text/css">
footer {
padding:20px;<!--回退机制-->
width:960px;
padding:20px clac(50% - 960px);
background:#ccc;
}
</style>