前端笔记--css样式笔记
一、浮动 定位布局
1、浮动布局
left 元素向左浮动
right 元素向右浮动
例如：设置2个按钮，要使得按钮在同一行位置摆放，可以使用浮动，令按钮浮动到右边。注意，先设置float的按钮，例如：a先设置float：right，b也设置float：right，那么a在b的右边，先设置float的位置在float的方向。
both：清除浮动
2、定位布局
position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置
position:absolute;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:absolute;”使得元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
3、常见的设置文本水平垂直居中
通常可通过设置line-height 和height 相同，然后设置text-aline：center实现。但如果居中在高度变化的时候也要跟着居中，则可以使用：box-pack和box-alin来设置。
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
例如：
div { width:200px; height:160px; display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center; background-color:pink; }
二、UI元素伪类选择器 结构伪类选择器
结构伪类选择器:
常用：E:not（selector） 选择某个元素之外的所有元素
举例：
*{padding:0;margin:0;} ul { display:inline-block; width:200px; list-style-type:none; } ul li { height:20px; } ul li:first-child{background-color:red;} ul li:nth-child(2){background-color:orange;} ul li:nth-child(3){background-color:yellow;} ul li:nth-child(4){background-color:green;} ul li:last-child{background-color:blue;}
UI元素伪类选择器：
举例：
<head> <title>CSS3 :focus选择器</title> <style type="text/css"> input:focus { outline:1px solid red; } </style> </head> <body> <p><label for="name">姓名：</label><input type="text" name="name"/></p> <p><label for="email">邮箱：</label><input type="text" name="email"/></p> </body> </html>
::selection选择器”来改变被选择的网页文本的显示效果
<style type="text/css"> div::selection { background-color:red; color:white; } p::selection { background-color:orange; color:white; } </style>
使用::before和::after这两个选择器在元素前面或后面添加内容
<style type="text/css"> div::before { content:"学习学习"; } </style>
三、文字和颜色渐变、边框
文字：
其中常见的是text-shadow文字阴影。
text-shadow:x-offset y-offset blur color; x-offset是x轴阴影，blur是模糊距离。
可以指定多个阴影：
div { display:inline-block; padding:20px; font-size:40px; font-family:Verdana; font-weight:bold; background-color:#CCC; color:#ddd; text-shadow:-1px 0 #333, /*向左阴影*/ 0 -1px #333,/*向上阴影*/ 1px 0 #333, /*向右阴影*/ 0 1px #333 ;/*向下阴影*/ }
color:transparent; /*设置文字颜色为透明*/
颜色：
opacity:透明度
<head> <title>CSS3 opacity属性</title> <style type="text/css"> a { display:inline-block; padding:5px 10px; font-family:微软雅黑; color:white; background-color:#45B823; border-radius:4px; cursor:pointer; } a:hover { opacity:0.8; } </style> </head> <body> <a>调试代码</a> </body>
rgba(R,G,B,A)：A指的是透明度。
对于设置元素的透明度，RGBA比透明度opacity属性更好，因为RGBA不会影响元素中的内容以及子元素的不透明度
线性渐变 linear-gradient和径向渐t变radial-gradient
线性渐变
举例：
<title>CSS3线性渐变</title> <style type="text/css"> div { width:200px; height:150px; background:linear-gradient(to right,blue,yellow); } </style>
径向渐变：
举例：
#div1 { margin-bottom:10px; background:-webkit-radial-gradient(orange,blue); } #div2 { background:-webkit-radial-gradient(top,orange,blue); }
边框:最常见的border-radius
举例：
如果宽高都是100px的div，那么可以通过border-radius设置使得我们可以得到半圆或者正圆。其中规律：上右下左，设置2个值时，上下、左右
得到上半圆。
#div1 { width:200px; height:100px; border:1px solid red; border-radius:100px 100px 0 0; background-color:#FCE9B8; }
四、背景大小、变形(transform) 过渡（transition）动画（animation）
背景大小：background-size取值共有2种，一种是使用长度值（如px、百分比）；另外一种是使用关键字。
举例：
<head> <title>CSS3 background-size属性</title> <style type="text/css"> div { width:160px; height:100px; border:1px solid red; margin-bottom:10px; background-image:url("../App_images/lesson/run_css3/css3.png"); background-repeat:no-repeat; } #div2{background-size:160px 100px;} #div3{background-size:cover} #div4{background-size:contain} </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body>
CSS动画效果共3部分：
其中变形注重结果，过渡注重过程，动画则和过渡类似也是以过程为主
变形：
使用举例：transform：translate()、transform:translateX(20px)、transform：scale(30deg)、
<head> <title>CSS3旋转rotate()方法</title> <style type="text/css"> /*设置原始元素样式*/ #origin { margin:100px auto;/*水平居中*/ width:200px; height:100px; border:1px dashed gray; } /*设置当前元素样式*/ #current { width:200px; height:100px; line-height:100px; color:white; background-color: #007BEE; text-align:center; transform:rotate(30deg); -webkit-transform:rotate(30deg); /*兼容-webkit-引擎浏览器*/ -moz-transform:rotate(30deg); /*兼容-moz-引擎浏览器*/ } </style> </head> <body> <div id="origin"> <div id="current">顺时针旋转30度</div> </div> </body>
过渡：
使用举例：
<head> <title>CSS3 transition-property属性</title> <style type="text/css"> div { display:inline-block; width:100px; height:50px; background-color:#14C7F3; transition-property:height; transition-duration:0.5s ; transition-timing-function:linear; transition-delay:0; } div:hover { height:100px; } </style> </head> <body> <div></div> </body>
其中：transition-property，指定要设置的属性名字，transition-duration，指定过渡的时间，transition-timiing-fuction，指定过渡的效果的方法，有linear，ease，等，transition-delay，指定延迟时间
动画：animation
使用动画有2个步骤：
- （1）定义动画；
- （2）调用动画；
定义动画：需使用@keyframes，其中百分比是定义过程，一般可以分为：0% 30% 60% 100%
@keyframes 动画名
{
0%
{
……
}
……
100%
{
}
}
举例使用：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 animation-name属性</title> <style type="text/css"> @-webkit-keyframes mycolor { 0%{background-color:red;} 30%{background-color:blue;} 60%{background-color:yellow;} 100%{background-color:green;} } @-webkit-keyframes mytransform { 0%{border-radius:0;} 50%{border-radius:50px; -webkit-transform:translateX(0);} 100%{border-radius:50px; -webkit-transform:translateX(50px);} } div { width:100px; height:100px; background-color:red; } div:hover { -webkit-animation-name:mytransform; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; } </style> </head> <body> <div></div> </body> </html>
上面定义了2个动画，实际只调用了一个动画mytransform，当0-50%时，border-radius从0到50px，当50%-100%时，border-radius保持50不变，然后translateX，水平向右移动50px。
代码举例：
#div1
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
}
animation-name：调用的动画名，animation-timing-fuction：动画的方法，即改动画的效果是什么，方法有linear和ease等，animation-duration，动画从持续时间，animation-iteration-count，动画的执行次数，infinite表示无数次
animation-delay：动画延迟时间，animation-direation：动画执行放向，animation-play-state：动画执行状态，可以让动画停止和继续，animation-fill-mode：时间外属性，即动画执行完，停止在哪个位置。
五、多列布局和弹性盒子模型
弹性盒子模型：指的是设置某个属性后，使得div或者其他标签具备弹性盒子的效果
举例：
<head> <title>CSS3 box-orient属性</title> <style type="text/css"> body { display:-webkit-box; /*定义元素为盒子显示，注意书写*/ -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/ } div{height:100px;} #box1{background:red;} #box2{background:blue;} #box3{background:yellow;} </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> <div id="box3">盒子3</div> </body>
上面定义了放向为横向，盒子1、2、3、分别从左到右排列。
box-direction属性取值：normal和reverse，正向显示，和反向显示
box-flex：取值为正数，如果总数是4，取值是1，那么div占盒子的四分之一
