先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局。
 
其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去消化与理解。可能平时你们还一直在使用table,然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。
 
A:大家可以想一想,在现实生活中,如果我们拿一个盒子来装东西,那么盒子里面的东西是不是跟这个盒子之间会有空隙呢?站在里面物品的角度,则它们之间的间隙距离是不是就可以构成 物品到盒子的外边距。如果站在盒子的角度,则从盒子到物品的距离,是不是可以看出盒子的内边距呢。 当然,盒子还是会有宽和高的。外边距的英文就是margin,内边距的英文是padding,宽是width,高是height。下面是盒子模型的2D图:
 
CSS 1中定义了盒子模型的基本元素,详细属性请看下表:
margin-top 元素顶部外边距
margin-right 元素右侧外边距
margin-bottom 元素底部外边距
margin-left 元素左侧外边距
margin 这是一个复合属性,定义 元素 各个边的外边距, 属性值的顺序是: 上,右,下,左
border-top 元素上边框样式
border-right 元素右边框样式
border-bottom 元素下边框样式
border-left 元素左边框样式
border-width 元素边框宽度
border-top-width 元素上边框宽度
border-right-width 元素右边框宽度
border-bottom-width 元素下边框宽度
border-left-width 元素左边框宽度
border 复合属性,可以同时设置各个边框样式
padding-top 元素上侧内边距
padding-right 元素右侧内边距
padding-bottom 元素下侧内边距
padding-left 元素左侧内边距
padding 复合属性,同时设置各个边框内边距
width 设置元素的宽度
height 设置元素的高度
float 设置元素浮动显示
clear 清除元素的浮动效果
border-color 设置边框颜色
border-style 设置边框样式

CSS 2在以上基础上,又做了一些细化:

border-top-color 元素上边框颜色
border-right-color 元素右边框颜色
border-bottom-color 元素下边框颜色
border-left-color 元素左边框颜色
border-top-style 元素上边框样式
border-right-style 元素右边框样式
border-bottom-style 元素下边框样式
border-left-style 元素左边框样式
 
在CSS2的基础上,CSS3增加了弹性盒模型布局属性,这为我们开发适合现代移动浏览器提供了便利:
box-align 子元素在盒子内垂直方向上的空间分配
box-pack 子元素在盒子内水平方向的空间分配方式
box-direction 盒子的显示顺序
box-flex 元素在盒子内的自适应尺寸
box-flex-group 自适应子元素群组
box-lines 子元素分列显示
box-ordinal-group 子元素在盒子内的显示位置
box-orient 盒子分布的坐标轴
 
下面我将对CSS3中新增的弹性盒模型属性做详细介绍,并通过实际coding来带领大家深刻认识弹性布局的威力。
 
首先我们先创建一个html页面,代码如下所示:
接着我们给页面添加上基本的样式,如下所示:
*{ /*清除所有元素的默认外边距和内边距*/
margin:0;
padding:0;
}
 
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
}
 
.sidebar{/*给侧边栏添加样式*/
 
}
 
.middle{/*给中间区域添加样式*/
 
}
 
.article{/*给主体内容添加样式*/
 
}
 
运行页面,查看一下目前样式的应用效果:
 
 
首先声明:要想运用CSS3的弹性布局,需要将父容器设置为display:box 或 display:inline-box,下面不在赘述。
 

 
box-orient 作用: box-orient属性规定了子元素应该是水平方向还是垂直方向显示。
box-orient 语法: box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
 
语法解释: horizontal 和 inline-axis 规定了子元素以水平方向显示,两者的显示效果差不多,具体差异不清。vertical 和 block-axis 规定了子元素以垂直方向显示, 两者的显示效果差不多,具体差异不清 。
 
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
    修改样式表文件,添加如下样式代码:
 
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
}
 
运行demo页面,效果如下:
 
通过以上效果图,大家可以发现div已经变成了水平布局,且宽度是正好包裹内容, css2.1如果需要实现此效果,就得通过float:left;来实现了。
 
我们再次修改代码,实现垂直方向上布局:
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:vertical;/*垂直方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:vertical;
box-orient:vertical;
}
运行页面,效果如下图所示:
 
inline-axis 和 block-axis 运行效果分别与horizontal和vertical一样,这里大家可以自行去测试。
inherit属性值是布局方式继承自父元素,如果父元素是水平的,则它也使用水平布局,这个大家可以自行去测试。

 

box-align 作用:box-align规定了如何在垂直方向上对齐框内的子元素。
box-align 语法:box-align: start | end | center | baseline | stretch;
 
start
对于正常方向的框,每个子元素的上边缘沿着框的顶部放置。
对于反方向的框,每个子元素的下边缘沿着框的底部放置。
end
对于正常方向的框,每个子元素的下边缘沿着框的底部放置。
对于反方向的框,每个子元素的上边缘沿着矿的顶部放置。
center 均等地分割多余的空间,一半位于子元素之上,一半位于子元素之下。
baseline 如果box-orient是inline-axis或horizontal,所有子元素均与其基线对齐。
stretch 拉伸子元素以填充包含块
 
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
    添加start样式,代码如下:
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:start;/*正常布局下,吸附在顶端显示,相反布局下,吸附在底部显示*/
-moz-box-align:start;
box-align:start;
}
运行效果如下所示:
 
接着,我们让子元素吸附在底部显示,修改代码如下:
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:end;/*正常布局下,吸附在底部显示,相反布局下,吸附在顶部显示*/
-moz-box-align:end;
box-align:end;
}
此时的运行效果如下所示:
 
center和baseline的功能,大家可以自行测试,这里着重强调一下,如果属性值设为stretch,则它会拉伸填充满父元素,其实也就是未设置box-align时候的样式,所以说如果你要设置stretch,那你直接就别设置box-align属性,因为没意义了。
 
修改属性值为stretch,代码如下:
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:stretch;/*其实此效果就是不设置box-align时候的样式*/
-moz-box-align:stretch;
box-align:stretch;
}
效果如下:
 
box-pack 作用:用来规定子元素在盒子内的水平空间分配方式
box-pack 语法:box-pack: start | end | center | justify;
 
start
对于正常方向的框,首个子元素的左边缘吸附在盒子的左边框显示
对于相反方向的框,最后子元素的右边缘吸附在盒子的右边框显示
end
对于正常方向的框,最后子元素的右边缘吸附在盒子的右边框显示
对于相反方向的框,首个子元素的左边缘吸附在盒子的左边框显示
center 均等分割剩余空间,一半在首个子元素之前,一半在最后子元素之后
justify 首尾子元素分别吸附在左右边框上,中间的子元素分割多余空间
 
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
    box-pack:start;
 
    运行效果如下:
 
当然,如果盒子的顺序是从右到做,则上图就会吸附在右侧边框显示。
 
    box-pack:end;
运行效果如下:
 
注:如果盒子内的显示顺序是相反方向,则它会吸附在左侧边框显示。
 
box-pack:center
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:center; /*在垂直方向上,居中显示*/
-moz-box-align:center;
box-align:center;
 
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
    运行效果如下:
 
box-pack:justify
运行效果如下:
 
 
 

box-direction 作用:box-direction规定了盒子内子元素以什么方向来排列。
box-direction 语法:box-direction: normal | reverse | inherit;
 
normal 以默认方式显示子元素
reverse 以相反方向显示子元素
inherit 从父容器继承box-direction
 
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
    现在我就基于上面的例子,在样式表文件的 .row 里加上box-direction属性,大家一起观察分别观察它们的区别
 
 
 以水平方向显示子元素 box-orient:horizontal;
normal
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-pack:justify; /*在水平方向上,正常情况下,从左侧显示。*/
-moz-box-pack:justify;
box-pack:justify;
 
-webkit-box-direction:normal; /*以正常方向显示*/
-moz-box-direction:normal;
box-direction:normal;
}
大家可以发现显示顺序还是以前默认的显示顺序,
水平方向,就是从左到右
reverse
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-pack:justify; /*在水平方向上,正常情况下,从左侧显示。*/
-moz-box-pack:justify;
box-pack:justify;
 
-webkit-box-direction:reverse; /*以相反方向显示*/
-moz-box-direction: reverse;
box-direction: reverse;
}
应用上box-direction:reverse之后,显示方向颠倒了,
以前是从左到右,现在变成从右到左了。
 
以垂直方向显示子元素 box-orient: vertical;
normal
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:vertical;/*垂直方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:vertical;
box-orient:vertical;
 
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
}
大家可以发现,当以垂直方向显示子元素时,
normal属性采用默认的从上到下显示顺序。
reverse
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:vertical;/*垂直方向显示,兼容webkit和mozilla核心浏览器*/
-moz-box-orient:vertical;
box-orient:vertical;
 
-webkit-box-direction:reverse;
-moz-box-direction:reverse;
box-direction:reverse;
}
应用上box-direction:reverse之后,显示方向颠倒了,
以前是从上到下,现在变成从下到上了。
 
从上面的比较,大家可以看出,box-direction是根据当前子元素的显示方向(水平或垂直)来起作用的
 
box-direction:inherit 这个大家可以私下自行测试。
 

box-flex 作用:box-flex属性规定了盒子内的子元素是否可以自动伸缩其尺寸,只要盒子内对应显示方向上有剩余空间,可伸缩元素就会扩展来填充这些空间。
box-flex 语法:box-flex: value。
 
value 元素的可伸缩值,柔性是相对,例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
    现在我们就来对box-flex的作用通过示例来证明一下:
 
对 sidebar 应用样式
.sidebar{/*给侧边栏添加样式*/
 
 
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0; 
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
 
}
 
.article{/*给主体内容添加样式*/
 
}
从显示效果来看, 这正好证明了, 设置了box-flex的元素是有弹性的,
且只要盒子内对应显示方向上有剩余空间, 可伸缩元素就会扩展来填充这些空间。
对sidebar和middle应用样式
.sidebar{/*给侧边栏添加样式*/
 
 
 /*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
 
 
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
 
}
从显示效果可以看出,当 .middle 样式设置了box-flex:2.0时,
应用了 .middle 样式的元素也变成了弹性元素,且伸缩尺寸是
box-flex:1.0的两倍。
对sidebar,middle和article应用样式
.sidebar{/*给侧边栏添加样式*/
 
 
-webkit-box-flex: 1.0
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
 
 
-webkit-box-flex:2.0
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
 
 
-webkit-box-flex:3.0
-moz-box-flex:3.0;
box-flex:3.0;
}
 这里大家得注意一下,大家可能会认为,.article应该占1/2的空间的,
怎么看.sidebar和.middle加起来都比.article大的啊
 
其实这里分配的原则是, 剩余空间按照对应比率来分配。
 
对sidebar来说,伸缩的空间 = 总剩余空间 *(1.0/6.0);
对middle来说,伸缩的空间 = 总剩余空间*(2.0/6.0) ;
对article来说,伸缩的空间 = 总剩余空间 * (3.0/6.0);
 

box-flex-group 作用: 一组设置了box-flex-group元素当中,值最小的,占用全部剩余空间;值最小且相等,则平均分配剩余空间。

 
.sidebar{/*给侧边栏添加样式*/
 
 
-webkit-box-flex:1.0
-moz-box-flex:1.0;
box-flex:1.0;
 
-webkit-box-flex-group:1; 
-moz-box-flex-group:1;
box-flex-group:1;
}
 
.middle{/*给中间区域添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-flex-group:2; 
-moz-box-flex-group:2;
box-flex-group:2;
}
 
.article{/*给主体内容添加样式*/
 
 
-webkit-box-flex:2.0
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-flex-group:1; 
-moz-box-flex-group:1;
box-flex-group:1;
}
大家从效果图应该可以看出, 如果box-flex-group的值较大,则它只分配实际空间,
剩余空间分配给最小的一组 按比率分配。
 
这句话到底啥意思呢?
我们从代码中可以看到:sidebar的box-flex-group为1,article的box-flex-group也为1,
所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex,
所以剩余空间,article伸缩的空间 应该是 sidebar伸缩空间的两倍。
 

box-ordinal-group 作用:box-ordinal-group属性可以使我们定义子元素的显示顺序,值小的排在前,值大的排在后。
 
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
我们先看一下,没有运用box-ordinal-group属性时的运行效果,样式代码如下:
.sidebar{/*给侧边栏添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.middle{/*给中间区域添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
此时运行页面,效果如下:
 
 
根据上面页面,当前的显示顺序是 sidebar -> middle -> article
 
现在我们给这些子元素应用box-ordinal-group,且相应值 middle < article < sidebar,则我们期待的显示顺序应该是, middle -> article -> sidebar
 
样式代码如下:
.sidebar{/*给侧边栏添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group:4;
box-ordinal-group:4;
}
 
.middle{/*给中间区域添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
 
.article{/*给主体内容添加样式*/
 
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
运行页面,效果如下:
 
 
从效果图来看,的确是按照我们所期待的顺序显示的( middle -> article -> sidebar)。
 
至此,CSS3新增弹性盒模型属性就讲完了,本节内容还是比较多的,但是它给了我们很多惊喜,让我们在页面布局方面更加收放自如。

CSS3中的弹性流体盒模型技术详解的更多相关文章

  1. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  2. CSS3中-webkit-overflow-scrolling: touch 的使用方法详解

    -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回弹效果的滚 ...

  3. css3中的多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...

  4. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  5. 「视频直播技术详解」系列之七:直播云 SDK 性能测试模型

    ​关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...

  6. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  7. 转:LoadRunner中参数化技术详解

    LoadRunner中参数化技术详解 LoadRunner在录制脚本的时候,只是忠实的记录了所有从客户端发送到服务器的数据,而在进行性能测试的时候,为了更接近真实的模拟现实应用,对于某些信息需要每次提 ...

  8. P2P技术详解(二):P2P中的NAT穿越(打洞)方案详解

    1.内容概述 P2P即点对点通信,或称为对等联网,与传统的服务器客户端模式(如下图"P2P结构模型"所示)有着明显的区别,在即时通讯方案中应用广泛(比如IM应用中的实时音视频通信. ...

  9. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

随机推荐

  1. Scala 函数(五)

    函数是一组一起执行一个任务的语句. 您可以把代码划分到不同的函数中.如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的. Scala 有函数和方法, ...

  2. 上传form表单

    <form name="theForm" method="post" action="index.php?m=back&c=Goods& ...

  3. Hibernate绑定参数

    使用绑定参数的优势: 我们为什么要使用绑定命名参数?任何一个事物的存在都是有其价值的,具体到绑定参数对于HQL查询来说,主要有以下两个主要优势:①. 可以利用数据库实施性能优化 因为对Hibernat ...

  4. swiftTools

    String+Exten.swift // // String+Exten.swift // swiftTest // // Created by napiao on 15/11/27. // Cop ...

  5. 一个非常给力的播放器video-js

    video-js采用的是html5播放器. 在不支持html5的浏览器会自动切换成flash. video-js的官网http://www.videojs.com/ 看看下载的demo就知道个大概了. ...

  6. LFS:kernel panic VFS: Unable to mount root fs

    说明: 使用Vm虚拟机构建自己的LFS系统时,系统引导不成功,提示 kernel panic VFS: Unable to mount root fs 参考链接:http://www.52os.net ...

  7. Mysql的安装(二进制免编译包) 5.1版本

    一,Mysql的安装: 1.下载mysql,可以通过http://mirrors.sohu.com/下载mysql软件. wget http://mirrors.sohu.com/mysql/MySQ ...

  8. oracle ORA_ROWSCN 行记录的更新时间

    在这介绍两个oracle 10G开始提供的一个伪列ORA_ROWSCN,它又分为两种模式一种是基于block,这是默认的模式,还有一种是基于row上,这种模式只能在建里表时指定ROWDEPENDENC ...

  9. 【Java基础】static关键字相关

    static关键字特点: 随着类的加载而加载. 优先于对象存在. 被所有对象共享 可以直接被类名调用. 使用注意: 静态方法只能访问静态成员. 但非静态成员可以访问静态成员. 静态方法中不能使用thi ...

  10. C#中“@”的作用和用法

    “@”在看别人程序的时候偶尔看到,总结了一下两个用途 1. 不常用,也不推介用的用法. @关键字 可以作为标识符来使用,说白了,就是讲关键字变成非关键字. 2.逐字字符串字面量,以@开头,后面是由引导 ...