HTML5+CSS3学习笔记（三）

盒模型

css为网页中所有元素都设置了一个矩形的盒子，对页面的布局就是不同的盒子摆放在不同的位置

盒模型水平布局

满足等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素width
如果不满足就默认调整margin-right的宽度为auto
七个值中有三个值可以设置为auto，分别是margin-left，margin-right，width
如果将width设置为auto，一个margin有值，一个margin也为auto，则宽度将调整到最大
若设置width为auto，则元素将在宽度上填满父元素
若设置三个都为auto，则外边距都为0，元素宽度最大
若两个margin设置为auto，width固定值，则宽度会居中，外边距设置为相同的值

/*将元素设置居中*/
div{
width:200px
margin:0 auto   /*上下边距为0，左右相等*/
}

若超出了父元素宽度，则margin-left为负的，以使等式成立

盒模型垂直布局

默认情况下父元素高度被内容撑开（只被content撑开？）
子元素是在父元素内容区中排列的，如果子元素高度超过了父元素会溢出
使用overflow属性来设置父元素如何处理溢出的子元素，属性值：
        visible，默认值，可见
        hidden，超出的部分会被隐藏
        scroll，生成两个方向滚动条，滚动可完整显示
        auto，溢出则生成滚动条，根据需要
（还有overflow-x overflow-y)

垂直方向外边距折叠

兄弟元素：
        会取外边距较大的作为距离，特殊一正一负取和，相同符号取绝对值较大的
父子元素：
        父子元素的相邻外边距，子元素的会传递给父元素（上外边距）

行内元素的盒模型

1.行内元素不支持设置宽度和高度
2.可以设置padding、border、margin，但垂直方向上不影响布局

display

display用来设置元素显示的类型，可选值：
        inline，将元素设置为行内元素
        inline-block，将元素设置为行内块元素，既可以设置高度和宽度，又不会独占一行
        block，将元素设置为块元素
        table，将元素设置为表格
        none，隐藏元素，在文档流中消失
visibility用来设置元素的显示，可选值：
        visible，默认，可见
        hidden，不可见，不会脱离文档流

轮廓阴影和圆角

轮廓

outline 用来设置元素的轮廓线，用法和border一样，但不会影响布局

阴影

box-shadow 用来设置元素的阴影效果,阴影不会影响页面的布局

div1{
	box-shadow:10px 10px black
}
/*
     使用rgb值可以设置透明度
     第一个值水平偏移量
     第二个值垂直偏移量
     第三个值模糊半径
     第四个值阴影颜色
*/
div2{
	box-shadow:10px 10px 5px rgb(10,10,10,0.5)
}

圆角

boder-radius设置圆角
（50%是圆）