ASP.NET动态网站制作（3）--css（2）

前言：css分为四次课讲完，第一节课内容见ASP.NET动态网站制作（2）--css（1），接下来的内容会涉及到定位、浮动、盒子模型（第二次课）、css的具体应用（第三次课）、css3（第四次课）。今天的内容是关于css中定位、浮动以及盒子模型。

内容：CSS最核心的内容，围绕div标签展开。

　　1.做静态网页首先要考虑页面的布局，可用<div></div>来将网页分为不同的模块，就相当于盖房子一样。

　　2.<div></div>是一个块元素，与之相对应的还有行内元素。

　　  块元素的特点：（1）块元素默认显示在父标签的左上角；（2）块级元素默认占满一行（占满整个文档流）。常用的块级元素有：div，form，h1-h6，menu，ol，ul，table，p。

　　  行内元素（内联元素）特点：（1）行内元素大小受到文字区域影响，不受width和height属性影响；（2）行内元素不会单独占满一行。常见的行内元素有a，span，img，input，label。

　　  行内元素变为块级元素：display：block；块级元素变为行内元素：display:inline；还有一个display:inline-block，既有行内元素的特点，也有块元素的特点，即：高度、宽度会受影响，但不会单独占满一行。

　　3.浮动：float:left（第一个元素向左边靠，且第二个元素紧跟在第一个元素的后面，向左浮动），同理：float:right。设置浮动之后会对后面的元素造成影响，所以需要清除浮动的影响，使用：clear:left，clear:right，clear:both。

　　4.盒子模型：设置模型的边框、内间距、外间距，即盒子模型有三个元素：border，padding，margin。

　　  border用法：border:solid 2px #000；border-top:dashed 2px #FFF；

　　  padding用法： padding:10px;（表示上下左右内间距都是10px）

　　　　　　　　　　padding:10px 20px;（表示上下内间距为10px，左右内间距为20px）

　　　　　　　　　　padding:5px 10px 20px（表示上面的内间距为5px，左右内间距为10px，下面的内间距为20px）

　　　　　　　　　　padding:5px 10px 15px 20px（表示上面的内间距为5px、右面的内间距为10px、下面的内间距为15px、左面的内间距为20px）

　　　　　　　　　　也可单独设置：padding-top，padding-right，padding-bottom，padding-left

　　　　　　　　　　padding是将框撑大相应的距离，元素的尺寸会变大。padding对行内元素是支持的。

　　　margin用法：设置块和块之间的外间距，规律与padding相同。但是margin对于行内元素只支持左右外间距，不支持上下外边距。

　　5.定位：position:absolute（绝对定位）和position:relative（相对定位）及position:fixed（固定位置）。

　　  position:absolute：设置为绝对定位时，元素脱离文档流，不会单独占满一行，不会受到浮动的影响；元素的方位受到窗体的上下左右影响。

　　  position:relative：设置为相对定位时，元素没有脱离文档流，会受到浮动的影响；元素的方位是相对元素的父标签。

　　  position:fixed：设置固定位置，如QQ弹框。该设置是脱离文档流的。

 

后记：多多练习元素及属性的使用，在以后的应用中会用的比较多。

转载于:https://www.cnblogs.com/zoe-yan/p/4829308.html