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. 10.mysql事务管理及python操作

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

  2. vs2015 配置 cplex

    首先设置模式为Release, 根据软件选择x86或x64 附加库目录(链接器 - 常规) C:\Program Files\IBM\ILOG\CPLEX_Studio128\cplex\lib\x6 ...

  3. 利用Linux中的crontab实现分布式项目定时任务

    @Controller @RequestMapping("/task/topic") public class TopicQuartzController { protected ...

  4. log4net的相关使用笔记

    1, XmlConfigurator 创建添加一个Tracer project,引用nuget上最新的log4net 在Tracer里新增一个AppLog类: public static class ...

  5. 清北学堂模拟赛d2t3 逆序对(pair)

    题目描述LYK最近在研究逆序对.这个问题是这样的.一开始LYK有一个2^n长度的数组ai.LYK有Q次操作,每次操作都有一个参数k.表示每连续2^k长度作为一个小组.假设n=4,k=2,则a[1],a ...

  6. 选择客栈（codevs 1135）

    题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖啡店均 ...

  7. Blue Jeans POJ 3080 寻找多个串的最长相同子串

    Description The Genographic Project is a research partnership between IBM and The National Geographi ...

  8. HDU 4258(Covered Walkway-斜率优化)

    Covered Walkway Time Limit: 30000/10000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  9. crm使用soap启用和停用记录

    function demo() {     //操作记录的id     var targetId = "a8a46444-ba10-e411-8a04-00155d002f02"; ...

  10. jquery文件批量上传控件Uploadify3.2(java springMVC)

    人比較懒  有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分f ...