*************************使用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 ???按照浏览器默认的 断句规则 显示
CSS+DIV布局（一）
原文地址：https://www.cnblogs.com/MrTanJunCai/p/9907558.html