DIV+CSS布局
2019-03-30 本文已影响345人
辽A丶孙悟空
一、div和span区别
- 块元素与内联元素区别
- 块元素又称块级元素（block element）和其对应的是内联元素（inline element），都是HTML规范中的概念。
- block元素的特点：
- 总是在新行上开始；
- 高度，行高以及外边距和内边距都可以控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度；
- 它可以容纳内联元素和其他块元素。
- inline内联元素的特点：
- 和其他元素都在一行上；
- 高，行高以及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变；
- 内联元素只能容纳文本或者其他内联元素。
- 块元素（block element）
- address：地址
- blockquote：块引用
- center：居中对齐块
- dir：目录列表
- div：常用块级容器，也是css layout的主要标签
- dl：定义列表
- fieldset - form：控制组
- form：交互表单
- h1：大标题
- h2：副标题
- h3：3级标题
- h4：4级标题
- h5：5级标题
- h6：6级标题
- hr：水平分割线
二、盒子模型介绍
- CSS的盒子模型
- 盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。
- 页面上的每一个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。
- 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。
- 盒子模型示意图
- 每个HTML元素都可以看做是一个装了东西的盒子。
- 盒子里面的内容到盒子的边框之间的举例即填充（padding），盒子本身有边框（border），而盒子边框和其他盒子之间，还有边界（margin），如图所示。
- 默认情况下盒子的边框是无，背景颜色是透明，所以我们在默认情况下看不到盒子。
- 现实生活中的盒子
三、盒子模型边距填充边框介绍
- 元素盒子大小的计算
一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
- 盒子模型的特征
- 边界值margin可为负，填充padding不可为负。
- 边框border默认值是0，即不显示。
- 行内元素，如a，定义上下界不影响行高。
- 边框是实的，我们可以看见实实在在的边框，而边界和填充都是虚的，我们只能看到他们对元素的影响。
- 盒子模型中只能设置两类颜色，即边框颜色和背景颜色。
- 盒子模型可以设置三类距离，即边界距离margin，填充距离padding和边框值border。
- 行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。
- 因此，不推荐对行内元素直接设置属性，一般先设置行内元素以块级显示，再设置它的盒子属性。
四、盒子模型属性和默认值编写
- 属性值的简写形式
- 方法是按照规定的顺序，给出2个、3个或者4个属性值，他们的含义有所区别，具体含义如下：
- 如果给出2个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性
- 如果给出3个属性值，前者表示上下边框的属性，后者表示左右边框的属性
- 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针的排序。
例如：h1{margin:10px 0px 15px 5px;}
- 边框border属性
- 盒子模型的margin和padding舒心比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。
- 分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、双线（double）等效果。
- 各种元素盒子属性的默认值
- 大部分HTML元素的盒子属性（margin，padding）的默认值都是0。
- 有少数HTML元素的（margin，padding）浏览器默认值不为0，例如body，p，ul，li，form标记等，因此我们有时有必要先设置他们的这些属性为0。
- input元素的边框属性默认值不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。
五、display属性和实例
- display属性
- 通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示。
- display：block|inline|none|list-item
- inline-block行内块元素。（CSS2.1新增的值）
- block元素
- block元素的特点：
- 总是在新行上显示
- 高度、行高以及顶和底边距都可控制
- 宽度缺省是它的容器的100%，除非用width设定一个宽度
- div、p、h1、form、ul、和li是块级元素的例子
- inline元素
- inline内联元素的特点：
- 和其他元素都在一行上
- 高，行高以及外边距和内边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变
- span、a、label、input、img、strong和em是inline元素的例子。
- 需要使用display属性切换的情况
- 让一个inline元素从新行开始
- 让块级元素和其他元素保持在同一行上
- 控制inline元素的宽度
- 控制inline元素的高度（对导航条特别有用）
- 无法设定宽度即可为一个块级元素设定与文字同宽度的背景颜色
- inline-block行内块元素
- inline-block属性值，即是行内元素，但又有块元素的属性
- 隐藏元素display：none
- 当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素不会被显示，也不会占用文档中的位置。像title元素默认就是此类型。
- 比较visibility：hidden
- 制作下拉菜单、tab面板等有时就需要用display：none把菜单或面板隐藏起来。
六、浮动与清除浮动
- 盒子的浮动
- 在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列的，如果仅仅按照标准流的方式进行排列，就只有这几种可能，限制太大。CSS的定制者也想到了这样排列的限制问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。
- 例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子的内容环绕（一个盒子浮动）做出图文混排的效果，这时最简单的方法就是运用浮动（float）属性使盒子在浮动方式下定位。
- 代码：未添加浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> .div1{ background-color: red; width: 50px; height: 50px; } .div2{ background-color: green; width: 50px; height: 50px; } .div3{ background-color: gold; width: 50px; height: 50px; } .div4{ background-color: black; width: 50px; height: 50px; } </style> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> </body> </html>
结果：
- 代码：添加浮动
.div1{ background-color: red; width: 50px; height: 50px; float: left; } .div2{ background-color: green; width: 50px; height: 50px; float: left; } .div3{ background-color: gold; width: 50px; height: 50px; float: left; } .div4{ background-color: black; width: 50px; height: 50px; float: left; }
结果：
- 浮动的清除
- clear是清除浮动的属性，它的取值有left、right、both、和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示盒子左边或者右边不允许有浮动的对象。设置值为both则表示两边都不允许有浮动现象，因此该盒子将会在浏览器中另起一行。
- 代码：清除div2的浮动
.div1{ background-color: red; width: 50px; height: 50px; float: left; } .div2{ background-color: green; width: 50px; height: 50px; float: left; clear: left; } .div3{ background-color: gold; width: 50px; height: 50px; float: left; } .div4{ background-color: black; width: 50px; height: 50px; float: left; }
结果：
- 盒子模型布局
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> .header{ width: 1000px; height: 100px; background-color: #b3d4fc; margin: auto; } .con{ width: 1000px; height: 50px; background-color: #c0c0c0; margin: auto; } .main{ width: 1000px; background-color: #c0c0c0; margin: auto; } .nav{ width: 200px; background-color: red; height: 500px; float: left; margin: 0px 10px; } .content{ width: 500px; background-color: green; height: 500px; float: left; margin: 0px 30px; } .side{ width: 200px; background-color: blue; height: 500px; float: left; margin: 0px 10px; } .footer{ width: 1000px; background-color: #ff00ff; height: 100px; margin: auto; float: left; } </style> </head> <body> <div class="header">顶部</div> <div class="con">菜单</div> <div class="main"> <div class="nav">内容1</div> <div class="content">内容2</div> <div class="side">内容3</div> <div class="footer"> 地址：XXXXXXXXX 电话：XXXXXXXXX </div> </div> </body> </html>
结果：
七、用CSS posistion属性来定位
- CSS定位
- CSS定位（posistion）属性允许你对元素进行定位。
- CSS定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
- CSSposistion属性
- 通过使用该属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。
- position属性值的含义：
- static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative元素框偏移某个距离。元素仍然保持其未定位前的形状，他原本所占用的空间仍保留。
- absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占用的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- fixed元素框的表现类似于position设置absolute，不过其包含块是视窗本身。
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> body{ border:1px red solid; } div{ width:140px; height:100px; } #ha{ border:1px red solid; background-color:red; position:absolute; top:40px; left:40px; z-index:5; } #hi{ border:2px green solid; background-color:green; position:absolute; top:80px; left:80px; z-index:7; } #xi{ border:3px orange solid; background-color:orange; position:absolute; top:140px; left:140px; z-index:3; } #img1{ width:400px; height:300px; } #img2{ position:absolute; top:100px; left:200px; } </style> </head> <body> <div id="ha">哈哈哈哈</div> <div id="hi">嘿嘿嘿嘿</div> <div id="xi">嘻嘻嘻嘻</div> <img src="img/大师兄1.png" id="img1"/> <img src="img/大师兄.jpg" id="img2"/> </body> </html>
结果：
