2015.7.9 第四课 课程重点(浮动、盒子模型、绝对/相对定位)
2015-07-14 09:20
197 查看
1、块级元素的特点:
(1)块级元素里面的内容,或者背景图片,默认显示在块的左上角
(2)块级元素,默认情况下,单独占满一行。
常用的块级元素:div、p、h1-h6、hr、ul li、ol li、table、body...
2、浮动:float
作用:通过漂浮,让块级元素实现并排
float:left 或 right
注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动
清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动)或both(同时清除两侧的浮动)
简单说明:想排在一行就使用浮动(float:left) ,想提行就清除浮动(直接用 clear:both 即可,不用管左右)
3、盒子模型:
(1)border:边框
border-top:上边框
border-left:左边框
border-right:右边框
border-bottom:下边框
(2)padding:内边距(框内文字距离框线的间距)有3种写法
第一种:上下左右 padding:10px;
第二种:上下 左右 padding:10px 20px;
第三种:上 右 下 左 padding:10px 20px 10px 15px;
(3)margin:外边距(边框对边框外其他内容的间距)有3种写法
第一种:上下左右 margin:10px;
第二种:上下 左右 margin:10px 20px;
第三种:上 右 下 左 margin:10px 20px 10px 15px;
注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小width、height的值来保持盒子原大小
*{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0
4、行内元素的特点:
(1)默认情况下,不受到height、width属性的影响
(2)不会占满一行
常用的行内元素:span(适用于一小节文字的样式设定)、a(链接)
【备注】 display:block; 将 行内元素 转成 块级元素
5、绝对定位 & 相对定位:
(1)绝对定位:position:absolute;
当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响
此时对它设置top、left、right、bottom,就是针对窗体的距离
(2)相对定位:position:relation;
当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的
此时对它设置top、left、right、bottom,是针对上一级容器的距离
【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高
【请大家多多实践,结合 浮动float、清除浮动 clear、绝对及相对定位】
(1)块级元素里面的内容,或者背景图片,默认显示在块的左上角
(2)块级元素,默认情况下,单独占满一行。
常用的块级元素:div、p、h1-h6、hr、ul li、ol li、table、body...
2、浮动:float
作用:通过漂浮,让块级元素实现并排
float:left 或 right
注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动
清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动)或both(同时清除两侧的浮动)
简单说明:想排在一行就使用浮动(float:left) ,想提行就清除浮动(直接用 clear:both 即可,不用管左右)
3、盒子模型:
(1)border:边框
border-top:上边框
border-left:左边框
border-right:右边框
border-bottom:下边框
(2)padding:内边距(框内文字距离框线的间距)有3种写法
第一种:上下左右 padding:10px;
第二种:上下 左右 padding:10px 20px;
第三种:上 右 下 左 padding:10px 20px 10px 15px;
(3)margin:外边距(边框对边框外其他内容的间距)有3种写法
第一种:上下左右 margin:10px;
第二种:上下 左右 margin:10px 20px;
第三种:上 右 下 左 margin:10px 20px 10px 15px;
注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小width、height的值来保持盒子原大小
*{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0
4、行内元素的特点:
(1)默认情况下,不受到height、width属性的影响
(2)不会占满一行
常用的行内元素:span(适用于一小节文字的样式设定)、a(链接)
【备注】 display:block; 将 行内元素 转成 块级元素
5、绝对定位 & 相对定位:
(1)绝对定位:position:absolute;
当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响
此时对它设置top、left、right、bottom,就是针对窗体的距离
(2)相对定位:position:relation;
当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的
此时对它设置top、left、right、bottom,是针对上一级容器的距离
【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高
【请大家多多实践,结合 浮动float、清除浮动 clear、绝对及相对定位】
相关文章推荐
- 2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)
- HDU 1013 Digital Roots
- iOS系统方法进行AES对称加密
- 【零基础学习iOS开发】【01-前言】01-开篇
- HDU 3455 Leap Frog (线性dp)
- 【数据结构】 Queue 的简单实现
- 一致性哈希算法与Java实现
- 企业如何快速拥有高效便捷的客服服务
- String参数是传值还是传递引用的测试
- Android 访问权限设置
- c++ 中的单冒号与双冒号
- Android自定义圆形图片和文本
- AliCrackme_2题的分析
- 新浪微博——点击按钮自动加关注代码
- UI之如何打磨设计能力?
- lolcat :一个在Linux 终端中输出彩虹特效的命令行工具
- 2015.7.8 第三课 课程重点(css样式)
- HDU 2391 Filthy Rich
- iOS 友盟第三方登录分享(转载)
- 使用xib自定义UItableviewcell实现一个简单的团购应用界面布局