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. 第五节：DataFrame聚合函数

  2. 腾讯云，搭建LNMP环境

    LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构. Linux是一类Unix计算机操作系统的统称,是目前最流行的免费操作系统.代表版本有:debian.centos ...

  3. CodeForcesGym 100735D Triangle Formation

    Triangle Formation Time Limit: Unknown ms Memory Limit: 65536KB This problem will be judged on CodeF ...

  4. HDU - 3556 - Continued Fraction

    先上题目: Continued Fraction Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Jav ...

  5. mysql grant 用户权限总结

    https://blog.csdn.net/anzhen0429/article/details/78296814

  6. C++ primer chapter 13

    拷贝 赋值 销毁 拷贝构造函数 如果一个构造函数第一个参数是自身的引用,而且任何额外参数都有默认值,则此构造函数是拷贝构造函数拷贝构造函数的第一个类型必须是引用:如果参数不是引用类型,那么调用不会成功 ...

  7. [转]十五天精通WCF——第十天 学会用SvcConfigEditor来简化配置

    我们在玩wcf项目的时候,都是自己手工编写system.serviceModel下面的配置,虽然在webconfig中做wcf的服务配置的时候,vs提供大多 数的代码提示,但对于不太熟悉服务配置的小鸟 ...

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

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

  9. Spring cloud config配置文件加密解密

    Spring cloud config配置文件加密解密 学习了:http://blog.csdn.net/u010475041/article/details/78110349 学习了:<Spr ...

  10. Linux 大规模请求server连接数相关设置

    一般一个大规模Linuxserver请求数可能是几十万上百万的情况.须要足够的连接数来使用,所以务必进行对应的设置. 默认的Linuxserver文件描写叙述符等打开最大是1024.用ulimit - ...