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. 一篇入门AngularJS

    目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...

  2. 10.mysql事务管理及python操作

    在用户操作MySQL过程中,对于一般简单的业务逻辑或中小型程序而言,无需考虑应用MySQL事务.但在比较复杂的情况下,往往用户在执行某些数据操作过程中,需要通过一组SQL语句执行多项并行业务逻辑或程序 ...

  3. 虚拟机win7 自动休眠

    1.问题描述:vmware 虚拟机,windows7系统.当一段时间不操作时,任务会休眠. 2.原因:win7系统自动休眠引起的. 3.解决方法:关闭win7系统的自动休眠. 依次打开“控制面板”-- ...

  4. Spring MVC-集成（Integration）-集成LOG4J示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_log4j.htm 说明:示例基于Spring MVC 4.1.6. 以下示例说明 ...

  5. SQLServer到底支持多少连接数的并发？

    1)不启用连接池 当创建到101个连接的时候,就无法再创建新连接了.也就是说,如果连接字符串不做任何处理,我们的程序只能够跟SQLServer建立101个连接. 2)启用连接池 在连接字符串中加入代码 ...

  6. CF #316 DIV2 D题

    D. Tree Requests time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  7. [CSS3] Make a horizontal-scrolling Menu

    Our web app on desktop may use elements that use great deal of width. On many occasions we can’t sim ...

  8. [Android]Fragment源代码分析(三) 事务

    Fragment管理中,不得不谈到的就是它的事务管理,它的事务管理写的很的出彩.我们先引入一个简单经常使用的Fragment事务管理代码片段: FragmentTransaction ft = thi ...

  9. Linux 服务的加入删除，自己主动执行及状态

    CAMS 在安装过程中会自己主动加入相关的服务.在安装的最后过程中会提示用户是否启动服务使服务生效,须要注意的是一个服务被加入后并不表示该服务在系统启动过程中会自己主动执行,仅表示能够使用servic ...

  10. iOS学习（3）

    4. 这个写法会出什么问题: @property (copy) NSMutableArray *array; 两个问题:1.加入,删除,改动数组内的元素的时候,程序会由于找不到相应的方法而崩溃.由于 ...