原创盒模型

来源:互联网 发布:网络电视点播要钱吗 编辑:程序博客网 时间:2024/06/04 19:23

怪异盒模型!!!


box-sizing:border-box   让外边框变成内边框

/*进入怪异盒模型

让padding和border的值算进内容区域,外面只留margin的值

* */

-webkit-box-sizing: border-box;


分栏布局!!!

.wrap{

/*分栏的栏数*/

-webkit-column-count: 3;

-moz-column-count: 3;

column-count: 3;

/*分栏间距*/

-webkit-column-gap: 50px;

-moz-column-gap: 50px;

column-gap: 50px;

/*分栏间的间隔线,跟border后面的属性一样*/

-webkit-column-rule: 10px solid red

}


改字体!!!

@font-face{

font-family:(这块随便起个名)

src:url(你要导入的字体.otf)

}

div{

font-family:(跟上面一样的名)

}



input{

outline:0

}

<input=“text”… >可以去掉input标签外面的边框



div{

resize:both;

overflow:auto;

如果一个标签里设置了这些,这个标签就  可以实现拉动一点改变整体的大小,但是

整体的布局会乱

通常用于给textarea加resizi:none样式

使textarea变成一个可以使文字换行的文  本域,(text不能使文字换行)

}

动画!!!

animation:1.要绑定动画的名字  2.运动时间  3.运动方式  4.运动次数(infinite:无限次)  5.延迟  6.运动方向轨迹(alternate 一个有规律的来回运动,但是会消耗一次运动次数) 7.停在什么位置(paused暂停,,running运行,现在还不能用,要配合js使用)

0 0
原创粉丝点击