前端_day03_盒子模型,border,padding,margin

一,复合选择器

　　1,并列式复合选择器: div,p,a{ color:red; }

　　2,子代式复合选择器: div p{ color:red;}

二,盒子模型概念

　　1,边框:border

　　2,外边距:margin

　　3,内边距:padding

三,边框border

　　1,边框的设置:2px(宽度) solid(样式) red(颜色),可一并设置,也可分别设置

　　2,样式的种类:solid dotted dashed

　　3,按四个方向设置:border-left;border-top;border-right;border-bottom

　　4,圆角:border-radius:4px;

　　5,左右上下设置圆角:border-radius:10px 20px 30px 40px;

　　　左上角右下角 右上角左下角

　　　border-radius:10px 40px;

四,外边距margin

　　外边距是设置当前标签和它父级容器的距离

　　1,margin-left/top/right/bottom: 20px

　　2,margin:20px (上下左右)

　　3,margin:20px 40px; 上下20px 左右40px

　　4,margin:10px 20px 30px 40px (上 右 下 左)

　　5,外边距应用:块标签居中 margin: 0 auto;

五,内边距padding

　　1,padding设置自身内容和自身边框距离,写法同margin一样.

　　2,padding:20px 上下左右

　　3,padding-left/right/top/buttom

　　4,padding:20px 30px (上下20 左右30)