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. Memory+SLES 11/12 OS Tuning & Optimization

    https://www.suse.com/documentation/sles11/book_sle_tuning/data/sec_util_memory.html SLES 11/12 OS Tu ...

  2. [容斥原理] hdu 1796 How many integers can you find

    题意: 给一个N.然后给M个数,问1~N-1里面有多少个数能被这M个数中一个或多个数整除. 思路: 首先要N-- 然后对于每一个数M 事实上1~N-1内能被其整除的 就是有(N-1)/M[i]个 可是 ...

  3. CocoaAsyncSocket网络通信使用之数据编码和解码（二）

    CocoaAsyncSocket网络通信使用之数据编码和解码(二) 在上一篇CocoaAsyncSocket网络通信使用之tcp连接(一)中,我们已经利用CocoaAsyncSocket封装了自己的s ...

  4. XCode 7 高速切换代码窗体和文档窗体

    XCode 7 高速切换代码窗体和文档窗体 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  5. Centos 7 nginx-1.12.0　配置学习(一)

    [root@bogon nginx]# vim nginx.conf #user nobody; #运行用户 worker_processes ; #启动进程,通常设置成和cpu核心数相等 #全局错误 ...

  6. C#邮件发送(含附件)

    class SendEmail { static void Main(string[] args) { string from = "发件人@yingu.com"; string ...

  7. TCP传输工作原理

    引言 在TCP/IP体系结构中,IP协议只管将数据包尽力传送到目的主机,无论数据传输正确与否,它都不做验证,不发确认,也不保证数据包的顺序,因而不具有可靠性.这一问题要由传输层TCP协议来解决,TCP ...

  8. 【剑指offer】斐波那契序列与跳台阶

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25337983 剑指offer上的第9题,简单题,在九度OJ上測试通过. 主要注意下面几点: ...

  9. tflearn alexnet iter 10

    他会自己下载数据: # -*- coding: utf-8 -*- """ AlexNet. Applying 'Alexnet' to Oxford's 17 Cate ...

  10. Hadoop之父Doug Cutting：Lucene到Hadoop的开源之路

    Hadoop之父Doug Cutting:Lucene到Hadoop的开源之路 Doug Cutting,凭借自己对工作的热情和脚踏实地的态度,开创了Lucene和Nutch两个成功的开源搜索引擎项目 ...