盒子模型
width
height
padding
border
margin
宽度∶
width:长度值│百分比|auto
最大宽度﹔
max-width:长度值│百分比|auto
最小宽度∶
min-width:长度值│百分比| auto
说明∶设置块级元素和替换元素的内容宽度
ie6不支持最大最小宽度/高度
块级标签占一整行,充满背景颜色,可以设置宽高
高度:
height:长度值│百分比|auto
最大高度:
max-height:长度值│百分比|auto
最小高度:
min-height:长度值|百分比| auto
说明∶设置块级元素和替换元素的内容高度
边框属性:
边框宽度border-width
边框颜色border-color
边框样式border-style
border-width:thin | medium | thick |长度值
border-color: 颜色|transparent
设置border-style,border-color,border-widht边框的四个方向样式一样
缩写:
border:宽度 样式 颜色
border-left:宽度 样式 颜色
.one{
border: 10px #e899ee solid;}
.two{
border-top:5px red solid;
border-Left:1epx blue dotted;
border-right:1epx blue dotted;
border-bottom :5px red solid;
}
内边距属性值不能为负值
盒子在网页中占的空间,不单单与width和height属性有关,还与padding有关。
.one{
width:300px;height:308px;background-color: #acacac;padding : 20px 10px 10px;}
.content{
width:100%;height:100%;background-color:#ececec;}
外边距
margin的缩写和padding一样类似
默认情况下,相应的html块级元素存在外边距,body默认8px
通常覆盖默认样式
body,h1,h2,h3,h4,h5,h6,p{
margin:0;}
外边距值为auto,实现水平方向居中显示效果
由浏览器计算外边距
margin塌陷
标准盒子宽度和高度计算:
除了标准的,还有IE盒子
那网页到底选哪个呢?
其实有doctype文档类型声明则用标准,否则浏览器自己选
HTML元素分类:
块级元素,独占一行
p div h1~h6 ul li ol dl dt dd等
行内元素(内联元素),则一行依次显示
span a em 等
行内元素不具有宽高属性设置
还有特殊的img 是inline-block行内块元素,呈现为inline,但具有block相应特性
display:none则不会显示
那可不可以通过设置把块级设置成行内元素呢,答案是肯定的。
可以用display属性来设置
<head>
.one{font-size:Opx;}
div{dispLay:inline;
font-size:16px;}
</head>
<div class="one">
<div>display </div>
<div>display </div>
<div>display </div>
</div>
对于行内元素之间有空隙除了可以删除换行来解决外,还可以通过上面设置相应css属性来实现
总结
NEXT:
float浮动!
每日一单词:
prevalent/fashionable 替换 popular