index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS3弹性伸缩布局[下]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <p>从技术上来说，IP（Internet Procotol，互联网协议）是一种地址协议，是互联网信息传输的规范和标准，也是互联网赖以存在的基础。现在的互联网大多是建立在IPv4这个版本的地址协议基础上，这个协议所“产生”的IP地址约有45亿个，由国际组织统一分配。简单来说，IP地址就相当于互联网设备的网络身份证，有了它，电脑、智能手机、云电视等设备才能正常上网。据测算，到2020年全球将有约500亿台联网设备，超过IPv4可供地址的10倍。</p> <p>对此，已经有不少科技企业开始大量囤积IP地址，但IP地址即将耗尽情况的出现还是会让那些有意在线扩展业务的美国企业面临大量损失。事实上，亚洲地区其实早在2011年就已经耗尽了IP地址，欧洲也在一年后遭遇了类似的情况，而北美地区则预计会在今夏迎来相同的状况。</p> <p>简单来说，IP地址之于互联网就相当于电话号码之于电话一样，这些由数字组成的IP地址不同于以结尾的这些顶级域名，因为它们仅仅是数据在互联网中传输的背后平台。</p> </div> </body> </html>
style.css
@charset "utf-8";
p {
width: 150px;
border: 1px solid gray;
background-color: silver;
margin: 5px;
padding: 5px;
}
div {
width: 100%;
display: flex;
/*flex-direction: column;*/
/*flex-direction: row-reverse;*/
/*flex-wrap: wrap;*/
/*flex-flow: row wrap;*/
/*justify-content: center;*/
/*justify-content: flex-end;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*align-items: center;*/
}
p:nth-child(1) {
flex: 1;
order: 3;
}
p:nth-child(2) {
/*align-self: center;*/
flex: 3;
order: 2;
}
p:nth-child(3) {
flex: 1;
order: 1;
}
相关推荐
CSS3弹性伸缩布局是HTML5的一个重要组成部分，主要用于设计具有不同屏幕尺寸和分辨率的响应式Web页面。本章主要介绍了CSS3 Flexbox模型，它是2012年9月提出的W3C工作草案，旨在提供统一的浏览器兼容标准。了解并掌握...
在探讨CSS3弹性伸缩布局（Flexbox布局）之前，需要了解弹性布局模型（Flexible Box）是HTML5中CSS3提供的一种新型布局方式，旨在提供更有效的方式来实现响应式网页设计。Flexbox布局模型的目标是提供一种更加有效的...
在本章中，我们将深入探讨CSS3中的弹性伸缩布局（Flexbox），这是一种现代的、响应式的网页布局模式，能够方便地处理元素的对齐、排列和尺寸调整。弹性布局在设计复杂页面结构时尤其有用，它使得开发者可以轻松应对...
在本章中，我们将深入探讨CSS3中的一个关键布局模式——弹性伸缩布局（Flexbox布局）。这个现代的布局模型为网页设计者提供了一种强大而灵活的方式来组织和定位元素，无论屏幕尺寸如何，都能保持良好的用户体验。让...
CSS3动画允许开发者通过纯CSS来创建复杂的动态效果，而无需依赖JavaScript或者其他第三方库。这些动画可以应用于各种元素，如按钮、导航菜单、图像等，为网页增加交互性和视觉吸引力。 **CSS3 动画的关键特性** 1....
Flexbox（弹性盒布局）提供了一种更灵活的盒模型，使元素在容器内按需自动布局，支持对齐、顺序调整和伸缩性。 **八、Grid布局** CSS Grid布局是二维布局系统，允许创建复杂的网格布局，具有强大的对齐和间距控制...
114. 第二款jQuery左右移动图片+内容展示插件代码 115. 简单jQuery实现产品图片自动左右滚动插件下载 116. 编辑推荐jQuery超帅模拟图片翻页的展示Flash特效效果 117. 适合网站内容推广淡入淡出特效的jQuery焦点图...
56.jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57.jQuery黑色动感Ajax无刷新动态分组图片效果代码 58.jquery黑色风格左右带箭头的图片浏览控制插件下载 59.jQuery鼠标滑动图片显示标题与简介...