第4章 盒子模型(1.5课时)

div

division分区,利用div对网页进行布局
盒子模型
最里层是content-padding-border-margin
padding-内边距 盒子内部填充
margin-外边距 盒子和另外的盒子之间的距离

可以单独设置上下左右的内边距和外边距,如果不写方向,就是所有方向都有起作用





Title



小技巧
margin: 0 auto; 可以实现水平居中
border-width:1px 2px 3px 4px; 上右下左
border-width:1px 2px 3px; 上 左右 下
border-width:1px 2px; 上下 左右

元素默认样式(了解)

**重置默认样式 **

/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
margin: 0;
font-size: 12px; 
/* 中文字体大小的最小值 */
}
ol,ul {
list-style: none; 
/* 去除列表样式 */
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}

元素分类:
三大类:行级inline 块级block 行块级inline-block
行级:默认在一行摆放,只有一行放不下的时候才折行 span a em i 不支持宽高,靠内容撑开宽高。

块级:默认独占一行 p div 支持宽高

行块级:兼有行级和块级元素的特点,他不独占一行,却可以为他设置宽高 img

我们可以用disply属性更改他的分类

display:none可以隐藏元素,我们可以通过none和其他值的切换控制元素显示还是隐藏

          
parent