疯狂H5笔记 - 盒模型与布局相关属性
来源:互联网 发布:java大学实用教程答案 编辑:程序博客网 时间:2024/06/06 14:35
1.布局相关属性:
float:控制目标HTML组件的浮动方向。有属性值:left/rightclear:设置目标HTML组件的左右是否允许出现浮动对象:有属性值:none/left/right/bothoverflow:设置当目标组件内容溢出时的溢出内容显示方式。有属性值:visible/auto/hidden/scrolloverflow-x:设置内容溢出时水平方向溢出的内容显示方式,属性值同overflow的属性值overflow-y:设置内容溢出时垂直方向溢出的内容显示方式,属性值同overflow的属性值visibility:设置目标对象是否显示。有属性值:visible/hidden
2.难以理解的一个属性:clip:rect(A B C D),用于对目标元素进行裁剪,裁剪出一个矩形,只有在该矩形范围内才可见。有关A/B/C/D四个值对应的方向请参考网上
3.盒模型两种:inline和block两种,可以通过display属性来转换不同的两个盒模型
4.display有一个none属性值,用于隐藏目标对象,和visibility:hidden的区别在于:前者隐藏目标对象后还会释放目标对象的空间,后者依然会保留目标对象的空间
5.inline-block盒模型:通过display属性指定该属性值来实现这种盒模型,它是inline和block两个盒模型的综合体:这种盒模型的元素既不会独占一行,也支持通过width、height来指定宽度和高度。可以同时增加啊vertical-align:top来让多个inline-block盒模型的组件在顶端对齐
div>div{ display: inline-block; vertical-align: top; ...}
6.使用box-shadow属性可以对盒子添加阴影。box-shadow属性是一个复合属性,它包含如下五个值:hOffset:控制阴影在水平方向的偏移;vOffset:控制阴影在垂直方向的偏移;blurLength:控制阴影的模糊程度;scaleLength:控制阴影的缩放程度;color:控制阴影的颜色
7.CSS3新增的分栏功能实现方式很简单,只需要增加column-count属性即可,不过该属性需要指定不同的引擎的浏览器:
<style> div #content{ column-count: 2; -moz-column-count: 2; -o-column-count: 2; -mx-column-count: 2; -webkit-column-count: 2; }</style>
CSS3还提供了大量的属性用于实现分栏效果:
columns:这是一个复合属性,可同时指定栏目宽度、分栏数目两个属性值column-width:为一个长度值,指定每个栏目的宽度column-count:指定一个整数值,指定栏目数column-rule:这是一个复合属性,可同时指定分隔条的宽度、样式、颜色column-rule-width:指定栏目之间的分隔条的宽度column-rule-style:指定分隔条的线型,如solid等column-rule-color:设置分隔条的颜色column-gap:为一个长度值,用于指定各栏目之间的间距column-fill:用于控制栏目的宽度,有两个属性值: auto:随着内容的多少自动变化 balance:将会统一成内容最多的那一栏的高度
8.CSS3还提供了一个盒模型:多栏布局:display:box;目前浏览器不支持标准的box属性值,因此实际使用时需要添加不同的浏览器的前缀如moz等:
div{ display: box; display: -moz-box; display: -o-box; display: -webkit-box; display: -ms-box;}
多栏布局和之前的column-count实现的分栏布局不一样,分栏布局只是将一篇文章分成多个栏目显示,多兰布局可以自己控制
CSS3还为box盒模型提供了如下属性:
box-orient:设置box盒模型里子元素的排列方向。有如下两个属性值: horizontal:水平排列。如果没有指定高度,则默认等于父容器的高度 vertical:垂直排列。如果没有指定宽度,则默认等于父容器的宽度box-ordinal-group:设置box盒模型里子元素的显示顺序box-flex:设置box盒模型里子元素自适应宽度的比例。
如下简单的例子:
<style> #div1{ /*指定多兰布局的组件里的子元素显示的方向为垂直方向*/ box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -ms-box-orient: vertical; -webkit-box-orient: vertical; } #div2{ /*指定多栏布局的组件里的子元素显示的方向为水平方向*/ box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; }</style><!--在div2元素内部使用box-ordinal-group来指定显示顺序--><div id="#div2"> <div style="box-ordinal-group:2">栏目2</div> <div style="box-ordinal-group:1">栏目1</div> <div style="box-ordinal-group:3">栏目3</div></div>
- 疯狂H5笔记 - 盒模型与布局相关属性
- 疯狂H5笔记 - 变形与动画相关属性
- 疯狂H5讲义笔记 - 表单相关元素和属性
- 疯狂H5笔记 - 背景和边框相关属性
- 疯狂H5笔记 - 表格、列表相关属性及media query
- 疯狂H5讲义 - 字体与文本相关属性
- 疯狂H5讲义笔记 - H5常用元素和属性
- 疯狂H5讲义 - 大小、定位、轮廓相关属性
- 8.HTML5 CSS3盒模型和布局相关属性
- 疯狂H5笔记 - 多媒体支持
- 疯狂H5笔记 - CSS选择器
- 疯狂H5笔记 - DOM编程详解
- <div+css页面布局课堂笔记>4---与盒子相关的CSS属性
- <div+css页面布局课堂笔记>5---与盒子相关的CSS属性第二部分
- <div+css页面布局课堂笔记>6---与盒子相关的CSS属性第三部分
- h5学习笔记:左右布局
- 盒模型与浮动布局
- 相对布局相关属性
- float的深度理解
- 利用javascript的prototype的继承来写自定义MAP的remove方法
- Javascript 创建对象方法的总结
- C++ vector 类学习笔记
- java基本排序算法
- 疯狂H5笔记 - 盒模型与布局相关属性
- 销毁一个活动
- Java 变量和常量
- STM32 串口功能开发(未完待续)
- 技术转行产品总结思考(三)——我读富甲美国(上)
- 利用python进行数据分析之——数据规整化1(ETL)
- shell删除svn未跟踪文件
- struts2中的ajax异常解决-利用spring异常通知处理异常
- Coursera Machine Learning 第一周 quiz Linear Algebra习题答案