IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> CSS3基础(3)——CSS3 布局属性全接触 -> 正文阅读

[Html-Css]CSS3基础(3)——CSS3 布局属性全接触

CSS3基础(3)——CSS3 布局属性全接触 一、 弹性盒模型
1、弹性盒子模型介绍
  弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐、方向、排序(即使在线吗大小位置、动态生成的情况)。
  弹性盒模型最大的特征在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的洽当布局。

  兼容性:http://caniuse.com/#search=flex
2、弹性盒子属性
  ①弹性容器属性
属性
描述
display
指定 HTML 元素盒子类型。
flex-direction
指定了弹性容器中子元素的排列方式
flex-wrap
设置弹性盒子的子元素超出父容器时是否换行。
flex-flow
flex-direction 和 flex-wrap 的简写
align-items
设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-content
修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
justify-content
设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
  ②弹性子元素属性
属性
描述
order
设置弹性盒子的子元素排列顺序。
flex-grow
设置弹性子元素的扩展比率
flex-shrink
设置弹性子元素的收缩比率
flex-basis
指定弹性子元素伸缩前的默认大小值,相当于width和height属性。
flex
设置弹性盒子的子元素如何分配空间。
align-self
在弹性子元素上使用。覆盖容器的 align-items 属性。
  ③属性详解
  a、语法:flex-direction: row | row-reverse | column | column-reverse
       含义:设置主轴方向,确定弹性子元素排列方式
row(默认值):主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr,则排列顺序是从左到右;如果文档顺序是rtl,则排列顺序是从右到左。 row-reverse:主轴为水平方向。排列顺序与页面的文档顺序相反。 column:主轴为垂直方向。排列顺序为从上到下。 column-reverse: 主轴为垂直方向。排列顺序为从下到上。
    

  b、语法:flex-wrap: nowrap|wrap|wrap-reverse ;
     含义:设置弹性盒子的子元素超出父容器时是否换行。
nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。 wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行 wrap-reverse -反转 wrap 排列。
  c、语法:flex-flow: flex-direction flex-wrap;
    含义:复合属性(flex-direction 和 flex-wrap),设置弹性子元素排列方式。
  d、语法:justify-content: flex-start|flex-end|center|space-between|space-around;
     含义:设置弹性子元素主轴上的对齐方式。

描述
flex-start
默认值。主轴开始对齐,主轴为横轴,ltr环境下,左对齐
flex-end
主轴结束对齐,主轴为横轴,ltr环境下,右对齐
center
居中对齐
space-between
第一个、最后一个对齐弹性容器的边缘,其余均匀分布。
space-around
全部均匀分布
    

  e、语法:align-items: stretch|center|flex-start|flex-end|baseline;
     含义:设置弹性子元素侧轴上的对齐方式

描述
stretch
默认值。 从侧轴开始到侧轴结束铺满整个侧轴
center
居中对齐
flex-start
侧轴开始对齐,主轴为横轴,顶对齐
flex-end
侧轴结束对齐
baseline
基线对齐
    

  f、语法:align-content: stretch|center|flex-start|flex-end|space-between|space-around;
    含义:侧轴有空白且有多行时,设置弹性子元素侧轴上的对齐方式。

描述
stretch
默认值。各行伸展以占用剩余空间。如果剩余空间是负数,该值等效flex-start。
center
居中对齐
flex-start
主轴开始对齐,主轴为横轴,ltr环境下,左对齐
flex-end
主轴结束对齐,主轴为横轴,ltr环境下,右对齐
space-between
第一个、最后一个对齐弹性容器的边缘,其余均匀分布。
space-around
全部均匀分布
  g、语法:order:<integer>
     含义:设置弹性子元素的顺序,数值小的排在前面,可以为负值。
    

  h、语法:flew-grow:<number>
     含义:设置弹性子元素的扩展比率,不允许为负值,默认为0.根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
    

  i、语法:flex-shrink:<number>
    含义:设置弹性子元素的收缩比率,不允许为负值,默认值为1.
       根据弹性盒子元素所设置的扩展因子作为比率来收缩空间
     

  j、语法:flex-basis:<length>|<percentage>|auto
      含义:设置弹性子元素的伸缩基准值,不允许为负值。默认值为auto,无特定宽度(高度)。
  k、语法:flex: flex-grow flex-shrink flex-basis|auto;
    含义:复合属性,设置弹性子元素的如何分配空间。
  l、语法:align-self: auto|stretch|center|flex-start|flex-end|baseline;
   含义:设置弹性子元素的在侧轴上的对齐方式,与align-item的相同。
  示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Flexbox响应式菜单</title>
 6     <link rel="stylesheet" type="text/css" href="normalize.css">
 7     <link rel="stylesheet" type="text/css" href="begin.css">
 8 </head>
 9 <body>
10     <!--
11         响应式菜单html架构,emmet的方式进行简写
12         ul.menu>li*6>a[href="#"]{HTML}
13         之后用tab键展开
14     -->
15     <ul class="menu">
16         <li><a href="#">HTML</a></li>
17         <li><a href="#">CSS</a></li>
18         <li><a href="#">Javascript</a></li>
19         <li><a href="#">Sass</a></li>
20         <li><a href="#">Ruby</a></li>
21         <li><a href="#">Mongo</a></li>
22     </ul>
23 </body>
24 </html>
25 /*
26     移动优先原则,优先实现小屏幕下的布局
27     使用颜色:#39ADD1 #3079AB #982551 #E15258 #CC6699 #52AC43
28 */
29 .menu{
30     list-style-type: none;
31     padding: 0px;
32     margin: 0px;
33     /*以弹性盒子显示*/
34     display: flex;
35     /*flex-direction 和 flex-wrap 的简写
36     row:主轴水平方向;左到右;wrap:弹性容器为多行。*/
37     flex-flow: column wrap;
38 }
39 .menu li{
40     /*设置元素高度*/
41     height: 40px;
42     /*设置文字居中*/
43     text-align: center;
44     /*设置行高*/
45     line-height: 40px;
46     /*
47     flex: flex-grow flex-shrink flex-basis|auto;
48     设置子元素扩展比率
49     收缩比率(所有弹性子元素都1代表均匀收缩)
50     设置弹性子元素的伸缩基准值
51     */
52     flex: 1 1 100%;
53 }
54 /*选择每个li元素是其父级的第一个子元素*/
55 .menu li:nth-child(1){
56     background-color: #39ADD1;
57 }
58 .menu li:nth-child(2){
59     background-color: #3079AB;
60 }
61 .menu li:nth-child(3){
62     background-color: #982551;
63 }
64 .menu li:nth-child(4){
65     background-color: #E15258;
66 }
67 .menu li:nth-child(5){
68     background-color: #CC6699 ;
69 }
70 .menu li:nth-child(6){
71     background-color: #52AC43 ;
72 }
73 .menu li a{
74     color: #fff;
75     text-decoration: none;
76 }
77 @media (min-width: 480px) {
78     .menu li {
79         flex: 1 1 50%;
80     }
81 }
82 @media (min-width: 768px) {
83     .menu{
84         flex-flow: row nowrap;
85     }
86 }

二、 多列属性详解
     多列(Multi-column)是一个CSS3新增布局模块,官方称为Multiple column layout,可以比较轻松的实现多列布局。
1、多列属性一览表
属性
属性描述
columns
复合属性(column-width和column-count),设置宽度和列数
columns-width
设置每列的宽度
columns-count
设置列数
column-gap
设置列之间的间隙
column-rule
复合属性(column-rule-width、column-rule-style和column-rule-color),设置列之间的边框样式
column-fill
设置列的高度是否统一
column-span
设置是否横跨所有列
2、多列属性详解   
   ①语法:column-width:<length>|auto
          含义:设置列的宽度
属性值
描述
auto
根据column-count自定义分配宽度
<length>
用长度值来定义列宽。不允许负值
   ②语法:column-count:<integer>|auto
      含义:设置列的个数
属性值
描述
auto(默认)
根据column-count自定义分配宽度
<integer>
用整数来定义列数。不允许负值
  ③语法:columns:column-width || column-count
     复合属性,设置列的宽度和个数
  ④语法:column-gap:<length>|normal
     含义:设置列与列之间的间隙
属性值
描述
normal(默认)
与font-size大小相同
假设该对象的font-size为16px,则normal值为16px,类推。
<length>
用长度值来定义列与列之间的间隙,不允许负值。
  ⑤语法:column-rule:[column-rule-width] || [column-rule-style] || [column-rule-color]
            含义:设置列与列之间的边框,类似border
属性值
描述
[column-rule-width]
设置列与列之间的边框厚度
[column-rule-style]
设置列与列之间的边框样式
[column-rule-color]
设置列与列之间的边框颜色
   ⑥语法:column-fill:auto | balance
      含义:设置所有列的高度是否统一
属性值
描述
auto(默认)
列高度自适应内容
balance
所有列的高度以其中最高的一列统一
  ⑦语法:column-span:none | all
       含义:对象颜色是否横跨所有列
属性值
描述
none(默认)
不跨列
all
横跨所有列
三、 媒体查询解析
       响应式布局(Responsive Web design)指的是z在网页开发过程中针对不同设备开发一套网站,然后根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)自适应地显示不同布局。
       响应式布局的核心是媒体查询。媒体查询(Media Query)是获取用户行为和设备环境、然后提供相应的css规则的过程的简称。
  媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
1、 基础语法:

 1 <!--link元素中的CSS媒体查询-->
 2 <link rel="stylesheet" media="(max-width:800px)" href="example.css"/>
 3 
 4 <!--样式表中的CSS媒体查询-->
 5 <style>
 6     @media (max-width:600px) {
 7         .facet_sidebar{
 8             display: none;
 9         }
10     }
11 </style>


语法:
<media_query_list>: [<media_query>[‘,’<media_query]*]?
<media_query>: [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>:’(’<media_feature>[:<value>]?)’


<表达式>: ’(’<媒体特征)[:<值>]?’)’
<媒体查询>:[only | not]? <媒体类型> [and<表达式>*] | <表达式>[and<表达式>]*
<媒体查询列表>:[<媒体类型> [,<媒体查询>]*]?

2、 媒体特征
媒体特征
取值
接受min max
简介
width
<length>
yes
定义输出设备中的页面可见区域宽度
height
<length>
yes
定义输出设备中的页面可见区域高度
device-width
<length>
yes
定义输出设备的屏幕可见宽度
device-height
<length>
yes
定义输出设备的屏幕可见高度
orientation
portrait | landscape
yes
定义“heigth“是否大于或等于”width“。portrait是,landscape否
aspect-ratio
<ratio>
yes
定义“width“与”height“的比率
device-aspect-ratio
<integer>
yes
定义“device-width“与”device-height“的比率
color
<integer>
yes
定义每一组输出设备的才是原件个数。如果不是彩色设备,则值等于0
color-index
<integer>
yes
定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
monochrome
<integer>
yes
定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution
<resolution>
yes
定义设备的分辨率。如96dpi,300dpi,118dpcm
scan
progressive | interlace
yes
定义电视类设备的扫描工序
grid
<integer>
yes
用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否
3、 媒体类型
类型
描述
all
所有设备
screen
彩色电脑屏幕
print
文档打印或打印预览模式
projection
项目演示,比如幻灯片
handheld
手持设备
speech
演讲
tv
电视
tty
固定字母间距的网格的媒体,比如电传打印机
braille
盲文
embossed
盲文打印
4、 媒体查询规则
类型
描述
@media all and (min-width:800px)
所有最小水平屏幕宽度为800像素的屏幕应用规则
@media(min-width:800px)
简写方式,同上
@media(min-width:800px) and (max-width:1200px)
所有介于800px与1200px之间的屏幕应用规则
@media(min-width:800px) or (orientation:portrait)
宽度至少是800像素或方向是纵向的,则会应用该规则
@media (not min-width:800px)
当最小宽度不是800像素时,会应用下列CSS规则
@media (width:800px) and (height:400px)
当最小宽度不是800像素时、400像素高时应用规则
@media(min-width:700px), handheld and(orientation:landscape)
最小宽度为700像素或是横屏的手持设备上,同时应用样式
5、 屏幕尺寸
       常用的屏幕尺寸从大到小如下所示:
老智能机:320px~480px 智能手机:3480px 平板电脑:3768px 中等屏幕(桌面显示器):3992px 大屏幕(大桌面显示器):31200px
     实现过程中,遵循移动优先原则

6、多列属性图片瀑布流+响应式布局:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片瀑布流</title>
 6     <link href="picBegin.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9     <!--h1{图片瀑布流}+ul.picC>li*9>img[src="img/$.jpg"]-->
10     <h1>图片瀑布流</h1>
11     <ul class="picC">
12         <li><img src="img/1.jpg" alt=""></li>
13         <li><img src="img/2.jpg" alt=""></li>
14         <li><img src="img/3.jpg" alt=""></li>
15         <li><img src="img/4.jpg" alt=""></li>
16         <li><img src="img/5.jpg" alt=""></li>
17         <li><img src="img/6.jpg" alt=""></li>
18         <li><img src="img/7.jpg" alt=""></li>
19         <li><img src="img/8.jpg" alt=""></li>
20     </ul>
21 </body>
22 </html>
23 h1{
24     width: 100%;
25     height: 50px;
26     margin: 0;
27     text-align: center;
28     line-height: 50px;
29     background-color: white;
30     box-shadow: 0 2px 6px 0 rgba(0,0,0,0.5);
31     position: fixed;
32     left: 0;
33     top: 0;
34 }
35 .picC{
36     width: 90%;
37     margin: 50px auto;
38     -webkit-column-count: 1;
39     column-count: 1;
40     -webkit-column-gap: 10px;
41     column-gap: 10px;
42     list-style-type: none;
43 }
44 .picC li{
45     margin-top: 10px;
46 }
47 @media (min-width: 480px) {
48     .picC{
49         -webkit-column-count: 2;
50         column-count: 2;
51     }
52 }
53 @media (min-width: 768px) {
54     .picC{
55         -webkit-column-count: 3;
56         column-count: 3;
57         -webkit-column-gap: 10px;
58         column-gap: 10px;
59     }
60 }

四、 响应式表格示例

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>响应式表格示例</title>
  6     <link href="style.css" type="text/css" rel="stylesheet">
  7 </head>
  8 <body>
  9     <h1>程序开发相关课程</h1>
 10     <table class="responsive">
 11         <thead>
 12             <tr>
 13                 <th>课程序号</th>
 14                 <th>课程名称</th>
 15                 <th>课程操作</th>
 16             </tr>
 17         </thead>
 18         <tbody>
 19             <tr>
 20                 <td class="number">150406</td>
 21                 <td class="name">移动应用开发课程</td>
 22                 <td class="action">
 23                     <a href="#">修改</a><a href="del">删除</a>
 24                 </td>
 25             <tr>
 26                 <td class="number">150407</td>
 27                 <td class="name">web前端开发课程</td>
 28                 <td class="action">
 29                     <a href="#">修改</a><a href="del">删除</a>
 30                 </td>
 31             <tr>
 32                 <td class="number">150408</td>
 33                 <td class="name">操作系统&数据库系列课程</td>
 34                 <td class="action">
 35                     <a href="#">修改</a><a href="del">删除</a>
 36                 </td>
 37             </tr>
 38             <tr>
 39                 <td class="number">150409</td>
 40                 <td class="name">智能硬件&物联网系列课程</td>
 41                 <td class="action">
 42                     <a href="#">修改</a><a href="del">删除</a>
 43                 </td>
 44             </tr>
 45         </tbody>
 46     </table>
 47 </body>
 48 </html>
 49 h1{
 50     font-size: 30px;
 51     text-align: center;
 52     color: #666666;
 53 }
 54 table.responsive{
 55     width: 98%;
 56     margin: 0 auto;
 57     border: 1px solid #666666;
 58     box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
 59     border-collapse: collapse;
 60 }
 61 table.responsive th,table.responsive td{
 62     border:1px solid #666666;
 63     padding: 0.5em 1em;
 64 }
 65 table.responsive th{
 66     background-color: #35B558;
 67 }
 68 table.responsive .action a{
 69     color: #ff5c00;
 70     /*去除下划线*/
 71     text-decoration: none;
 72     padding:  0 4px;
 73 }
 74 table.responsive .number,table.responsive .action{
 75     text-align: center;
 76 }
 77 @media (max-width: 480px) {
 78     table.responsive{
 79         box-shadow: none;
 80         border: none;
 81     }
 82     table.responsive thead{
 83         display: none;
 84     }
 85     table.responsive tr,table.responsive td{
 86         display: block;
 87         border:none ;
 88         position: relative;
 89     }
 90     table.responsive tr{
 91         margin-bottom: 1em;
 92         box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);
 93     }
 94     table.responsive .number{
 95         background-color: #35B558;
 96         text-align: center;
 97         padding-left: 20%;
 98     }
 99     table.responsive .number::before{
100         content: "课程序号";
101         position: absolute;
102         left: 0.5em;
103         top: 0.5em;
104         font-weight: bold;
105     }
106     table.responsive .name{
107         text-align: left;
108         padding-left: 28%;
109     }
110     table.responsive .name::before{
111         content: "课程名称";
112         position: absolute;
113         left: 0.5em;
114         top: 0.5em;
115         font-weight: bold;
116     }
117     table.responsive .action{
118         position: absolute;
119         right: 0;
120         top: 0;
121     }
122 }



五、 响应式图片项目示例
      响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成宽带的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。(兼容性问题)  
      常见的实现方式有:
用srcset和sizes加载不同图片

1 <img
2     sizes="(min-width:40em) 80vm,100vm"
3     srcset="img/mediu.jpg 375w,
4             img/large.jpg 480w,
5             img/extralarge.jpg 768w"
6     src="img/medium.jpg"
7     alt="响应式图片布局">

picture、source media加载不同图片

 1 <picture>
 2     <source
 3     media="(min-width:40em) 80vm, 100w"
 4     srcset="img/medium.jpg 375w,
 5             img/large.jpg 480w,
 6             img/extraalarge.jpg 768w" />
 7     <img 
 8             src="img/medium.jpg" 
 9             alt="响应式图片布局" />
10 </picture>

用source type 指定多种格式

 1 <picture>
 2     <source       
 3 type=”imge/webp”    
 4     media="(min-width:40em) 80vm, 100w"
 5     srcset="img/medium.jpg 375w,
 6             img/large.jpg 480w,
 7             img/extraalarge.webp 768w" />
 8     <source       
 9     type=”imge/webp”    
10         media="(min-width:40em) 80vm, 100w"
11         srcset="img/medium.jpg 375w,
12             img/large.jpg 480w,
13             img/extraalarge.jpg 768w" />
14     <img 
15             src="img/medium.jpg" 
16             alt="响应式图片布局" />
17 </picture>

上一篇文章      下一篇文章      查看所有文章
加:2017-07-30 23:24:46  更:2017-07-30 23:24:51 
 
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
css3中新增的样式使用方法
HTML插入Flash的全兼容完美解决方案
[转]响应式web设计之CSS3 Media Queries
img标签使用绝对路径无法显示图片
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年10日历
2018-10-21 17:02:32
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库