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>