CSS学习（二）

div{width:200px;高度：200px；边框：1px纯红色；}div:first-child{/*结构伪类选择器选择siblings*/border-radius:10px;/*一个值表示四个角都是相同的10px弧度*/}div:nth-child(2){/*边框半径：100px；跨度和高度的一半会变成一个圆*/border-radius:50%;/*100px50%会变成一个圆*/}div:nth-child(3){border-radius:20px40px;/*左上角和右下角10px，右上角左下角40px对角线*/}div:nth-child(4){border-radius:20px40px80px;/*左上角20px，右上角，左下角40px，右下角80px对角线*/}div:nth-child(5){border-radius:10px20px40px80px;/*顺时针左上右上右上右下左下左*/}div:nth-child(6){border-radius:100px;高度：100px；}div:nth-child(7){border-radius:100px0;}CSS学习(二)一、CSS三大模型之盒模型一、盒模型每个矩形元素由元素的内容、内边距、边框、外边距组成Border：边框的粗细boxBorder，比如手机包装盒的厚度Padding：内容到border的距离，比如填充泡沫的厚度Padding：和其他盒子的距离Margin2。边框样式格式：border-style:solid;solidsinglesolidline使用最dasheddasheddotteddottedlinedoubledoubledoublesolidline3.border综合写法写法1：border-width:1px;边框颜色：粉色；边框样式：实心；推荐写法2：border:1pxsolidblue;:1px纯蓝色;更改上边框的属性4.表格细线边框border-collapse:collapse;合并相邻的边框，相邻的表格边框会以叠加的形式出现，比如1px+1px=2px，用这个方法合并，让边框的粗细一致，都是1px复习：cellspacing="0"去掉了表格中表格之间的内边距，cellpadding="0"5.圆角边框border-radius:apxbpxcpxdpx;1值表示4个角都是相同的10px弧度*2值左上角和右下角10px，右上角左下角40px，对角线3个值，1左上角1个值，右上角1个值，左下角1个值，右下角4个值表示左上、右上、右下、左下div{width:200px;高度：200px；边框：1px纯红色；}div:first-child{/*结构伪类选择器选择siblings*/border-radius:10px;/*一个值表示四个角都是相同的10px弧度*/}div:nth-child(2){/*边框半径：100px；跨度和高度的一半会变成一个圆*/border-radius:50%;/*100px50%会变成一个圆*/}div:nth-child(3){border-radius:20px40px;/*左上角和右下角10px，右上角左下角40px对角线*/}div:nth-child(4){border-radius:20px40px80px;/*左上角20px，右上角，左下角40px，右下角80px对角线*/}div:nth-child(5){border-radius:10px20px40px80px;/*顺时针左上右上右上右下左下左*/}div:nth-child(6){border-radius:100px;高度：100px；}div:nth-child(7){border-radius:100px0;}

6.内边距(padding)内边距是内容到边框的距离，值也是传4个值clockwiseClockwisetoprightbottomleftpadding写两个值upanddown10pxupanddown30pxaround30px3个值10px30px50pxup10around30down501valuesupanddownleftandrightdiv{width:200px;高度：200px；边框：1px纯红色；/*padding-top:20px;*//*padding-left:10px;*/padding:70px90px40px50px;/*4个valuesclockwiseuprightdownleft*//*padding写两个valuesup和down10pxupanddown10pxaround30px3values10px30px50pxup10around30down501valueupanddown都是一样的*/}

Innermargin就是内容到border的距离

7.outermarginmarginmargin-topboxdistancemargin-leftboxdistanceleftmarginmargin:30pxautoleftandrightautomatically这样可以让有width的块级框水平对齐居中。只有块级元素有效，其他元素无效。垂直居中：行高等于框高height:42px；框高line-height:42px;lineheight插入图片以改变大小width和height，插入的图片也是一个盒子，可以通过margin和padding改变位置boxmodelbackground图片background:#fffurl(picture/AndyLau3.jpg)30px50px背景图片的大小只能通过background-size来改变。背景图片的位置可以通过background-position改变8.清理内外边距margin:0;清除除了边距填充：0；clearinnermargin9.内联元素只有左右外边距，没有上下外边距，没有内边距。10.margin垂直合并：如果给上框的下边距20px(margin-bottom:20px;)，给下框的上边距10px(margin-top:10px;)，最后的margin会大的上下30px不会出现；嵌入合并：在父框内嵌入一个子框，如果想让子框相对于父框下移，使用margin-top20px；两个盒子会同时向下移动，达不到我们想要的效果解决方法：1.可以定义一个1像素的上边框（border:1pxsolidred）或者upperinnermargin（padding:1px;）父元素2.可以给父元素加上overflow:hidden;溢出隐藏。父亲{宽度：300px;高度：300px；背景色：粉色；/*border:1pxsolidredupperborder;/*解决合并外边距的问题*//*padding:1px;上内边距*/overflow:hidden;/*1可以为父元素定义一个1像素的顶部边框或顶部填充2可以添加overflow:hidden;*/}.son{高度：200px；宽度：200px；背景色：紫色；顶部边距：30px；}