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. E - 不容易系列之(4)――考新郎 错排数公式

    国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做"考新郎",具体的操作是这样的:  首先,给每位新娘打扮得几乎一模一 ...

  2. 最小生成树 B - Networking

    You are assigned to design network connections between certain points in a wide area. You are given ...

  3. Ubuntu 16.04解决在虚拟终端（Ctrl+Alt+F1）下显示菱形中文乱码问题

    在安装Ubuntu时,如果默认选择了中文,那么以后进去到虚拟终端就会出现菱形的中文乱码. 其实这个是无解的,但是可以通过以下技巧去实现: 1.把系统转成英文的 sudo gedit /etc/defa ...

  4. 察看linux 发行版

    好像没有太通用的方法. 看一下/etc/redhat-release.  redhat 系列(包括centos) 会有如下内容 [root@localhost ~]# cat /etc/redhat- ...

  5. VS2017-NetCore项目整合Log4Net

    1新建NetCore项目,我这里NetCoreSDK版本是2.2.0. 2.进入NuGet程序包官网 : https://www.nuget.org,搜索以下两个包并安装到项目中. Microsoft ...

  6. Ubuntu13.10添加/删除PPA

    什么是ppa ppa即Personal Package Archive(个人安装包文档),简单来说就是一些个人或者团体通过独立的网站发布的第三方的软件源.将这些软件源添加到你的电脑上后,你就可以像使用 ...

  7. BeautifulSoup中各种html解析器的比較及使用

    Beautiful Soup解析器比較 ·Beautiful Soup支持各种html解析器.包含python自带的标准库.还有其它的很多第三方库模块. 当中一个就是lxml parser,至于lxm ...

  8. CoffeeScript里的or

    CoffeeScript里的or,其实会被编译为 || 这并没有什么令人惊奇之处.我惊讶的是类似这样一个表达式: word = null hi = word or "Hello World! ...

  9. 【Aladdin Unity3D Shader编程】之二 光照模型(一)

    光照模型 光照模型就是一个公式,使用这个公式来计算在某个点的光照效果. 在标准光照模型里面,我们把进入摄像机的光分为下面四个部分: 自发光 类似生活中的萤火虫等自己能够发光 高光反射 类似生活中的镜子 ...

  10. 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc【转】

    本文转载自:http://www.arm9home.net/read.php?tid-80810.html 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc   ...