DIV相关的技术
div它是一个html标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须结合CSS来使用。它主要用于页面的布局。
span它是一个html标签,一个内联元素(显示一行)。它单独使用没有任何意义,必须结合CSS来使用。它主要用于对括起来的内容进行样式的修饰。
CSS概述
CSS指层叠样式表(Cascading Style Sheets)
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一
CSS的作用
HTML:它是整个网站的骨架。
CSS:它是对整个网站骨架的内容进行美化(修饰)。
CSS如何使用
语法和规范
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
CSS的引入方式
css的引入方式分为三种
第一种:行内引入
<div style="color:red;font-size:100px;">
javaEE
</div>
第二种:内部引入
<style type="text/css">
div{
color:red;
font-size:100px;
}
</style>
第三种方式:外部引入
div{
color:red;
font-size:100px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
</html>
CSS的浮动
浮动的框可以向左或向右踢动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图,当把框1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
再请看下图,当框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图中消失。
如果把所有三个框都向左移动,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其他浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么他们向下移动时可能被其他浮动元素“卡住”:
盒子模型
盒子取值计算
我们在修改页面元素位置的时候,需要设定它相对于盒子的位置,那么我们有必要清楚关于盒子模型里面的取值相关问题。
在CSS中,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。而默认情况下,内边距、边框和外边距的值均为0.
占据页面大小的区域是整个元素框的总尺寸!默认情况,padding、margin、border均为0,假如我们设定了区域内容的width和height,那么此时整个元素框的总尺寸就是该区域内容的宽高了,此时,如果设定了margin值,那么整个元素框的总尺寸会发生变化(变大了),但是我们希望它的整体布局不发生变化!所以我们可以修改区域内容的尺寸(原有大小减去设定的margin值)。
附:图解说明盒子模型取值问题