CSS3的布局学习
2015-09-06 23:08
633 查看
1.flex弹性盒子模型布局
2.多列布局
3.媒体查询
4.响应式图片
一:弹性盒子模型
分为弹性容器,弹性子元素,主轴,侧轴。
弹性容器常有的属性:
flex-direction 设置主轴的方向 row column row-reverse column-reverse
flex-wrap 超出时是否折行 wrap nowrap
flex-flow 上面两个的复合属性
justify-content 主轴上的对其方式 flex-start flex-end center space-between space-around
align-content 侧轴上有空白式 的对其方式
align-items
弹性子元素的属性:
order 顺序 可为负
flex-grow 扩展比例
flex-shrink 收缩比例
flex-basis 伸缩基本值
flex 上面三个的复合 1 1 100%
align-self 单独对某个子元素设置
eg:
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-weibkit-flex-flow:row wrap;
-ms-flex-flow: ;
flex-flow: ;
-webkit-flex: ;
-ms-flex: ;
flex: ;
多列:
column-width:auto|```;
column-count:
columns: 上面的复合
column-rule:1px solid red
column-gap:2px ;
媒体查询:
智能手机:>480px 平板:>768px 电脑:>992px
四:响应式图片
<picture>
<source media="()" srcset="srcurl"></>
<img src=""/>
</picture>
<script src="picturefill.js"></>
2.多列布局
3.媒体查询
4.响应式图片
一:弹性盒子模型
分为弹性容器,弹性子元素,主轴,侧轴。
弹性容器常有的属性:
flex-direction 设置主轴的方向 row column row-reverse column-reverse
flex-wrap 超出时是否折行 wrap nowrap
flex-flow 上面两个的复合属性
justify-content 主轴上的对其方式 flex-start flex-end center space-between space-around
align-content 侧轴上有空白式 的对其方式
align-items
弹性子元素的属性:
order 顺序 可为负
flex-grow 扩展比例
flex-shrink 收缩比例
flex-basis 伸缩基本值
flex 上面三个的复合 1 1 100%
align-self 单独对某个子元素设置
eg:
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-weibkit-flex-flow:row wrap;
-ms-flex-flow: ;
flex-flow: ;
-webkit-flex: ;
-ms-flex: ;
flex: ;
多列:
column-width:auto|```;
column-count:
columns: 上面的复合
column-rule:1px solid red
column-gap:2px ;
媒体查询:
<link rel="stylesheet" media="(max-width:800px)" href="example.css"/> <style> @media (max-width:800px){ } </style>
智能手机:>480px 平板:>768px 电脑:>992px
四:响应式图片
<picture>
<source media="()" srcset="srcurl"></>
<img src=""/>
</picture>
<script src="picturefill.js"></>
相关文章推荐
- CSS3弹性盒模型
- HTML+CSS入门
- css中背景 字体 文体属性练习
- css制作三角形,下拉框三角形
- [持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片
- 关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
- CSS,给我们不一样的体验
- CSS3:3D转换
- CSS从图标集里截取某一图标
- 浅谈css中的position
- 使用CSS3配合IE滤镜实现渐变和投影的效果
- 举例详解CSS中position属性的使用
- 如何配置一个软件系统的总体样式(用qss文件)
- css 多个不定数量提交按钮居中显示,纯css解决
- POI实战-java开发excel详解之样式
- checkbox大小调整 样式设置
- css中table tr:nth-child(even)改变tr背景颜色: IE7,8无效
- @media css样式
- CSS文本属性(下)
- css