<div+css>盒子之间的关系
2013-03-14 23:13
411 查看
盒子之间的关系
一、HTML和DOM(Document文档 Object对象 Model模型)
二、标准文档流(标准流)
1、块级元素(block)(一个矩形区域,并且和相邻的元素依次竖直排列。不排在同一行中)
2、行内元素(inline)(对于文字这类元素,各个字母之间横向排列。到最后端自动拆行,这就是行内元素)
三、盒子在标准流中的定位原则
1、行内元素之间的水平margin
左侧元素的margin-right+右侧元素margin-left
2、块级元素之间的竖直margin
3、嵌套盒子之间的margin
4、将margin设成负数会怎样?
定位
一、position
static:静态定位,这种定位方式可以不写,是系统默认的定位方式。
relative:相对定位,相对原有位置的定位方式。
absolute:绝对定位,盒子的位置以它所在的已定为的盒子为基准进行偏移。
fixed:固定定位,相对于浏览器窗口的定位方式。
二、相对定位(relative)
1、使用相对定位的盒子,会相对它原来的位置偏移制定的距离
2、使用相对定位的盒子,仍然在标准流中,它的偏移对附近盒子都没有影响。
三、绝对定位(absolute)
1、使用绝对定位,是相对于它所处的容器(已经定位的盒子)来说的。
2、使用绝对定位的DIV,会彻底脱离标准流,其它的盒子认为这个盒子不存在。
四、固定定位(fixed)
五、z-index:各盒子之间的前后顺序,数值越大越往前,数值越小越往后。默认为0,按照默认方式覆盖。
六、display:控制盒子是否隐藏,转变盒子的类型。
一、HTML和DOM(Document文档 Object对象 Model模型)
二、标准文档流(标准流)
1、块级元素(block)(一个矩形区域,并且和相邻的元素依次竖直排列。不排在同一行中)
2、行内元素(inline)(对于文字这类元素,各个字母之间横向排列。到最后端自动拆行,这就是行内元素)
三、盒子在标准流中的定位原则
1、行内元素之间的水平margin
左侧元素的margin-right+右侧元素margin-left
2、块级元素之间的竖直margin
3、嵌套盒子之间的margin
4、将margin设成负数会怎样?
定位
一、position
static:静态定位,这种定位方式可以不写,是系统默认的定位方式。
relative:相对定位,相对原有位置的定位方式。
absolute:绝对定位,盒子的位置以它所在的已定为的盒子为基准进行偏移。
fixed:固定定位,相对于浏览器窗口的定位方式。
二、相对定位(relative)
1、使用相对定位的盒子,会相对它原来的位置偏移制定的距离
2、使用相对定位的盒子,仍然在标准流中,它的偏移对附近盒子都没有影响。
三、绝对定位(absolute)
1、使用绝对定位,是相对于它所处的容器(已经定位的盒子)来说的。
2、使用绝对定位的DIV,会彻底脱离标准流,其它的盒子认为这个盒子不存在。
四、固定定位(fixed)
五、z-index:各盒子之间的前后顺序,数值越大越往前,数值越小越往后。默认为0,按照默认方式覆盖。
六、display:控制盒子是否隐藏,转变盒子的类型。
相关文章推荐
- <div+css页面布局课堂笔记>2---页面布局的盒子模型
- <div+css页面布局课堂笔记>5---与盒子相关的CSS属性第二部分
- <div+css页面布局课堂笔记>4---与盒子相关的CSS属性
- <div+css页面布局课堂笔记>6---与盒子相关的CSS属性第三部分
- <div+css页面布局课堂笔记>3---页面布局的盒子模型(IE与其他浏览器区别)
- <div+css页面布局课堂笔记>8---页面浮动设计
- <div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
- <div+css页面布局课堂笔记>10---页面布局网站首页设计实例__2
- <div>标签(css与html写在一起 style type=“text/css”)
- <div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版(仿csdn首页)
- <div+css页面布局课堂笔记>1---div+css对页面布局的优势
- HTML——<div>、<span><p>、<br>以及<span>之间的关系
- novaclient代码解析之---通过nova show <server-id>命令解析Nova client与Nova API之间的调用关系
- 无法确定表达式的类型,因为<null>和int之间没有隐式转换
- &lt;div&gt;.&lt;li&gt;上面有好空白大/间距.&lt;/li&gt;.&lt;/div&gt;
- <font size=xx.pt> 于world中字体大小的对应关系
- HTML 中的<div>
- 首页html代码的<head>和</head>之间的内容
- <li>标签之间有间距的问题
- <div>标签嵌套多层如何找准位置