布局属性全接触

作者: 手机游戏网站  发布:2019-10-09

  ③属性详解

1、 基础语法:

二、 多列属性详解

属性值

描述

normal(默认)

与font-size大小相同

假设该对象的font-size为16px,则normal值为16px,类推。

<length>

用长度值来定义列与列之间的间隙,不允许负值。

    手机游戏网站 1

      含义:设置弹特性成分的伸缩基准值,不允许为负值。暗中认可值为auto,无特定宽度(低度)。

媒体特征

取值

接受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代表否

          含义:设置列的增长幅度

属性值

描述

[column-rule-width]

设置列与列之间的边框厚度

[column-rule-style]

设置列与列之间的边框样式

[column-rule-color]

设置列与列之间的边框颜色

       含义:设置主轴方向,明确弹天性成分排列格局

    手机游戏网站 2

      响应式图片指客户代理依照输出设备的分辨率差异加载分化门类的图片,不会促成宽带的浪费。同有时间,在转移输出设备类型或分辨率时,能马上加载对应类型的图形。(包容性难题)  

描述

stretch

默认值。 从侧轴开始到侧轴结束铺满整个侧轴

center

居中对齐

flex-start

侧轴开始对齐,主轴为横轴,顶对齐

flex-end

侧轴结束对齐

baseline

基线对齐

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

    含义:复合属性(flex-direction 和 flex-wrap),设置弹天性成分排列方式。

属性值

描述

auto

根据column-count自定义分配宽度

<length>

用长度值来定义列宽。不允许负值

  k、语法:flex: flex-grow flex-shrink flex-basis|auto;

  a、语法:flex-direction: row | row-reverse | column | column-reverse

      含义:设置列的个数

  b、语法:flex-wrap: nowrap|wrap|wrap-reverse ;

            含义:设置列与列之间的边框,类似border

手机游戏网站,5、 荧屏尺寸

2、多列属性详解   

  f、语法:align-content: stretch|center|flex-start|flex-end|space-between|space-around;

      含义:设置有着列的莫斯中国科学技术大学学是不是联结

类型

描述

@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像素或是横屏的手持设备上,同时应用样式

  ④语法:column-gap:<length>|normal

  e、语法:align-items: stretch|center|flex-start|flex-end|baseline;

     复合属性,设置列的拉长率和个数

描述

stretch

默认值。各行伸展以占用剩余空间。如果剩余空间是负数,该值等效flex-start。

center

居中对齐

flex-start

主轴开始对齐,主轴为横轴,ltr环境下,左对齐

flex-end

主轴结束对齐,主轴为横轴,ltr环境下,右对齐

space-between

第一个、最后一个对齐弹性容器的边缘,其余均匀分布。

space-around

全部均匀分布

属性值

描述

auto(默认)

根据column-count自定义分配宽度

<integer>

用整数来定义列数。不允许负值

  g、语法:order:<integer>

  ⑤语法:column-rule:[column-rule-width] || [column-rule-style] || [column-rule-color]

 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,能够极其轻便的得以实现多列布局。

属性值

描述

none(默认)

不跨列

all

横跨所有列

  l、语法:align-self: auto|stretch|center|flex-start|flex-end|baseline;

 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<表达式>]*
<媒体查询列表>:[<媒体类型> [,<媒体查询>]*]?

       依照弹性盒子成分所设置的增添因子作为比率来减少空间

1、弹性盒子模型介绍

  弹性盒模型(Flexible Box或Flexbox)是叁个CSS3新添布局模块,官方称为CSS Flexible Box Layout Module,用于落到实处容器里项目标对齐、方向、排序(就算在线吗大小地点、动态变化的情状)。

三、 媒体查询深入分析

    • row(暗中认可值):主轴为水平方向。排列顺序与页面包车型客车文书档案顺序一样。要是文书档案顺序是ltr,则排列顺序是从左到右;要是文书档案顺序是rtl,则排列顺序是从右到左。
    • row-reverse:主轴为水平方向。排列顺序与页面包车型大巴文书档案顺序相反。
    • column:主轴为垂直方向。排列顺序为从上到下。
    • column-reverse: 主轴为垂直方向。排列顺序为从下到上。

   ②语法:column-count:<integer>|auto

    含义:复合属性,设置弹性子成分的什么样分配空间。

4、 媒体查询准绳

2、弹性盒子属性

  ①弹性容器属性

     含义:设置弹本性元素侧轴上的对齐格局

   ①语法:column-width:<length>|auto

     含义:设置列与列之间的空隙

     含义:设置弹性盒子的子成分超出父容器时是或不是换行。

  h、语法:flew-grow:<number>

  媒体询问让CSS能够越来越纯粹效率于分化的媒体类型和同等媒体的不一样规范。

  ③语法:columns:column-width || column-count

   含义:设置弹天性成分的在侧轴上的对齐情势,与align-item的一律。

       响应式布局的主干是媒体询问。媒体询问(Media Query)是赢得客商作为和设备条件、然后提供相应的css法规的进度的简称。

  c、语法:flex-flow: flex-direction flex-wrap;

       含义:对象颜色是或不是横跨全数列

  • 用srcset和sizes加载差异图片

    1 响应式图片布局

  • picture、source media加载差别图片

    1 2 7 响应式图片布局 10

  • 用source type 内定多样格式

    1 2 8 14 响应式图片布局 17

手机游戏网站 3

    手机游戏网站 4

    含义:侧轴有空白且有多行时,设置弹性子成分侧轴上的对齐格局。

    • nowrap - 私下认可, 弹性容器为单行。这一场地下弹个性项大概会溢出容器。
    • wrap - 弹性容器为多行。该意况下弹个性项溢出的片段会被停放到新行,子项内部会产生断行
    • wrap-reverse -反转 wrap 排列。
 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="手机游戏网站 5"></li>
13         <li><img src="img/2.jpg" alt="手机游戏网站 6"></li>
14         <li><img src="img/3.jpg" alt="手机游戏网站 7"></li>
15         <li><img src="img/4.jpg" alt="手机游戏网站 8"></li>
16         <li><img src="img/5.jpg" alt="手机游戏网站 9"></li>
17         <li><img src="img/6.jpg" alt="手机游戏网站 10"></li>
18         <li><img src="img/7.jpg" alt="手机游戏网站 11"></li>
19         <li><img src="img/8.jpg" alt="手机游戏网站 12"></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、多列属性一览表

描述

flex-start

默认值。主轴开始对齐,主轴为横轴,ltr环境下,左对齐

flex-end

主轴结束对齐,主轴为横轴,ltr环境下,右对齐

center

居中对齐

space-between

第一个、最后一个对齐弹性容器的边缘,其余均匀分布。

space-around

全部均匀分布

属性

描述

order

设置弹性盒子的子元素排列顺序。

flex-grow

设置弹性子元素的扩展比率

flex-shrink

设置弹性子元素的收缩比率

flex-basis

指定弹性子元素伸缩前的默认大小值,相当于width和height属性。

flex

设置弹性盒子的子元素如何分配空间。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。

  兼容性:http://caniuse.com/#search=flex

四、 响应式表格示例

       响应式布局(Responsive Web design)指的是z在网页开采进度中针对区别器材支出一套网站,然后依照顾客作为以至配备条件(系统平台、显示屏尺寸、荧屏定向等)自适应地出示差异布局。

      常见的完成格局有:

一、 弹性盒模型

     含义:设置弹个性成分的次第,数值小的排在前边,可感觉负值。

  ⑦语法:column-span:none | all

      • 老智能手机:320px~480px
      • 智能手提式有线电话机:³480px
      • 机械Computer:³768px
      • 高级中学级荧屏(桌面显示屏):³992px
      • 大荧屏(大桌面显示屏):³1200px

       常用的显示屏尺寸从大到小如下所示:

手机游戏网站 13

属性

属性描述

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

设置是否横跨所有列

3、 媒体类型

    含义:设置弹本性成分的减少比率,不允许为负值,私下认可值为1.

  弹性盒模型最大的特征在于,能够动态修改子元素的升幅和可观,以知足在不一致尺寸荧屏下的洽当布局。

  j、语法:flex-basis:<length>|<percentage>|auto

  示例:

属性

描述

display

指定 HTML 元素盒子类型。

flex-direction

指定了弹性容器中子元素的排列方式

flex-wrap

设置弹性盒子的子元素超出父容器时是否换行。

flex-flow

flex-direction 和 flex-wrap 的简写

align-items

设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

align-content

修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐

justify-content

设置弹性盒子元素在主轴(横轴)方向上的对齐方式。

  ②弹天性元素属性

  d、语法:justify-content: flex-start|flex-end|center|space-between|space-around;

     手机游戏网站 14

   ⑥语法:column-fill:auto | balance

    手机游戏网站 15

手机游戏网站 16

     含义:设置弹性情成分的庞大比率,不容许为负值,默以为0.遵照弹性盒子成分所设置的扩充因子作为比率来分配剩余空间。

    手机游戏网站 17

2、 媒体特征

     达成进度中,遵循移动优先条件

五、 响应式图片项目示范

属性值

描述

auto(默认)

列高度自适应内容

balance

所有列的高度以其中最高的一列统一

  i、语法:flex-shrink:<number>

类型

描述

all

所有设备

screen

彩色电脑屏幕

print

文档打印或打印预览模式

projection

项目演示,比如幻灯片

handheld

手持设备

speech

演讲

tv

电视

tty

固定字母间距的网格的媒体,比如电传打印机

braille

盲文

embossed

盲文打印

手机游戏网站 18

     含义:设置弹性格元素主轴上的对齐形式。

  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 }

本文由银河网站登录发布于手机游戏网站,转载请注明出处:布局属性全接触

关键词: