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之后的ph2~p{color:red;}-------------------//字体大小font-size:12px(2em,200%);//字体font-family:arial;font-family:Verdana,"microsoft Yahei";//字体加黑normal 100-900font-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外边距 margintop,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;}    }