CSS3学习笔记

0.前言

0-1.关于私有前缀
    有时为了设置一个属性，需要加多个前缀，目的就说处理浏览器之间的兼容性

-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-o-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 2px 3px rgba(0, 0, 0, .1);

0-2.关于不透明度background-color:transparent与opacity:0的区别

background-color:transparent个background-color:rgba()设置的透明度是作用于背景的，不会被子元素继承。而opacity:0会被子元素继承

0-3.关于nth-child(n)，nth-of-type(n)等几个比较复杂的选择器

p:first-child{color:#f00;}  //先找到p标签，然后判断p是不是同级的“老大”，如果是就匹配
p:last-child{color:#f00;}   //先找到p标签，然后判断p是不是同级别的“老幺”，如果是就匹配
li:only-child {color: #f00;}    //先找li元素，然后看自己是不是"独生子",如果是，则匹配
li:nth-child(2) {color: #f00;}  //先找li元素，然后判断p是不是同级的"老几"，如果是，就匹配
p:first-of-type {color: #f00;}  //先找p元素，然后匹配它的同级同类型的"老大"
p:last-of-type {color: #f00;}   //先找p元素，然后匹配它的同级同类型的"老幺"
p:nth-of-type(2) {color: #f00;} //先找p元素，然后匹配它的同级同类型的"二哥"
p:nth-last-of-type(1) {color: #f00;}    //先找p元素，然后倒着匹配它的同级同类型的"老大"

0-4.border-radius椭圆的最简单的画法

.item:nth-child(6) .border-radius 
{
    border-radius: 90px/45px; //横轴斜杠纵轴就可以了
    height: 90px;   //然后设置和椭圆的椭圆相切的矩形的尺寸
}

0-5.对半椭圆的的理解

.item:nth-child(8) .border-radius 
{
    border-radius: 90px 90px 0 0 / 45px 45px 0 0; //和椭圆正切的局限的x-y轴投影长度
    height: 45px;  //正切矩形的尺寸
}

0-6.关于伸缩布局

section:nth-child(4) ul 
{
    display: flex; //css3增加了伸缩布局模式，使用这种布局，子元素的间距会自动调节
    justify-content: space-between;
}

1.属性

1-1定位

position(定位)

position:static;    //默认值，top，left，right，buttom不会起作用，不会脱离常规流
position:fixed;     //定位以浏览器窗口为参考，不会随滚动条滚动，类似广告
position:absolute;  //绝对定位，相对与static以外的第一个父元素，如果没有这是top，left那些，也不会脱离常规流
position:relative;  //相对定位

1-2 文本

text-transform（英文大小写转换）

text-transform:none; //默认值，不会转换，要想转换，只有通过后台设置了
text-transform:capitalize;  //将每个英文单词的第一个字母转换成大写，其它的不管，如果第二位或后面的已经是大写了，就非常尴尬
text-transform:lowercase;   //所有的英文单词转换成小写
text-transform:uppercase;   //所有的英文单词转换成大写

white-space(空格和换行符的处理)

word-wrap:normal;   //默认值，忽略空格和换行
white-space:pre;    //保留空格和换行，会溢出
white-space:pre-wrap;   //优化空格（超出本行下行没空格），保留换行，不会溢出
white-space:pre-line;   //优化空格（多个空格合并为一个空格），保留换行，不会溢出
white-space:nowrap; //换行或多个空格合并为一个空格，会溢出

tab-size（设置tab制表符的长度，结合pre标签一起使用）

tab-size:4; //制表符占4个空格的长度

word-break（换行方式，好像是根据国家的语言不同，用不同的方式换行，不咋用）

word-wrap (是否允许文字顶开盒子)同 overflow-wrap

word-wrap:normal;   //允许文字溢出容器边缘
word-wrap:break-word;   //文字到容器边缘的时候自动换行

999.一些小记

1.text-overflow可以对溢出的文本加…

2.outline和border很像，但是不占空间，用法和border一样，只不过不能分别指定上下左右

3.outline-offset设置轮廓的偏移，也就是轮廓的大小。

4.nav-*是什么鬼?暂时没懂。

5.cursor设置鼠标停留在页面时候显示的样式。

6.zoom设置放大或缩小的倍数，可以用百分比定义，很强大

7.resize设置textarea啥的大小是否可调.

8.user-select可以指定一段文字为不可选择状态，禁用复制功能

9.!important可以提升样式的优先级，防止被覆盖掉

10.E:focus元素获取到焦点的状态

11.E:lang(fr)配合lang=”zh”对指定的标签样式进行设定

12.伪对象选择符E::before和E::after要配合content一起使用

13.@import url(“global.css”)会先加载html，再加载css，功能和link标签一样，只是加载顺序不同，一般用link代替@import

14.@charset “utf-8” 设置css文件的字符编码

15.@media用户媒体查询，可以获取屏幕的宽高，设备的宽高，是否横屏，是否支持彩色等，然后应用相应的样式

16.@font-face可以自定义字体

17.@keyframes定义逐帧动画,这个动画可以被transition和animation调用。

18.@supports检查浏览器是否有某个特性的支持

19.transition实现过渡，三个参数分别是属性、过渡时间、过渡方式。

20.animation通过逐帧动画实现动画效果，传入的参数分别是

21.animation传入的参数分别是逐帧动画的名称、持续时间、过渡方式等

22.postion默认是static。relative表示相对定位，left，top是以自身为参考，而absolute是以父集元素为参考，fixed是对可见页面为参考

23.min-width和max-height只有在设置width或height设置为百分比的时候和媒体查询的时候才有用