css样式学习整理不断更新
4-21
盒模型:由于元素边看和内边距会撑开元素,以前的解决方法是元素实际宽度减去边框和内边距的宽度,
现在可以用
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
支持IE8+
可以应用媒体查询@media来进行适配,当屏幕大于多少的时候横着排列,当屏幕小于多少的时候纵向排列
使用 inline-block
来布局。有一些事情需要牢记:
-
vertical-align
属性会影响到inline-block
元素,你可以把它的值设置为top
。 - 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙
-
display: inline-block; vertical-align: top; width: 25%;
column可以实现文字的多列布局(是新标准,不兼容IE9及以下OperaMini)
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
效果如图
清除浮动
1,让盒子负责自己的布局
2,overflow:hidden(auto)
3,::after{clear:both}
::after{
height:0;
clear:both;
content:"";
dispaly: table
}
table布局
.table {
display:table
}
.table-row {
display:table-row
}
.table-cell {
display:table-cell
}
<div class="table">
<div class="table-row">
<div class="left table-cell">
左
</div>
<div class="right table-cell">
右
</div>
</div>
</div>
定位
relative(相对定位) 定位相对于本身
absolute(绝对定位) 相对于最近的absolute或relative
fixed 相对于屏幕或者说可视区域
float布局挺难的,没懂
inline-block布局,设置字体大小为0可清除间隙
background 通过bacground-position做雪碧图
border 可以做三角形
border-radius可以做扇形
box-shadow可以做哆啦A梦,
clip-path可以遮罩出各种图形
transform 旋转、缩放、移动或倾斜
tansition 补间动画(一般动画,动画曲线函数easing)
@keyframes 关键帧动画(可以直接指定动画)结合animation
逐帧动画(通过设置animation-time-function:steps(1)去掉补间来实现)猎豹奔跑
居中
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-webkit-flex;
-webkit-justify-content:center;
-webkit-align-items:center;
图片100*100,移动端设置background-size:50px可以显示清晰,如果设置100px,图片会模糊
postCSS工具 安装postcss-cli
插件:autoprefixier自动加前缀
postcss-import 合并@imort引入和clas单写样式
ExtractTextPlugin解决css modules 也可以用react-css-modules
http://envato.stammtec.de/themeforest/melon/charts.html
http://www.jc88.net/Article/wyzz/1395.html
前端开发编码规范: http://codeguide.bootcss.com。
http://www.2zzt.com/,http://uedfans.cn/
http://www.68design.net/