CSS容易忘记的一些属性

text-align属性

1. text-align:justify 两端对齐
2. text-align属性只对块级元素起作用，行内级元素无效
3. 这一居中显示可以用margin 0 auto 表示

line-height属性

行高指的是文本间基线的距离，其单位可以为px,百分比,em
文字基线 顶线 划分

行高就是 inline-box 的高度,默认情况下行内元素是基于base-line对齐的

图片1px问题:因为图片本身也是行内元素,也是基于基线对齐,基线距离底部会有一个间隙,所以会有留白,解决方案:font-size:0 或者 vertical-align:bottom

vertical-align

垂直对齐方式 只作用于行内元素,块级元素设置无效

• vertical-align:top:垂直对齐于一行内最高的元素
• vertical-algin:Text-top:垂直对齐于文本顶部
• vertical-align:middle:对齐于文本中线
• vertical-align:baseline:对齐于文本基线(英文字母文本底部)
• vertical-align:Text-bottom:对齐于文本底部
• vertical-align:bottom:对齐于行内底部最低元素

word-spacing letter-spacing text-transform

white-space no-wrap 不换行
word-spacing 单词之间间隔
letter-spacing 字母之间的间隔
text-transform:capitalize(首字母大写)|uppercase(字母大写)|lowercase(字母小写)|none()

text-decoration

文本修饰

• underline:下划线
• overline:上划线
• line-through:删除线
• blink:闪烁效果
• none

动态伪类

只有当用户交互时才显示,分为锚点伪类和用户行为伪类

锚点伪类

:link :visted

行为伪类

:hover :active :focus

CSS3新增UI元素伪类

:disable(input框的未选中的伪类)
:enabled(input框的可选中的伪类)
:checked(单选框或者复选框的选中伪类)

css3结构类

• :first-child-第一个子元素类
• :last-child-最后一个子元素类
• :nth-child(N)-第N个子元素类
• :nth-of-type(N) 指定类型的第N各元素
• div:nth-of-type(2) 只匹配div的第二个元素
• nav > a:not(last-of-type) not选择器 表示除了最后一个a标签 其他的元素的样式

伪元素

用于向某些选择器设置特殊样式
语法格式：Element::pseudo-element
只作用于块级元素

伪类

• ::first-line 块级第一行

• ::first-letter 块级元素第一个字

• ::before

• ::after
  这一类伪元素只能用content表示 而且都是行内元素,块级第一个元素,不是真实存在html 支持一切css样式

  div::before{
    content:'ABC'
  }

• ::selection 控制文本选中的背景色和前景色
  同样也是作用于块级元素

border-radius拓展

border-top-left-radius 左上角弧度
border-top-right-radius 右上角弧度
border-bottom-right-radius 右下角弧度
border-bottom-left-radius 左下角弧度

(chrome 火狐 ie 欧朋)
兼容性写法
border-radius 50%
-webkit-border-radius 50%
-moz-border-radius 50%
-ms-border-radius 50%
-o-border-radius 50%

border实现三角形

.div{
  width:0;
  height:300px;
  border-bottom:30px solid red;
  border-left:30px transparent;
  border-right:30px transparent
}

box-shadow

原理就是在原来的盒子下盖住一个盒子 然后控制颜色偏移 模糊

• 属性：
  • 水平偏移
  • 竖直偏移
  • 模糊
  • 扩展(在已有的偏移量上四条边同时增加对应值)
  • 颜色
  • 偏移种类

    举例：element的基础阴影:基础投影 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

背景

• background-clip - 背景图像区域

  <!-- 显示区域包括border区 -->
  background-clip:border-box
  <!-- 显示区域包括padding区域 -->
  background-clip:padding-box
  <!-- 显示区域只包括content区域 -->
  background-clip:content-box

  效果图:
  
  • background-origin -相对于背景偏移的初始区域

    background-origin:border-box
    background-origin:padding-box
    background-origin:content-box
    
    background-image:url() no-repeat 10px 20px
    <!-- 这三个值的权重有小到大 分别对应的偏移量起点不同 背景图的位置不相同 -->

  • background-size

    <!-- 只有一个值 第二个值默认就位auto 图片将会默认缩放 -->
    background-size:100%
    background-size:100% 100%
    <!-- 这种情况下 图片一定会按照长宽比填满容器 -->
    background-size:cover
    <!-- 这种情况下 图片将会一定完整展示 宽度100% 高度自适应 -->
    background-size:contain

  • background完整写法

    <!-- background:color position size repeat origin clip attachement url -->
    
    background:#fff center 50% no-repeat content-box content-box fixed url()

渐变

gradient分为线性渐变和径向渐变

线性渐变-linear-gradient

• 默认的渐变方向从上到下

   //从上到下有蓝色渐变到红色
  background:linear-gradient(bule,red)
  background:-webkit-linear-gradient(blue,red)
  background:-moz-linear-gradient(blue,red)
  background:-ms-linear-gradient(blue,red)
  background:-o-linear-gradient(blue,red)

  • 从左往右线性渐变写法

    <!-- 从左往右 -->
    linear-gradient(to direction,color1,clor2...)
    -webkit-linear-gradient(begin direction,color1,color2...)
    -moz-linear-gradient(end direction,color1,color2...)
    -ms-linear-gradient(end direction,color1,color2...)
    
    标准写法:
    linear-gradient(to right,blue,red)
    -webkit-linear-gradient(left,blue,red)
    -moz-linear-gradient(right,blue,red)
    -ms-linear-gradient(right,blue,red)
      

  • 对角线渐变

    <!-- 左上角到右下角渐变 -->
    linear-gradient(to right bottom,blue,right)
    <!-- chrome浏览器和其他浏览器相反 一个是定期开始位置 一个定义结束位置 -->
    -webkit-linear-gradient(left top,blue,right)
    -moz-linear-gradient(right bottom,blue,red)

  • 偏移角度渐变写法
    

    0 deg 从下往上
    90deg 从左往右
    180deg 从右往左
    background:linear-gradient(90deg,red 10%,orange 30%,blue 100%)
    //这种写法 百分数表示从这个数值的百分数开始想另一个颜色渐变
    10% - 30% red向orange渐变
    30% - 100% orange向blue渐变 

    带有-web-kit的chrome浏览器的兼容 0deg是从左到右 然后增大角度它是轴逆时针方向,也就是走左下角

    -webkit-linear-gradient(0deg,red,blue)

    普通情况下 0deg是从下往上 也就是结束方向

    linear-gradient(0deg,red,blue)

  text-shadow

  • 属性值:
  • 水平偏移
  • 竖直偏移
  • blur 模糊
  • color

text-overflow

• 属性值:
  • clip 溢出文本隐藏
  • ellipsis 显示省略号
  • string (只兼容火狐浏览器)

    文字换行

• overflow-wrap(word-wrap) 是否保留单词
• word-break 针对多字节文字 设定保留的单位
• white-space 空白处是否断行 no-wrap

@font-face

语法规则

@font-face{
  font-family:<webfontname>
  src:<source>[<format>]
  [font-weigth:<weight>];
  [font-style:<style>]
}

实例:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体

推荐引入字体通用模板

@font-face
  font-family 'YourWebFontName'
  src url('YourWebFontName.eot'); /* IE9以上 */
  src url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/*兼容IE6-IE8*/
  url('YourWebFontName.ttf')format('truetype'),/*Safari,Andriod ios*/
  url('YpurWebFontName.woff')format('wodff'),/*Mordern Browser*/
  url('YourWebFontName.svg#YourWebFontName')format('svg') /*除了ios*/

使用直接 font-family:YourWebFontName即可

// TODO:css动画 js基础过掉

CSS3 2D转换

• rotate() 平面2d旋转
  通过角度参数对元素进行旋转 正角度为顺时针
  语法:transfrom:rotate(angle)

• translate() 平移-正方向 右 下

  translateX()
  translateY()
  translate(X,Y)

• scale() 缩放 参数为缩放比例 缩放时水平方向竖直方向的坐标原点在元素几何中心

  scaleX()
  scaleY()
  scale(X,Y)

• skew() 扭曲与斜切

  skewX() 参数正角度逆时针方向斜切
  skewY() x轴方向 正角度顺时针斜切

CSS3 3D转换

• rotate3d()

  rotateX() 对象在x轴上旋转 90deg时图片消失 正方向手掌向上弯曲
  rotateY() 在y轴旋转 向里旋转为正角度 正方向手掌想里弯曲
  rotateZ() z轴方向旋转 类似于二维方向旋转

• translate3d()

  translate3d(X,Y,Z) 加速cpu渲染 z轴正方向指向我们

• scale3d()

Transfrom坐标系

transfrom-origin
改变转换元素的位置

默认是元素几何中心点为基点
transfrom-origin: left top 围绕左上角旋转

transfrom-style属性
定义指定嵌套元素是怎样在三维空间呈现

transfrom-style: flat | preserve-3d
perspective:number 当数值越来越大 transform的元素就会感觉越来越近

CSS transition属性

过渡属性:

• transition-property:指定过度的对象

  transition-property:none | all(默认值) | property(指定颜色 或者opacity 或者等等属性)

• transition-duration :指定过渡的时间
• transition-timing-function 动画类型

  linear 线性过度(匀速)
  ease 平滑过渡
  ease-in 由慢到快
  ease-out 由快到慢
  ease-in-out 慢到快到慢
  step-start

• transition-delay 指定过度的延迟时间

标准写法

transition:<transition-propetry><transition-duration><transition-timing-function><transition-delay>

animation

• animation-name 动画名称
• animation-duration 动画持续时间 默认为0
• animmation-timing-function

  linear 线性过渡
  ease 平滑过渡
  ease-in 慢到快
  ease-out
  ease-in-out

• animation-delay 定义动画的延迟时间
• animation-iteration-count 动画循环次数

  infinite 无限次数
  count count次数

• animation-direction 定义动画的方向

  normal 正方向
  reverse 反方向
  alternate 动画现正常运行然后再反方向
  alternate-reverse 相反

标准写法

animation:name duration timing-function delay iteration-count direction fill-mode play-state

@keyframes 关键帧

语法:

@keyframes animationname {
  keyframes-selector {
    css-styles
  }
}

三个均为必写项

• animationName
• keyframes-selector 动画持续时间百分比 0-100 from(0%) to(100%)
• css-styles 样式

  最好添加-webkit-animation兼容