码迷,mamicode.com
首页 > Web开发 > 详细

CSS 页面 布局

时间:2017-10-15 19:47:27      阅读:398      评论:0      收藏:0      [点我收藏+]

标签:浮动   页面   概念   恢复   不能   ash   none   blog   指定   

一、外边框 margin

1.概念:围绕在元素边框之外的可选区域 

2.常用属性:(1):margin-top、(2)margin-right、(3)margin-bottom、(4)marign-left

3.单词译义:(1):边缘-顶部 、(2)边缘-右部、(3)边缘-底部、(4) 边缘-左部

二、内边距 padding

1.概念:内容区和边框border之间的区域

三、高度 height

1.height:用于设置元素的高度、其取值可以为 auto 默认值,或者某个长度值

2.width:值将根据图片源尺寸等比例缩放来设置

四、边框 border

1.概念:是围绕着元素内容区和内边框padding 区画的一条线

2.九种边框样式:none dotted dashed solid double groove solid double groove ridge inset outset

五、外边距 margin

1.概念:是围绕元素在边框之外的区域

2.常用属性:(1):margin-top、(2)margin-right、(3)margin-bottom、(4)marign-left

3.单词译义:(1):边缘-顶部 、(2)边缘-右部、(3)边缘-底部、(4) 边缘-左部外边距

六、元素浮动

一、应用 float 属性:

1.不浮动 none 

2.向左浮动 left

3.向右浮动 right

七、定位类型:

一、.概念:通过 position 属性指定分别对、静态定位 static  相对定位 relative  绝对定位  absolute  固定定位  fixed 进行定位

1.相对定位 relative:对自己的元素盒进行移动、但是移动走后原来位置的空间会保存下来

2.绝对定位 absolute:脱离常规文档流、以离他最近的非静态 (static) 作为基点(0)点来进行定位

3.固定定位 fixed :脱离常规文档流、不能与 flsot 应用于同一个标签

八、盒模型示意图:

 

技术分享

 

 

 

 

 

 

 

 

 

 

 

 

元素浮动:

 

---恢复内容结束---

CSS 页面 布局

标签:浮动   页面   概念   恢复   不能   ash   none   blog   指定   

原文地址:http://www.cnblogs.com/sics/p/7669670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!