3.1 盒子模型
边距控制
margin/padding:上 右 下 左；
 
padding:内容和边距之间的空间
margin：”盒子“外撑开的空间，两个相邻标签外边距会出现重叠和累加的现象，呈现出来的效果将是：对于垂直相邻的标签而言90+10=90，水平相邻的标签而言：90+10=100
 
 
四个值缺少某一个，使用对边的值
 
每个盒子的属性也分三种粒度，到底选哪个粒度的属性，要看你想要选择的边，以及到那条边的哪个属性
 
border\border-left-width\border-right;
 
盒子边框
边框（border） 有三个相关属性：
border-width:
border-style: 有none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等文本值
border-color:
 
一、 没有width的元素始终会将宽度扩展填满其父元素为止。添加水平边框、内外边距，会导致内容宽度减少，减少量等于边框+边距
 二、 设定了宽度的盒子添加边框、边距，会导致盒子扩展得更宽，实际上盒子的width属性只是设置了盒子内容区的宽度，而非盒子要占据的水平宽度
 
box-sizing:（新特性）可以将盒子的行为设置成默认auto宽度的状态
 
浮动与清除
 
 
float：
clear：
 
  • 为父元素应用 overflow:hidden
  • 浮动父元素
  • 在父元素的末尾添加非浮动元素，可以直接在标记中加，亦可以通过给父元素加clearfix类来加（需要一个clearfix的样式规则）
 
.class:after{
clear:both;
}
//避免添加多余的文档结构
 
 
定位：
css中position包含3个值：static 、relative、absolute、fixed 默认值是static。
 
相对定位
 
position:relative
之后可以使用top、left来改变其位置
 
这里的相对定位是指DOM节点相对于正常的定位而言的，即原始位置为该节点在文档流里面应该正常渲染所在的位置
 
绝对定位
 
绝对定位会将文档彻底从文档流中拿出来。
使用 absolute 来作为绝对定位的标识，top，left都指定的是相对页面左上角的位置偏移量，而不是在文档流中偏移。定位的导航
 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{ margin:0; padding:0;}

		div{background:#ccc;}

		.absolute-test{position:absolute; top:100px; left:100px;}

		.absolute-test h1{background:#333; color:orange;}

		body{margin-top: 30px  !important;}

	</style>

</head>

<body>

	<div>this is static position</div>

	<div class="absolute-test"><h1>I'm absulote</h1></div>

	<div>this is static position</div>

</body>

</html>

 >>bottom=0就是页脚了 ^。^

 
固定定位
 
从完全移除文档刘的角度说，固定定位和绝对定位类似。
但是 fixed 不同的地方在于，固定定位是定位元素相对视口（浏览器窗口或手持设备的屏幕），因此他不会随一面滚动而移动随视窗滚动的导航、插件、搜索等
 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{ margin:0; padding:0;}

		div{background:#ccc;}

		.absolute-test{position:fixed; top:0px; left:100px;}

		.absolute-test h1{background:#333; color:orange;}

		body{margin-top: 30px  !important;}

	</style>

</head>

<body>

	<div>this is static position</div>

	<div class="absolute-test"><h1>I'm absulote</h1></div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

	<div>this is static position</div>

</body>

</html>

　　>>对了，这个东西拿来做导航很不错^。^...

 
定位上下文
如果父标签为relative，子标签的absolute将以父标签为标准定位；
第一个代码body加上relative就是下面的效果
 
3.2 显示属性
元素的display属性尽管很多，但是大多数元素display属性默认不是block，就是inline。
 
块级元素，段落、标题等，在浏览器中上下堆叠显示。
行内元素，比如a、span和img，在浏览器中左右并排显示，只有前一行没有空间时才会显示到下一行。
 
使用：display:inline(or)block;可以将块级元素和行内元素相互切换。
 
display：none；元素的空间被回收，页面也不显示。
visibility:hidden; 元素不显示，但是占据空间；

WEB笔记-3、盒子模型+定位+显示的更多相关文章

  1. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  2. CSS之选择符、链接、盒子模型、显示隐藏元素

    <html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...

  3. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  4. WEB入门.六 盒子模型

    学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...

  5. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  6. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  7. css标签样式 边框 盒子模型 定位 溢出 z-index 透明度

    目录 一.CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色(3种表示方法) 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换 二.盒子模型 ...

  8. CSS学习笔记：盒子模型

    盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each ...

  9. CSS 小结笔记之盒子模型

    网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签 ...

随机推荐

  1. bupt summer training for 16 #5 ——数据结构

    https://vjudge.net/contest/173780 A.假设 Pt = i,则由Ppi = i得 Ppt = t = Pi 所以就有 if Pt = i then Pi = t #in ...

  2. Ubuntu镜像包版本差异

    自接触Linux以来,一直使用ubuntu,下载ubuntu镜像的过程中,一个问题一直困扰我--desktop版镜像和server版镜像究竟有什么区别?难道就GUI有无的区别? 今天尝试解答这个问题. ...

  3. oracle导入少量数据（少于10M）

    工具用PL/SQL Developer select * from temp1 for update;开锁,点+号,直接从Excel复制,然后粘贴. 程序猿必读

  4. git游戏杂谈

    git作为一个知名小游戏,在被Linus开发出来后就广受好评,在程序员圈子内迅速传播,以至于现在很多程序员可以一日无饭,却不能一日无git.是什么能让各路程序员如此着迷?今天,让我们走进git,看一看 ...

  5. BlockQueue中ArrayBlockingQueue和LinkedBlockingQueue比较

    LinkedBlockingQueue是BlockingQueue的一种使用Link List的实现,它对头和尾(取和添加操作)采用两把不同的锁,相对于ArrayBlockingQueue提高了吞吐量 ...

  6. iOS: 将OC的NSMutableArray转为Swift的Array

    一句话: YourSwiftObject convertedArray = your_MutableArray as NSArray as [YourSwiftObject]

  7. Openfire：重新配置openfire

    有些时候当我们在对openfire开发时,需要重置openfire的配置,这时最简单的方法就是重新运行openfire的安装程序.要重新运行安装程序,方法很简单: 打开openfire的安装目录,找到 ...

  8. 极光推送案例-PushExample-Jpush

    ssh - maven - java项目-极光注冊id完毕推送 这是我学习时的步骤: 1:去极光推送平台注冊账号,自己能够去注冊(一般公司会帮助完毕注冊) 地址:https://www.jpush.c ...

  9. Windowns 无法启动 Office Software Protection Platform 服务，系统找不到指定的文件

    导致该服务无法启动的原因是,用kms8激活了win7后又用oem8激活试了下,结果就这样,然后就无法激活了,状态ID都不可用.试过禁用计划任务项目,重建MBR,重建PBR,都无效果.最后在这里找到了解 ...

  10. 学习笔记——WCF

    学了一下WCF,发现怎么跟Web Service这么像! 这个WCF究竟干嘛的? 一查,原来: "Windows Communication Foundation (WCF) 是由微软发展的 ...