css学习笔记

今天就要回家咯。好开心。在回家之前把css大概的学习了一遍也好开心。断断续续的学了不到一个周吧。不过还没检测自己学的这样，一直都是看视频做笔记，也没敲代码，估计也没学的多好。笔记贴上来，有点乱糟糟的，格式也没过于的去排版。可能有的知识点写的有点错误和混乱，见谅。
ps:有不少笔记没有打解释，等有时间回来好好写写注释。

<!--CSS-->
<link rel="stylesheet" type="text/css" href="">
<style>
    body{background-color: red;}
    p{margin-left: 20px;}
</style>
<p style="color:red;margin-left:20px;"></p>
<!--浏览器私有属性-->
chorm safari
-webkit-
firefox
-moz-
ie
-ms-
opera
-o-
<!--选择器-->
<div>
    <p>段落一</p>
    <p class="special stress"></p>
</div>
p{color:blue;}
.special{color:red;}
.stress{font-weight:bold;}
---------------------------
<div id="banner">
    banner
</div>
<div>
    contene
</div>
div{collor:gray;}
#banner{color:black;}
----------------------
<form action="">
    <div>
        <input disabled type="text" value="zhangsan">
    </div>
    <div>
        <input type="password" placeholder="mima">
    </div>
</form>
[disabled]{background-color:#eee;}
----------------------
<form>
    <input type="text" value="wenben">
    <input type="button" value="anniu">
</form>
[type=button]{color:red;}
---------------------
<div>
    <a href="http://www.w3cshcllo.com">w3c</a>
    <a href="#html">html</a>
    <a href="#css">css</a>
    <a href="http://xxxx.pdf">pdf</a>
    <a href="http://xxxx.doc">doc</a>
</div>
[href^="#"]{color:red;}
[herf$=pdf]{color:black;}
-------------------------
链接中含有lady.163.com
[href*="lady.163.com"]{color:pink;}
--------------------------
伪类选择器
<a href="http://www.163.com"></a>
link变色
a:link{color:gray;}
访问过后变色
a:visited{color:red;}
移动到上面
a:hover{color:green;}
点击上去
a:active{color:orange;}
---------------------------
enabled 可用的 
disabled 不可用的
checked 选择的
----------------
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
li:first-child{color:red;}
li:last-child{color:blue;}
li:nth-child(even){color:red;}
li:nth-child(3n+1){color:red;}
自定义表的时候
-of-type{}
-------------------------
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
</ul>
:only-child{color:red;}
--------------
<p>
    aa第一个字符和第一行
    bb第二行
</p>
::first-letter{color:red;}
::firest-line{color:red;}
::before{contene:"aa";}
::after{contene:"bb";}
当被选中时：
::selection{
    color:red;
    background-color:#ccc;
}
<div class="main">
    <h2>标题一</h2>
    <div>
        <h2>标题二</h2>
        <p>段落</p>
    </div>
</div>
//两个标题都变色
.main h2{color:red;}
//第一个标题变色
.main>h2{color:red;}
//兄弟选择器
<div>
    <h2>标题</h2>
    <p>段落一</p>
    <p>段落二</p>
</div>
//只有与h2临近的p变色
h2+p{color:red;}
//在h2之后的p
h2~p{color:red;}
-------------------
//字体大小
font-size:12px(2em,200%);
//字体
font-family:arial;
font-family:Verdana,"microsoft Yahei";
//字体加黑normal 100-900
font-weight:bold;
//字体倾斜
font-style:italic(斜体)，oblique(强制倾斜)；
简写为:font:~~~~~;至少有 front-size和 font-family
//行间距
line-height:40px(3em)(300%)(3);
//颜色
color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255,0,0,1);//1不透明，0全透明
color:transparent;//全透明
//对齐方式
text-align:left(right,center,justify(两端对齐));
vertical-align:baseline基线(sub下标，super上标，top对齐最高点，text-top对齐文本最高点，middle居中，bottom居低，20px以baseline为起点向上移动20px);
//首行缩进
text-indent:2em;
//white-space 空格换行回车
white-space:pre;
white-space:pre-wrap;
//自动换行
word-wrap:normal(breadk-word);
//单词换行
word-break:break-all(keep-all);
//文本阴影
text-shadow:1px 2px 3px #f00;x轴偏移一个px，y轴偏移二个px；3px实化
//文本下划线
text-decoration:underline(overline,line-through);
//在一行未完的时候用。。。代替
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
//定义鼠标的形状
cursor:help(?问号)，pointer(手势);zoom-in(out)(放大放小)；
cursor:url(xxx.cur),pointer;
----------------盒子模型-----------
内容 content
填充物 padding
边界 border
外边距 margin
top,right,bottom,left 四个部分
宽度：
    width:200px;
    width:50%;父元素的50%
高度:
    hight:100px;
    hight:50%;
填充:上下左右4个方向的填充,(margin)类似
    padding:20px;都有填充
    padding:40px,30px,20px,10px;
    padding-top:
    padding-right:
    padding-bottom:
    padding-left:
    对面相等，省略后者，4面相等，只设一个。
外边距:和padding几乎完全一样。
边界:纸盒厚度，类型，颜色
    border-width:默认中；thin,medium,thick
    border-style:solid,dashed（实线）,dotted（点）
    boder-color:<color>;
都有4个值，TRBL
圆角边框:border-radius:
    border-radius:10px;
    border-radius:0px  5px  10px  15px
                  20px 15px 10px   5px
    border-top-left-radius:10px;
内容溢出：overflow:
    overflow:hidden,scroll,auto.
    overflow-x:
    overflow-y:
盒子大小：box-sizing:content-box,border-box;
盒子阴影:box-shadow:4px 0px 0px 0px red;
    右面有4px水平偏移的红色。
    水平偏移
    垂直偏移
    模糊半径内外一半模糊
    阴影大小
    加一个insert是内阴影
    多阴影
    外阴影+insert
边框不在空间在border以外,与order有很多的相似之处
    outline:5px dashed blue;
    outline-width:
    outline-style:
    outline-color:
背景颜色:background-color:
    background-color:rgb
    background-color:rbga
    background-color:transparent;
    background-color:green;

背景图片:background-image:
    background-image:url(red.png),(blue.png);
背景平铺：background-repeat
    background:repeat-x-y,space,round,no-repeat;
    background-repeat:no-repeat repeat;
背景滚动：background-attachment:
    background-attachment:loal;
背景位置：background-position:
    background-positian:10px 20px;
                        center center;
                        right 10px top 20px;
颜色渐变:linear-gradient()
    background-image:linear-gradient(xx,red,blue);
    xx== to top;to bottom;to right bottom;45deg(45度);
    颜色可以加百分比，表示 占据的比例 
镜像渐变:radial-gradient()
    background-image:radial-gradient(closest-side,red,blue);//最近的边椭圆
    background-image:radial-gradient(circle,red,blue);//圆
    background-image:radial-gradient(circle 100px,red,blue);//100px的圆
    background-image:radial-gradient(red,blue);//椭圆
    background-image:radial-gradient(100px 50px at 0 0,red,blue);
平铺**渐变：repeating-*-gradient:
    background-image:repeating-linear-gradient(red,blue 20px,red 40px);
设置盒子的(0,0)和(100,100)的位置
    background-origin:border-box;padding-box;content-box;
设置盒子裁剪：background-clip:
    background-clip:border-box;padding-box;content-box;
设置背景的大小:
    background-size:auto,auto;
    background-size:50%,50%；
    background-size:cover;覆盖整个容器；
    background-size:contain;包含
背景的覆盖:background的简写
    background:url(red.png) 0 0/20px 20px no-repeat,url(blue.png) 50% 50%/contain no-repeat content-box green;
-----------------布局-----------------------
设置元素的显示方式：display
    display:block;inline;inline-block;none;
    block:块装块级
        默认宽度为父元素宽度
        可设置宽高
        换行显示
    inline:行装行级
        默认宽度为内容宽度
        不可设置宽高
        同行显示
    inline-block:
        默认宽度为内容宽度
        可设置宽高
        同行显示
        整块换行
    none:元素不显示
        与visibility:hidden比较
        后者不显示但是 占据位置
position:设置定位方式
        top,right,bottom,left,z-index
        position:static,静态没设置position
        relative//相对定位,仍在文档流中，参照物为文档本身
        absolute//绝对定位,脱离文档流，默认宽度为内容宽度，参照元素是第一个定位元素的祖先/根元素
        fixed//固定定位，默认宽度是内容宽度，脱离文档流，参照物是视窗，
float:right,left,none,inhert;设置浮动
    float:right;默认宽度为内容宽度，脱离文档流，向指定方向移动。（对元素脱离文档流，对内容，在文档流）
        clear:both;left;right;
    .clearfix:after{content:'.';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;};
flex:自适应布局，弹性布局
    方向：
        flex-direction:方向
            row;row-reverse;column;column;column-reverse;
        flex-wrap:换行
            wrap;wrap-reverse;
        flwx-flow:流
            direction,wrap;
        order:顺序
            顺序排序；
    弹性：
        flex-basis:main-size;
        flex-grow:元素所能分配的最大宽度
        flex-shrink:与上面相反
                        grow;shrink;basis;
        flex: (initial) 0,1,main-size;
    对齐：
        justify-content:设置主轴上的对齐方式；
            flex-start;右上对齐
            flex-end;左下对齐
            center;居中对齐
            space-between;中间间隔空格平分
            space-arounnd;首尾也分配空格
        align-items:设置副轴上的对齐方式
            flex-start;向上右
            flex-end;像左下
            center;中对齐
            baseline;基线对齐
            stretch;充满
        align-self:设置单个元素在副轴上的对齐方式
            同上
        align-content:设置整个内容的对齐方式，个人感觉主要是行之间的对齐方式
            亦同上
变形：
    transform:
        rotate(60deg);翻转角度
        translate(50px,20%);移动---translateX(9px);translateY(20%);
        scale(1.2,1);--缩放scaleX();scaleY();
        skew(30deg,30deg);倾斜----skewX();skewY();
    transform-origin:旋转中心。
        transform-origin:50% 50%;默认
                         0 0;
                         right 50px 20px;
        perspective:none;人眼离物体的距离。立体感；
                    2000px;
                    500;
        prespective-origin:50% 50%;默认位置
                            left bottom;左下角开始看
                            50% -800px;在正中间上面的800像素。
                            right;从右面的中间位置看。
        translate3d:
            translateX();
            translateY();
            translateZ();3d特有的
        scale3d();
            scaleZ();
        rotate3d(1,0,0,45deg);
            rotateX();
            rotateY();
            rotateZ();
            transform-style:flat;扁平化
                            preserve-3d;保留3D空间
        backface-visibility:visible;hidden;
动画：
    transition-property:none;all;left;left,color;当以上元素更改时，进行动画
    transition-duration:0s;1s;动画时间。
    transition-timing-function:
        ease;两头慢中间快
        cubic-bezier(0.25,0.1,0.25,0.1);与上面等价
        linear;线性
        cubic-bezier(0,0,1,1);与上面等价
        ease-in;开始慢一点
        ease-out;结尾慢一点
        ease-in-out;比上面两个幅度大一点
        steps(3,start);分三步走
        transition-delay:3s;
    transition:left 2s ease 1s;color 2s;
                左移动作进行2秒延时1秒，颜色动作进行一秒
    animation-name:abcd;帧的标记。
    animation-duration:3s;动画运行时间。
    animation-timing-function:与transition及其类似。
    animation-iteration-count:infinite;动画执行次数。
    animation-direction:
        normal;正常
        reverse;相反
        alternate;往返
        alternate-reverse;相反的往返。
    animation-play-state:running,pasused;动作的运行停止；
    animation-delay:1s,2s,3s;动作延时
    animation-fill-mode:
        none;
        backwards;保留第一帧的状态
        forwards;保留最后一帧的状态
        both;都保留
    animation:abc 2s ease 0s 1 normal none running;
        abc运行了两面 运行方式ease 延时0s 播放次数1 运行的方向 是否保留第一帧或者最后一帧的运行状态 运行状态
关键帧的定义：
    @keyframes abc{
        from{opacity:1;height:100px;}
        to{opacity:0.5;height:200px;}
    }
    @keyframes abc{
        0%{opacity:1;height:100px;}
        100%{opacity:0.5;height:200px;}
    }