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. java堆排序实现

    代码如下: public class HeapSort { public static void heapSort(DataWrap[] data) { System.out.println(&quo ...

  2. 3.git高级篇总结

    阅读 Git 原理详解及实用指南 记录 高级 1:不喜欢merge的分叉,用rebase吧 介绍的是 rebase 指令,它可以改变 commit 序列的基础点.它的使用方式很简单: git reba ...

  3. Marshal.ReleaseComObject() vs. Marshal.FinalReleaseComObject()

    很简单,不翻译了. If you are using COM components on your .NET code, you might be already aware of the Marsh ...

  4. 【Mail.Ru Cup 2018 Round 2 A】 Metro

    [链接] 我是链接,点我呀:) [题意] [题解] 1:一直往右走的情况. 2:中间某个地方中转 (不会出现超过1次的转弯. (如果超过了和1次是等价的 [代码] #include <bits/ ...

  5. Ajax 请求之_请求类型详解

    $.ajax({ url: "规定发送请求的 URL.默认是当前页面.", type: "post", // 请求类型,默认get // 在回调函数中,无需将j ...

  6. [hdu2222] [AC自动机模板] Keywords Search [AC自动机]

    AC自动机模板,注意!ch,Fail,lab数组的大小不是n而是节点个数,需要认真计算! #include <iostream> #include <algorithm> #i ...

  7. H3C交换机经常使用命令汇总

    H3C交换机经常使用命令 1.查看Linux下查看port状态 root@root:~# netstat -an|grep -E "6002|6003" 2.H3C交换机显示当前配 ...

  8. Python内置的字符串处理函数

    生成字符串变量 str='python String function'   字符串长度获取:len(str) 例:print '%s length=%d' % (str,len(str)) 连接字符 ...

  9. 【iOS】代理传值与块代码传值

    主线程与子线程常常须要进行数据的传递.不同的类之间,不同的控制器之间都须要. 并且常常须要监听一个动作的完毕.而后才去做对应事件. (代理是一对一的关系). 一.代理传值 代理是一种设计模式. iOS ...

  10. SetWindowPos函数详解

    //声明:SetWindowPos(hWnd: HWND; {窗口句柄}hWndInsertAfter: HWND; {窗口的 Z 顺序}X, Y: Integer; {位置}cx, cy: Inte ...