2018-10-30
一、设置网页的兼容的问题
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
二、设置网页中乱码的问题
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
三、css控制元素的大小
1、盒模型的概念
每个元素都是由一个盒子组成：盒模型的大小主要是由内容区（width+height）+padding+border。
控制盒模型主要是由margin（外边框）、padding（内边框）、border（边框的粗细）、width（内容区的宽度）、height（内容的高度）。
2、块元素和行内元素
a、块元素：p换行 div盒子 ul li无序列表 form表单 h1-h6标题 table表格 dl自定义列表 ol有序列表。
属性：独占一行、可以通过css改变宽高。
b、行级元素：a 超链接 abbr 缩写 acronym 首字 b 粗体(不推荐) bdo -bidi override
big 大字体 br换行 cite引用 code -计算机代码(在引用源码的时候需要)
dfn 定义字段 em 强调 font字体设定(不推荐) i斜体 input输入框
kbd 定义键盘文本 label表格标签 q短引用 s中划线(不推荐) span
samp 定义范例计算机代码 select项目选择 small小字体文本
span - 常用内联容器，定义文本内区块 strike中划线 strong粗体强调
sub - 下标 sup上标 textarea多行文本输入框 tt电传文本 u下划线 var定义
属性：内容决定元素所占位置，不可以通过css改变宽高。
c、行级块元素：img
3、元素的宽、高度 重点
没有设置宽度或高度时网页内容决定宽和高。如果设置的宽度和高度，内容的宽度由设置决定，内容的高度超出设置的高度时，内容就会自动溢出。
最大宽度属性：max-width: 就是说宽度是有最大值，但是没有最小值。网页会实现自动换行。（不会出现右左的滚动条）
最小宽度属性：min-width:也就是说宽度有最小值，但是没有最大值。（当小于最小值值就会出现右左的滚动条）
最大高度属性：max-height：用来定义高度显示的最大值。当内容高度小于最大高度的时候，元素按照内容的高度显示。当内容高度超出最大高度时，保持最大高度不变，但内容显示出最大高度。
最小高度属性：min-height：用来定义高度显示的最小值。当内容高度小于最小高度的时候，元素显示最小高度属性定义的高度；当内容高度超出最小高度时，元素显示的高度和内容相同。
注意：最小、最大高度属性是以块级元素定义，不是对行级元素定义。行级元素是没有高度的。
<!DOCTYPE html>
<html>
<head>
<title>最大小宽度</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.max_w{
max-width:600px;
height:100px;
border:1px solid red;
}
.min_w{
min-width:500px;
height:100px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class="max_w">最大宽度属性：max-width: 就是说宽度是有最大值，但是没有最小值。网页会实现自动换行。（不会出现右左的滚动条）</div>
<div class="min_w">最小宽度属性：min-width:也就是说宽度有最小值，但是没有最大值。是整行显示。（当小于最小值值就会出现右左的滚动条）</div>
</body>
</html>
效果图：
<html>
<head>
<title>最大小高度</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.max_h1{
width:200px;
max-height:380px;
background-color:#ff4400;
}
.max_h2{
width:200px;
max-height:80px;
background-color:green;
}
.max_h3{
width:300px;
max-height:180px;
background-color:orange;
}
.min_h1{
width:300px;
min-height:80px;
background-color:#ff3300;
}
.min_h2{
width:300px;
min-height:180px;
background-color:#00ff00;
}
</style>
</head>
<body>
<div class="max_h1">1、最大高度属性：max-height：用来定义高度显示的最大值。当内容高度小于最大高度的时候，元素按照内容的高度显示。当内容高度超出最大高度时，保持最大高度不变，但内容显示出最大高度。</div>
<div class="max_h2">2、最大高度属性：max-height：用来定义高度显示的最大值。当内容高度小于最大高度的时候，元素按照内容的高度显示。当内容高度超出最大高度时，保持最大高度不变，但内容显示出最大高度。</div>
<div class="max_h3">3、最大高度属性：max-height：用来定义高度显示的最大值。当内容高度小于最大高度的时候，元素按照内容的高度显示。当内容高度超出最大高度时，保持最大高度不变，但内容显示出最大高度。</div>
<br/>
<div>一种：内容小于最大高度时，最大高度就是内容的高度。</div>
<div>二种：内容高于最大高度时，内容高出部分会显示在最大高度外。可能会和下一元素标签的内容重影。</div>
<br/>
<div class="min_h1">1、最小高度属性：min-height：用来定义高度显示的最小值。当内容高度小于最小高度的时候，元素显示最小高度属性定义的高度；当内容高度超出最小高度时，元素显示的高度和内容相同。</div><br/>
<div>一种：当内容高于最小高度时。最小的高度就自动变大，直到和内容一样的高度时，才做为最小的高度。</div>
<div class="min_h2">2、最小高度属性：min-height：用来定义高度显示的最小值。当内容高度小于最小高度的时候，元素显示最小高度属性定义的高度；当内容高度超出最小高度时，元素显示的高度和内容相同。</div>
<div>二种：当内容低于最小高度时，就取最小高度值做为高度。</div>
<div class="span">
注意：最小、最大高度属性是以块级元素定义，不是对行级元素定义。行级元素是没有高度的。</div>
</body>
</html>
效果图：
