CSS3布局属性
来源:互联网 发布:理财软件 编辑:程序博客网 时间:2024/04/29 11:53
1、弹性盒模型(Flexible Box 或Flexbox)
弹性盒模型最大的特征在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。
(1)弹性容器属性
flex-direction:设置主轴方向,确定弹性子元素排列方式
flex-wrap:当弹性子元素超出弹性容器范围时是否换行
flex-flow:flex-direction和flex-wrap属性的快捷方式,复合属性
justify-content:主轴上的对齐方式
align-items:侧轴上的对齐方式
align-content:侧轴上有空白时,侧轴的对齐方式
(2)弹性子元素属性
order:控制弹性容器里子元素的顺序
flex-grow:设置弹性子元素的扩展比率
flex-shrink:设置弹性子元素的收缩比率、
flex-basis:指定弹性子元素伸缩前的默认大小值,相当于width和height属性
flex:flex-grow,flex-shrink和flex-basis属性的复合属性
align-self:允许独立的弹性子元素覆盖弹性容器的默认对齐设置
Flexbox菜单项目实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
响应式菜单html架构,emmet的方式进行简写
ul.menu>li*6>a[href="#"]{HTML}
-->
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Mongo</a></li>
</ul>
</body>
</html>
.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){
background-color: #39ADD1;
}
.menu li:nth-child(2){
background-color: #3079AB;
}
.menu li:nth-child(3){
background-color: #982551;
}
.menu li:nth-child(4){
background-color: #E15258;
}
.menu li:nth-child(5){
background-color: #CC6699;
}
.menu li:nth-child(6){
background-color: #52AC43;
}
@media (min-width:480px) {
.menu li{
flex: 1 1 50%;
}
}
@media (min-width:768px) {
.menu{
flex-flow: row nowrap;
}
}
2、多列详解
属性一览:
columns:复合属性(column-width和column-count),设置宽度和列数;
column-width:设置每列的宽度
column-count:设置列数
column-gap:设置列之间的间隙
column-rule:复合属性(column-rule-width、column-rule-style、column-rule-color),设置列之间的边框样式
column-fill:设置列的高度是否统一
column-span:设置是否横跨所有列
3、媒体查询
最佳实践方式:
/*超小屏幕(手机,小于768px)*/
/*没有任何媒体查询相关的代码,移动设备优先*/
/*小屏幕(平板,大小等于768)*/
@media (min-width: 768px) {
}
/*中等屏幕(桌面显示器,大于等于992px)*/
@media (min-width: 992px) {
}
/*大屏幕(大桌面显示器,大于等于1200px)*/
@media (min-width: 1200px) {
}
0 0
- CSS3布局属性
- css3 calc()自适应布局属性
- CSS3属性之多栏布局column
- CSS3 Flex布局 Flexbox的属性详解
- CSS3属性之多栏布局column
- CSS3响应式布局meta viewport属性
- CSS3.flexbox布局-父级容器属性
- CSS3基础(3)——CSS3 布局属性全接触
- 使用css3的@media属性实现页面响应式布局
- 关于CSS3中transform属性对元素布局的影响。
- 8.HTML5 CSS3盒模型和布局相关属性
- 细说css3 flex布局之flex容器属性
- 细说css3 flex布局之flex项目属性
- css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
- CSS3盒模型box-sizing属性详解,布局更方便
- 巧用css3的calc()属性进行响应式布局
- 使用CSS3属性(@media)制作网站响应式布局
- 两点补充——CSS3新属性以及弹性布局
- 第十三周项目四 动物这样叫(2)
- Messenger源码分析
- 二维码的简单封装(swift)
- BZOJ2051——A Problem For Fun
- 第12周项目1阅读程序写出运行结果4
- CSS3布局属性
- Coursera机器学习-第六周-Advice for Applying Machine Learning
- ebs login url
- CGI通用网关接口
- FarmFields Release Carbon Mist During Rainstorms 科学美国人
- 堆栈与队列的区别整理
- Libevent源码分析-----event-config.h指明所在系统的环境
- 单幅图像的深度学习,对NYU数据集进行划分
- Retrofit源码解析