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. 【驱动开发】file_operations ---linux 2.6.30

    路径: linux-2.6.30/include/linux/fs.h struct file_operations { struct module   *owner; loff_t         ...

  2. NYOJ2 括号配对问题

    括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在,有一行括号序列,请你检查这行括号是否配对.   输入 第一行输入一个数N(0<N<=1 ...

  3. cogs——1578. 次小生成树初级练习题

    1578. 次小生成树初级练习题 ☆   输入文件:mst2.in   输出文件:mst2.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 求严格次小生成树 [输入格式 ...

  4. Mybatis在Spring环境下的启动顺序

    主要看三个类: mybatis-spring-1.2.2.jar包 -> org.mybatis.spring.SqlSessionFactoryBean mybatis-3.2.6.jar包 ...

  5. excel 补全全部空格

    首先全选列或者选中某列,按F5键.再按"定位条件„"button,选择空值,这样就把全部列的空格选中了,然后直接输入"你想要替换的值",再按Ctrl + 回车

  6. zoj 1671 Walking Ant

    Walking Ant Time Limit: 2 Seconds      Memory Limit: 65536 KB Ants are quite diligent. They sometime ...

  7. java反射中getDeclaredMethods和getMethods的区别

    getDeclaredMethods()          返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...

  8. adb 命令模拟按键事件 【转】

    本文转载自:http://blog.sina.com.cn/s/blog_68f262210102vc1b.html 转自:http://blog.csdn.net/jlminghui/article ...

  9. java 提取主域名

    import com.google.common.net.InternetDomainName; public static void main(String[] args) { InternetDo ...

  10. 洛谷P3402 最长公共子序列

    题目背景 DJL为了避免成为一只咸鱼,来找Johann学习怎么求最长公共子序列. 题目描述 经过长时间的摸索和练习,DJL终于学会了怎么求LCS.Johann感觉DJL孺子可教,就给他布置了一个课后作 ...