*************************使用CSS+DIV布局*******************************
********************************盒模型*******************************
html中每一个元素(标签)都是一个盒子,遵循盒模型
盒模型宽度
1.内盒模型
不带边距的
2.外盒模型
算上边距
一般讨论的都是内盒模型的大小(即元素本身的大小),firefox右键查看元素显示的宽度、高度
为内盒模型的大小...
补白会继承内容的背景颜色
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示盒模型</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0px;
}
div.divClass1 {
width:100px;
height:100px;
padding:20px;
border:2px solid #000000;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="divClass1">
我是div1
</div>
</body>
</html>
********************************盒模型边距问题*******************************
如果给两个div同时都设置了边距,注意两个div的边距大小 不是边距之和
而是取边距比较大的那个
**********************块级元素)和行内元素的区别(div和span的区别)*****************
块级元素(Block Element)
行内元素(Inline Element),也叫内联元素
排列方式 宽、高、边距 默认宽度 典型代表
块级元素(div) 垂直排列 可调 和父容器一样宽 div、p、h1
行内元素 (span) 水平排列 宽、高不可调、边距(水平可调、垂直不可调) 和内部元素的宽度一样宽 span、a、label
如何区分一个元素是块级元素还是行内元素???
********************************块级元素和行内元素相互转换*******************************
使用display属性
1. 块级元素------------>行内元素
display:inline;
转成行内元素以后 变成了行内元素的特征
2. 行内块
display:inline-block;
水平排列的块级元素
行内块有默认间隔 如果想去掉默认间隙,可以使用 负边距、去掉空白、加注释的方式,但是都比较麻烦、代码可读性差,
如果想让div水平排列 不推荐使用 行内块 应该使用浮动(稍后再说)
3.行内元素----->块级元素
display: block;
********************************overflow属性***********************************************
overflow
1.默认值是visible
可见的,文字如果多长,会溢出
2.hidden
隐藏的
3.scroll
加滚动条
不管内容超不超长 都加滚动条
4.auto
如果内容不超长 不加滚动条
超长 自动加滚动条
*******************************word-break**************************************
word-break
默认值是 normal 按照浏览器默认的 断句规则 显示