1、外边距叠加

当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加，元素被包含时也有可能会发生叠加（如果没有内边距和边框），如果一个空元素没有内边距和边框本身也会发生上下边距的叠加。   只有普通文档流中块框的垂直外边距才会发生叠加，行内框、浮动框或绝对定位框之间的外边距不会发生叠加。

2、定位

css有3中基本的定位机制，普通流，浮动和绝对定位。浮动和绝对定位会脱离普通流，但是float跟绝对定位又有点不一样，绝对定位完全不会再影响普通流中的元素，但是float对其后的文档流中的元素依然有影响，文档流中的内容会让移动以留出空间来展示浮动元素，也就是说，浮动元素之后覆盖其他元素的背景不会覆盖内容，这就需要用到普通流中的元素的clear属性了。。相对定位就是占据原来位置的基础上偏移有可能遮盖其他元素。

3、行框和清理    clear属性

值可以是left、right、both或none，它表示框的那些边不应该挨着浮动框。实际上是留足够的垂直空间给浮动框。通过overflow属性也可以实现clear的功效。

4、背景图片定位

当背景图片使用百分百定位的时候，并不对图像左上角进行定位而是图像是对应百分比的一个对应点。

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<style>

	div{ background-color:red;

	margin:20px;

	}

	span{

	background-color:blue;}

</style>

<body  >

<div >123</div>

<div style="background:url(dlck.png) #99FFCC; background-position:20% 20%; background-repeat:no-repeat; position:relative; width:200px ; height:200px;">

<span style="width:100px; height:100px; position:absolute; top:20px; left:20px; background:yellow;-"></span>

<span style="width:100px; height:100px; position:absolute; top:20%; left:20%; background:gray;-"></span></div>

<div style="clear:both;">789</div>

	<span style="width:100px; position:relative; top:0px; left:15px;">abc</span>

	<span style="width:100px; float:left;">def</span>

	<span style="width:100px;">ghi</span>

<div style="background:blue; overflow:auto;">

	<p style="float:left;">1232</p>

	<h1>jjjjj</h1>

</div>

<img src="ts_logo.png" style="float:left;" />

<h1 style="background-color:green;">哈哈哈哈哈哈</h1>

</body>

</html>

css学习笔记---盒模型，布局的更多相关文章

  1. CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  2. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  3. css学习_css盒模型及应用

    1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red                (solid/ ...

  4. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  5. CSS学习笔记：flex布局

    目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...

  6. CSS学习笔记：grid布局

    目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...

  7. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  8. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  9. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

随机推荐

  1. java 远程调用

    1.webservice (soap+http) -aixs -axis2 -xfire—>cxf 2.webservice问题 -基于xml,xml效率,(数据传输效率,xml序列化效率) - ...

  2. Junit4使用总结

    常用注解 @Before:初始化方法,在任何一个测试方法执行之前,必须执行的代码. @After:释放资源,在任何一个测试方法执行之后,需要进行的收尾工作.   @Test:测试方法,表明这是一个测试 ...

  3. 中间件解析FDMEMTABLE.delta生成SQL的方法

    遍历Delta.DataView.Rows,Delta.DataView.Rows是记录的行集,由行组成 TFDDatSRow,即是一行记录的对象 TFDDatSRow的方法:  GetData(), ...

  4. Struts2框架复习（一）--最基本的struts2框架

    前言 最近离职在家,发现之前学习的Struts2框架由于长时间不使用有点生疏,有鉴于此写下此文以备自己复习使用,同时也供大家批评指正. 准备工作 我觉得Struts2主要就是对Servlet的封装,还 ...

  5. mysql20170410练习代码+笔记

    今天的几道高级sql查询真的挺难的,感觉好像视频里讲过,当时也没有练,已经淡化了很多,sql还是要多练习啊!确实逻辑性挺强的. SELECT studentResult,studentNO FROM ...

  6. MapReduce的矩阵相乘

    一.单个mapreduce的实现 转自:http://blog.sina.com.cn/s/blog_62186b460101ai1x.html 王斌_ICTIR老师的<大数据:互联网大规模数据 ...

  7. 分类（category）是门学问

    分类的精细程度表现了人类的文明程度. 1. 学科分类 cybernetics:控制论:

  8. go多进程

    package main import "fmt" import "time"func loop() { for i := 0; i < 10; i++ ...

  9. js模拟复制

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了.   一.实现点击按钮,复制文本框中的的内 ...

  10. switchhosts+fiddler app抓包

    1.先去switchhosts和fiddler官网下载并安装 2.打开switchhosts,添加要切换的环境(ip地址) 3.打开fiddler,一定要能抓https包 4.查找本地IP地址,cmd ...