iOS H5页面修改笔记一
2018-02-10 14:22
639 查看
作为一个iOS程序员对H5知之甚少,很少惭愧,但是在项目模块改造中,对原有的H5页面修改,确实不得不面对的问题,开启新的学习一路,一点点走起!
1 overflow
2.position
3. display: flex; //将对象作为弹性伸缩盒显示
4. justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
5. box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域
http://www.runoob.com/cssref/css3-pr-box-sizing.html
6. float 属性指定一个盒子(元素)是否应该浮动。
.nine_squares_selection{ height: 200px; background: #fff; overflow: scroll; /* overflow: hidden;*/ margin-left:24px; margin-right:24px; /* padding: 25px 5px;*/ } .nine_squares_selection ul{ position: relative; width: 100%; display: flex; justify-content: space-around; /* float:left;*/ } .nine_squares_selection li{ /* position: absolute;*/ box-sizing: border-box; text-align: center; float:left; width:25%;/*20%*/ } .nine_squares_selection li span{ display: inline-block; width: 40px; height: 40px; }
1 overflow
值 | 描述 |
---|---|
visible | 内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 由浏览器决定如何显示。如果需要,则显示滚动条。 |
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
4. justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
值 | 描述 | 测试 |
---|---|---|
flex-start | 默认值。项目位于容器的开头。 | 测试 » |
flex-end | 项目位于容器的结尾。 | 测试 » |
center | 项目位于容器的中心。 | 测试 » |
space-between | 项目位于各行之间留有空白的容器内。 | 测试 » |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 测试 » |
initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
inherit | 从父元素继承该属性。请参阅 inherit。 |
http://www.runoob.com/cssref/css3-pr-box-sizing.html
值 | 说明 |
---|---|
content-box | 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
border-box | 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算 |
inherit | 指定box-sizing属性的值,应该从父元素继承 |
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
相关文章推荐
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互 离线缓存 笔记
- IOS 初学笔记 之 内嵌H5页面
- iOS原生App与H5页面交互 离线缓存 笔记
- iOS学习笔记-089.彩票04——购彩大厅1_导航栏左边按钮与修改插件
- 手动增加Cookie值(iOS端连接H5页面)
- h5页面唤起app(iOS和Android),没有安装则跳转下载页面
- iOS笔记—对象的结构体属性单个修改方式
- IOS网络笔记--利用ShareSDK做分享页面(新浪分享Demo)图文教程
- iOS开发笔记(Swift)-针对Swift调用PPiFlatSegmentedControl项目的一些修改
- IOS开发学习笔记(二十四)——内嵌WebView页面
- iOS H5页面OC与JS简单交互
- iOS 使用WKWebView加载h5页面无法调用拨打电话功能
- h5页面 判断 移动端是ios、或者Android
- 【代码笔记】iOS-书架页面
- H5 ios input获取焦点挂起软键盘 输入框被遮盖 页面被顶起
- 【代码笔记】iOS-页面调的时候隐藏工具条