CSS盒子模型学习笔记.docVIP

1.盒子模型概要 2.CSS内边距 内边距在content外，边框内。主要属性有： padding: /*设置所有的内边距*/; padding-bottom: /*设置底部的内边距*/; padding-left: /*设置左边的内边距*/; padding-top: /*设置顶部的内边距*/; padding-right: /*设置右边的内边距*/; 这里借助表格进行展示 table tr td苹果/td td香蕉/td td柠檬/td /tr tr td橙子/td td柚子/td td葡萄/td /tr tr td火龙果/td td车厘子/td td猕猴桃/td /tr/table table,tr,td{ border: 1px solid red;/*设置边框样式颜色*/ border-collapse: collapse;/*设置边框折叠效果*/}td{ padding: 20px;/*如果四个内边距都是一样的，可以统一写*/ padding-left: 10px;/*如果不一样，则分别设定四个内边距*/ padding-right: 50px; padding-top: 30px; padding-bottom: 20px; padding: 2px 10px 50px 200px;/*这样也可以设置四个内边距，从前往后依次为上，右，下，左*/} CSS边框 （1）边框的样式：border-style定义了10种不同的非继承样式，包括none。 p{ border-style: double;//双线边框 border-style: solid;//实线边框 border-style: dashed;//短线边框 border-style: dotted;//点线边框 border-style: groove;//灰色实线边框 border-style: none;//没有边框 border-style: inset;//上左边框为实灰线，下右边框为淡灰线（不明显） border-style: outset;//和inset效果相反 border-style: ridge;//自己运行看看不就知道了。。。。。。 } （2）边框的单边样式：单边样式指对于上边框，下边框，左边框，右边框分别设定不同的样式，每一个都有很多种不同的样式值。 p{ border-bottom-style: ridge; border-top-style: outset; border-left-style: groove; border-right-style: double;} （3）边框的宽度：border-width:10px; （4）边框单边的宽度： border-top-width: 10px; border-left-width: 5px; border-right-width: 15px; border-bottom-width: 20px; （5）边框的颜色：border-color:red; （6）单边框的颜色： border-bottom-color:aqua; border-top-color:red; border-left-color:black; border-right-color: blue; （7）CSS3的新边框 background-color: aqua; border-style: ridge; border-width: 10px; border-color: blue; border-radius:10px ;//设置圆角边框的弧度 width: 100px; text-align: center; （8）设置CSS的阴影样式 #cssid { background-color: aqua; width: 100px; height: 100px; text-align: center; box-shadow: 10px 10px 5px blue;//设置阴影样式 } CSS外边距 外边距通常