珠峰培训css3讲义-第二部分css3盒子模型_第1页
珠峰培训css3讲义-第二部分css3盒子模型_第2页
珠峰培训css3讲义-第二部分css3盒子模型_第3页
珠峰培训css3讲义-第二部分css3盒子模型_第4页
珠峰培训css3讲义-第二部分css3盒子模型_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、欢迎大家来到珠峰培训学习移动端开发CSS3基础知识及实战练习珠峰培训2015年10月09日第三章：CSS3盒子模型1、box-sizing盒子模型2、colnumns多列布局3、其他常用的知识点IE8及以上兼容IE10及以上兼容resize、outline.4、FlexBox伸缩布局己回去了解即可由于兼容性不好,目前基本上很少使用,自box-sizingcss2.0中规定,页面中的每一个元素都是一个盒子模型，其中包含我们经常使用的:margin、border、padding、width(height)、background.但是 传统的盒子模型在不同的浏览器中存在不一样的解析规则:1、W3C标

2、准盒子模型元素的宽度=width+padding+border (width仅仅是内容的宽度) 2、IE传统盒子模型(IE6以下和IE67下的Quirks怪异模式)元素的宽度=width (因为width中包含了内容宽度、padding、border)为了解决这个问题，CSS3中提供了属性：box-sizing，主要目的是能够 事先的定义盒子模型尺寸解析的方式content-box:按照W3C标准模式解析border-box:按照IE传统盒子模型解析inherit:让元素继承父亲元素的盒子模型解析机制box-sizing的应用* 参考附件中的案例来看我们的css3盒子模型的优势CSS3多列布局

3、* css3中新增了多列布局属性，让页面中的内容按照我们自己设置的列数进行排列(类似于报纸、报刊.)* css3多列布局的属性：1、columns：集成column-width和column-count两个属性，最常用的IE10及以上兼容2、column-gap：定义列的间距3、column-rule：定义列的边框4、column-span：定义多布局中子元素跨列效果(火狐不支持)5、column-fill：控制每一列高度(只有火狐支持)参照案例实现多列布局CSS3中resize和outline1、resize: none;加上后就不在允许用户手动的拖拽了 IE不兼容2、outline:outline: none;当你的文本框获取焦点后,不会出现默认的边框颜色IE8及以上兼容outline和border的主要区别：1、border设置完会影响盒子模型的宽高，而outline不会2、border可以分别修改四个方向的值，outline只

人人文库> 全部分类> 应用文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论