------
IE6以下版本不支持:max-width 和 min-width两个值。
---------------
<style type="text/css">
p{500px;}
#one{max-400px; min-200px;}
#two{max-800px; min-600px;}
</style>
<div>
<p id="one"></p> //显示为400px;
</div>
<div>
<p id="two"></p> //显示为600px;
</div>
==============================================
在IE6以下版本是不支持:max-height 和 min-height.
元素可以同时设置min-height属性与height属性
如果一个元素同时设置max-height和min-height属性, 并且max-height值小于min-height值,结果:显示min-height值
当一个元素同时设置 max-height和min-height,max-height值小于min-height值,最大高度自动转换成最小高度的值
===============
img标签是有它的src决定的,它指定的图片大小决定了,该标签的width和height。所以是替换元素。
input标签是由它的type=决定内容大小,所以是替换元素。
p 标签是由内容直接决定了它的width和height,所以是不可替换元素。即:width和weight不可手动更改。
span标签也是由内容直接决定了它的width和height,所以也是不可替换元素,即:width和weight不可手动更改。
border:5px solid red; (其实border: 宽度 颜色 样式)这样的顺序也可以。
border-bottom:1px dotted red; ///点线
border-top:5px double blue; ///双线
border-right:10px solid yellow; ///实线
border-top: 15px dashed blue; ///虚线
--------------------------------
-----
如果垂直方向上,两个相邻的元素都设置外边距,外边距会合并,合并后外边距的高度采用的是外边距最大的那个值;
=========
盒子模型分两种:IE盒子模型 标准盒子模型
盒子中内容的宽和高不会随着内边距、边框以及外边距的变化而变化。
div标签的内容宽度是多少?
div{
margin:20px 10px 20px;
border:1px solid red;
padding:20px 10px 20px;
300px;
height:300px;
}
答案是:300px;,就是文中设置的300px。因为盒子中内容的宽和高不会随着内边距、边框以及外边距的变化而变化。
===================
盒子的实际高度是:上边框+上内边距+内容高度+下内边距+下边框,margin设置的是盒子与盒子之间的距离。
div实际高度是多少?
div{
margin:10px 20px 30px 40px;
border:2px solid red;
300px;
heigth:300px;
padding:40px 30px 20px 10px;
}
2+40+300+20+2=364px;
答案是:364px。原因:盒子的实际高度是:上边框+上内边距+内容高度+下内边距+下边框,margin设置的是盒子与盒子之间的距离。
-------------------------
--------
这里是把div的属性display:inline;
行内没有宽高属性值。
使用调试工具查看盒子模型如下:
上图显示标签与标签之间没有设置margin属性,即外边框为0px;
但是标签之间还是有空格。为什么呢?怎么解决?
原因:因为我们在后台键入代码时标签与标签之间有换行,所以标签之间才有空格。如下图:
解决办法:全部把他们放在一行就解决该问题了。
-------------
第二种解决办法:
在这些标签之外添加一个父元素,在父元素上添加font-size:0px;,即:设置标签之间的空格为0px,不显示。
因为font-size属性是会继承的,所以必须在子元素中重新再设置font-size=16px;。
如下:把.one 设置一个字体属性:font-size:0px; 把.two的font-size:20px;,即可解决。
<div class="one">
<divclass="two">我是div</div>
<divclass="two">我是div</div>
<divclass="two">我是div</div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
========================
<style type="text/css">
.two{
display:inline; //设置为行内元素
200px; ///行内元素不具备宽和高
height:200px; ///行内元素不具备宽和高
margin:30px; ///行内元素的外边框只能设置左右边框,无法设置上下边框。
padding:15px; ///行内元素的内边框都可以设置。跟外边框不一样
}
</style>
<div class="two">我是div我是div我是div我是div我是div</div>
<div class="two">我是div我是div我是div我是div我是div</div>
<div class="two">我是div我是div我是div我是div我是div</div>
<div class="two">我是div我是div我是div我是div我是div</div>
<div class="two">我是div我是div我是div我是div我是div</div>
这是只设置margin:30px; 没有设置padding:显示如下:
这是设置margin:30px; 和 padding:15px; 显示如下
------------------------------------------------
display:inline-block;
这样就具有块级元素的属性:width,height,margin等。也具有行内元素的属性,一行排满换行。
-------------------------------------
span{display:none}
a:hover span{display:inline}
<a href="#">点我点我<span>我跑跑跑</span></a>
鼠标经过超链接,显示span标签,离开span标签消失。