CSS3学习（因为是早之前写的了，现在才发表，所以有些地方不记得了找个机会再过一下）
curser:poimter 鼠标手型
一、选择器
- :first-of-type() 选择该类型元素的第一个元素
- :last-of-type() 选择该类型元素的最后一个元素
- :nth-of-type()从正序开始选择该类型的第几个元素
- :nth-last-of-type()从倒序开始选择该类型元素的第几个元素
- :first-child
- :last-child
- :nth-child
- nth-last-child
- ::selection选择用户鼠标选中的部分
- :not选中非用户选指定的选择器
- :root 根节点选器
- :enable 选择状态可用的元素（input button)
- :disable选择状态不可用的元素(input button)
- :checked 选择选中状态下的input标签
- [attr=“value”] 属性选择器
- target选择器 选择当前活动的id锚点
- target的使用要配合a标签和元素的id属性
- a标签是一个链接，通过a标签，我们不但跳转到其他页面还可以跳转到一个页面的某一个id锚点，换句话说，一个a标签可以激活其链接对应的id锚点，target选择器选择的就是当前活动的这一个id
二、CSS3转换和过度
（一）、转换
- CSS3的转化可以分为2d转化和3d转换
- 2d转换有5种转换方式，分别是：
- translate() 根据左（x轴）和顶部（y轴）位置给定的参数从当前元素位置移动
- rotate() 在一个给定度数顺时针旋转的元素，负值标识逆时针旋转
- scale() 该元素增加或减少的大小，取决宽度（x轴）和高度（y轴）的参数
- skew() 包含两个参数，分别标识x轴和y轴的倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示相反方向倾斜
- matrix() 将前面四个方法合为一个，用矩阵来表示2d转换
- 其中matrix()会用到矩阵相关的知识，其他也可以满足
- transform-origin()用来控制转换原点。默认值是（50%，50%）
- 除了使用固定值和百分比，你也可以用bottom，top，center，left，right来控制原点。
- 3d转换和2d转换原理一样，只是在x，y轴的基础上增加了z轴的转换。
（二）、过度
- CSS3过度是元素从一种样式改变为另一种样式的效果，transition有四个过渡属性，他们分别是：
- transition-property 规定应用过渡的CSS属性的名称（瞬间变化的属性是不能设置过渡，比如display）
- transition-duration（必须） 定义过渡效果花费的时间，默认是0。
- transition-timing-function 规定过渡效果的时间曲线默认是“ease”
- linear 相同时间
- ease 慢速开始变快再变慢
- ease-in 慢速开始
- ease-out 慢速结束
- ease-in-out 慢速开始和慢速结束
- cubic-bezier(n,n,n,n) 自己定义，可以是0-1之间的值
- transition-delay 何时开始
-
简写形式：transition: width 1s linear 2s(延时)
三、鼠标选择器
- :hover
- +为css2选择器 element + element2选择器匹配出现在element后面的临近的element2
- ~为css3选择器 element ~ element 选择器匹配出现在element后面的element
四、圆角
- border-radius:50px; 表示四个角的圆角半径都是50px
- border-radius:50px 40px;表示左上角与右下角50px，右上角与左下角40px
- border-radius: 左上角 右上角和左下角 右下角
- border-radius:左上角 右上角 右下角 左下角
- border-radius可以使用固定单位和 百分比单位
- 不同属性的百分比值相对的内容是不一样的，如translate是自身，width/height是父级，而border-radius的百分比包含border和padding部分
- border-radius有大值特性，也就是值很大的时候，只会使用能后渲染的圆角大小渲染（超过直径径大小则使用直径）
- border-radius的全写形式有八个值，同事包含水平半径和垂直半径
- border-radius: 水左上 水右上 水右下 水左下 / 垂左上 垂右上 垂右下 垂左下
单角圆角
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- 属性也可以有两个。。。。。。：水平 垂直
五、动画
- 在css3中利用@keyframes创建动画
- @keyframes规则指定一个CSS样式和动画逐步从目前样式更改为新的样式
- @keyframes 名字{from{样式} to{样式}}
- @keyframes 名字{0%{} 20%{} 40%{}。。。}
- 需要把创建好的动画绑定到一个选择器
- animation-name:name(动画名)；
- animation-duration:2s;
- 必须定义名字和时间（默认是0）
- animation-timing-function: 动画的速度曲线
- animation-delay: 何时开始
- animation-iteration: 播放的次数默认是1，infinite无限播放
- animation-direction: 是否在下一周期逆向播放；默认时normal
- reverse方向
- alternate正反播放
- alternate_reverse 反正播放
- animation-play-state: 是否正在运行或暂停 默认是running
- anmiation: name 5s 1s infinite linear alternate
六、阴影
- box-shadow有六个参数
- box-shadow: offset-x offset-y blur(模糊半径) spread(阴影大小) color position（内或外）
- blur越大越模糊
- 单边阴影：只设置x或y轴
- 双边阴影：同时设置x和y轴
- 三边阴影：设置spread，x和y只设置一个
- 全阴影：x和y都不设置
- 多阴影：一个box-shadow包含多个参数，不同参数用“，”隔开
七、伪元素
- 伪元素是不会出现在DOM中，不会改变文档的内容，仅仅是在css渲染层加入不可复制的特殊元素
- 常见的伪元素有：
- ::first-letter ::first-line ::bofore ::after ::selection
- before和after用于添加的内容
- 必须包含content属性，至少要保证一个空字符，默认是行内元素
- 可以添加的内容有string、attr()、url()
- 用于去除浮动
- 去除浮动的方法有多种，现在最常用的 就是利用after伪类来清除浮动
- content:“”;display:block;clear:both;
- 原选择器上加：zoom:1 用来解决ie兼容性问题
- 用于绘制各种形状
八、渐变
（一）渐变
- css3渐变是网页中的一项技术，他能在两个或多个指定得颜色之间，显示平稳的过度效果。
- 以前实现类似的效果需要借助图片，css3渐变技术对比图片有如下优势：
- css3渐变技术可以减少带宽的使用，因为不用再去请求服务器上的图片。
- 除矢量图以外的图片放大之后会失真，css3渐变效果不会失真，因为他是有浏览器生成的。
- css3渐变分为线性渐变和径向渐变。
- 之前基本上没有考虑浏览器的兼容性问题。但虽然css3渐变的浏览器支持情况不太好，但同时他也比较重要。
- 常见的浏览器内核有四种：
- Trident: IE,The World,搜狗,360 -ms-
- Gecko: Netscape6+,Fire Fox,SeaMonkey -moz-
- Presto: opera7+ (原内核：Presto，现内核：Blink) -o-
- Webkit: Safari,Chrome -webkit-
- 创建一个线性渐变至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。在设置颜色节点的同时，也可以设置渐变方向和渐变角度。
- 最基本的方式只设置两个颜色节点。
- background: linear-gradient(direction,color-stop1,color-stop2,…)
- 设置对角线渐变：
- （left top，red，blue）；
- （180deg,red,blue);
- 0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。部分老浏览器使用了旧的标准，是反过来的。
- 颜色可以用有透明度的
（二）、径向渐变
- 为了创建一个径向渐变，你也必须至少两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色，同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是center（表示在中心点），渐变的形状是ellipse（表示椭圆形）渐变的大小是farthest-corner（表示到最远的角落）。
- 语法：background：radial-gradient（center，shap size（形状，大小），start-color，。。。，last-color）
- 如果我们想指定渐变的形状是一个原型，可以使用circle关键字。
- 可以通过at指定渐变起始位置，可以使用百分比。
- （circle at 50px 50px,yellow,red)
- radial-gradient径向渐变支持4个关键字指定渐变终止点位置：
- closest-side 渐变中心距离容器最近的变作为终止位置。
- closest-corner 渐变中心距离容器最近的角作为终止位置。
- farthest-side 渐变中心距离容器最远的点作为终止位置。
- farthest-corner（默认值） 渐变中心距离容器最远的角作为终止位置。
- 指定渐变颜色的断点。在颜色后面加上百分比指定到什么时候
- 椭圆类型的径向渐变
- 对于圆形截面，我们只需指定一个半径就可以了，但是对于椭圆类型的径向渐变，我们需要同时指定横轴和纵轴的长度
- （50px 100px ellipse,transparent 40px,red）
- 可重复渐变
- repeating-linear-gradient(red,yellow 10%,green 20%)；用于重复线性渐变。
- reapeating-radial-gradient()用于重复径向渐变。
- 可以设置多组值
九、多列
- css3多列属性如下:
- column-count 指定元素应该被分割的列数
- column-fill 指定如何填充列（仅火狐13.0+支持）
- column-gap 指定列与列之间的间隙
- column-rule 所有column-rule-* 属性的缩写
- column-rule-color 指定两列间边框的颜色
- column-rule-style 指定两列间边框的样式
- column-rule-width 指定两列间边框的厚度
- column-span 指定元素要跨越多少列（火狐不支持）
- column-width 指定列的宽度
- count 和 width 只能用一个
十、文本相关
- text-overflow属性指定当文本溢出包含他的元素，应该怎样显示，有三个可选值：
- ellipsis：超出的文本隐藏，同时显示省略号。
- clip：超出的文本被直接截断
- 其他字符串：超出的文本显示设置的字符串（仅火狐可用）
- 注意：一般配合 white-space：nowrap使用
- text-shadow 属性应用于阴影文本
- 语法 text-shadow：x，y，blur（模糊的半径） color；
- text-stroke 为文字添加描边效果，可以理解为文字添加边框
- text-stroke：宽度值 颜色值
- text-stroke是一个复合属性，由text-stroke-width和text-stroke-color两个子属性组成
- 要考虑浏览器内核
- word-break 自己决定自动换行的处理方法
- normal 使用浏览器默认的换行规则
- keep-all 只能在空格或连接字符处换行
- break-all 允许在单词内换行
- word-break属性使用break-all参数值时，对于西方文字来说，允许在单词内换行。对于标点符号来说，当word-break属性使用break-all参数值时，在safari和chrome中，允许标点符号位于行首，IE中仍然不允许标点符号位于行首。
- word-wrap 允许长的内容可以自动换行
- normal 只在允许的断字点换行（浏览器保持默认处理）。
- break-word 在长单词或url地址内部进行换行。
十一、css特殊用法
- a标签+：target伪类
- 可以制作单屏的选项卡
- label-input 制作按钮选项卡
<input type="checkbox" id="input1">
<label class="btn" for="input1"></label>
- 利用before，after制作按钮
#input:checked~.btn{
box-shadow:0 2px 5px 0px gray,0 15px 20px 0 transparent;
}
#input:checked~.btn::before{
...
}
#input:checked~.btn::after{
...
}
十二、弹性盒子
- 布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。他对于那些特殊布局非常不方便，比如垂直居中就不容易实现。
- 2009年w3c提出了一种新的方案–flex布局，可以简单、完整、响应式地实现各种页面布局。弹性盒子在移动端的应用非常广泛，在pc端，抛开老古董浏览器，现代主流浏览器都能完美支持！
- Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局，块级元素要利用弹性盒子，只需要设置display：flex；行内元素也能使用，需要设置display：inline-flex；
- 采用Flex布局的元素，称为Flex容器（flex container），简称容器。他的所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目
- Flexbox通常能让我们更好的操作他的子元素布局，例如：
- 如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；可以快速让他们布局在一列；可以方便让他们对其容器的左右中间等；无需修改结构就可以改变他们的显示顺序；如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例
- 弹性盒子有很多可用属性。大多数属性都是容器属性，即直接作用于flex容器，少部分作用于flex项目
- 容器属性display
- display：flex|inline-flex；
- flex-direction：row|row-reverse|column|column-reverse（倒序）指定主轴方向
- justify-content：flex-start（沿正方向排列）|flex-end（反方向）|center（居中）|space-between（两两元素之间有间隔的排列）|space-around（每个元素两边都有间隔的排列方式）
- flex-wrap：在一排或是一列排不下来时是否允许换行/列
- normal（默认值）单行
- wrap多行显示
- wrap-reverse 多行，但排列顺序相反
- align-items交叉轴的对其方式，类似justify-content属性
- flex-start交叉轴的起点对齐
- flex-end交叉轴的终点对齐
- center中点对齐
- baseline项目的第一行文字的基线对齐
- stretch（默认值）如果项目未设置高度或设为auto，将沾满整个容器的高度
- align-content多根轴线的对其方式，如果项目只有一根轴线，该属性不起作用
- flex-start与交叉轴的起点对其
- flex-end与交叉轴的终点对齐
- center与交叉轴的中心对齐
- space-between与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边距的间隔大一倍
- 项目属性align-self 允许单个项目有与其他项目不一样的对其方式，可覆盖align-items属性
- 可能取六个值除了auto外和align-items一样
- order（项目属性）定义项目的排列顺序。数值越小越靠前，默认为0；
- 容器属性display
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
