标签信息
  获得0次关注
  发布24篇文章

王老迪 2018-04-23 10:29:58

整理一下之前一直没掌握好的css元素,后续会添加相应的代码跟测试地址

css基础篇


vertical-align(垂直标签)

与text-align水平标签作用于块级作用域不同,vertical-align是作用于块级作用域下的行内元素的标签。

vertical-align = top 行的顶部  vertical-align = text-top 同级元素字的顶部

vertical-align = middle 父元素中间 

vertical-align = baseline 默认的,父元素基线处(一般位与标点符号的上面一点点,与a,x,s等字母底部相同)


box-sizing

这个属性跟盒子模型要结合起来。它有三个参数

1.inherit 继承父元素的值(一般不会用到)

2.content-box 默认情况用到的是这个,它是规定元素正文的大小当改变内边距和边框,正文内容不会随之发生改变(这种情

况下,外部界面会变大)

3.border-box 重点学习的是这个,它固定你content+padding+border的大小,当定义了这个属性,你的元素无论如何修改边

框跟内边距content+padding+border的大小始终不变


css布局篇

清除浮动的方法。

以前一般不敢轻易的用float这个属性,用的总觉得别扭,大多时候用的是绝对定位。完全是因为完全没怎么去了解怎么清除浮动达到自己想要的效果。

常见的清除浮动有以下办法:

1.父元素也浮动(不推荐,在正常编码你总不能全部都浮动吧。。。)

2.新建一个子元素加上clear:both属性(不推荐,麻烦,看着也不对)

4.给父元素加上一个clearfix的样式——class='clearfix'(比较推荐,其实这个样式是伪元素跟2的结合)


flex-box(弹性盒子布局)

居然还有这么好用的东西,之前一直都不知道(真是日了狗,听说这是bootstarp4用来架构的东西哦)

兼容范围(不支持E10以下的浏览器,与大部分css3元素相似,在不同的浏览器中也是要加上一些前缀的)这里推荐一个网站 http://autoprefixer.github.io/

便利之处,比较简单方式解决各类布局问题,加上媒体查询基本能实现全部的页面了。常用的写法:

在父元素中添加 display:flex;

摆放属性: flex-flow:(方向 列或者行)||(1行还是多行);

水平属性: justify-content:center(居中,还有多种,自行百度。。)

垂直属性: 分两种 一种align-content(垂直分布的时候多列可以用它),align-items(垂直分布的时候单列的用它)

每个元素还可以有自己不同的属性: order(排序), flex:(横向比例)||(纵向比例)||(未分配之前,本身的原始大小),align-self(元素自己的摆放,脱离父元素的布局控制)


css3篇


css3主要是图形变换,过渡效果,跟动画效果了,动画效果就像是一个连着的过渡效果。这个主要是没记住,这里从新记一遍。


1.transform(图形变换) :scale(放大和缩小),rotate(旋转),translate(平移),主要把这三都记住就OK啦,写法上按顺序写即可(实际当中是先执行平移在执行旋转,最后执行缩放)

2.transition(过渡效果) : 这个之间用就好,简写属性,一个4个参数,第一个是作用的css属性名,第二个是过渡时长,第三个是过渡的速度效果(匀速,加速等),第四个是开始的时间。

3.animation(动画效果): 动画效果跟过渡效果前四个属性相似,有点区别的过渡效果是属性名称,而动画效果是需要新建一个选择器,选择器中是需要设置属性跟原始属性的新结果,除了以上的四个属性之外,animation还有两个参数,第五个是播放次数(infinite无限循环,主要记这个),第六个是播放流是否反向,默认是正常方向