|
今日学习内容css的盒子模型 盒子模型的组成：边框、外边框和内边框 边框 边框宽度（border-width） 边框样式(border-style) solid实线边框 dotted点线边框 dashed虚线边框 边框颜色：颜色名，如red；十六进制；rgb； 混合语法：border:border-width border-style border-color; 注意：边框会影响盒子的实际大小，如果去页面量盒子大小时，需要用weidth/height减去边框的2倍 给表格设置细线边框：border-collapse:collapse,表示将相邻的边框合在一起 外边框 外边距（margin） 属性值 margin-left 设置左外边距 margin-right设置右内边距 margin-top设置上内边距 margin-bottom设置下内边距 margin的简写属性与padding相同 外边距的典型应用 盒子设置水平居中 块元素盒子水平居中：盒子要有宽度，将左右外边距设置为auto 行内元素盒子水平居中：给父级元素添加属性：text-align:center 外边距的合并问题：使用margin定义块元素的垂直外边距时，可能会出现外边距合并的问题。 相邻块元素的垂直外边距的合并：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，上面的元素有上外边距时，则他们的实际边距不是上外边距和下外边距之和，而是选择两个边距值中最大的来进行设置，这种现象就是相邻块元素的垂直外边距。 嵌套垂直外边距塌陷：如果两个嵌套的盒子中父元素有上外边距，子元素也有上外边距，此时父元素会有塌陷，其上外边距取最大的外边距值。 解决方案：1.给父元素定义上边框；2.给父元素定义上内边距；3.给父元素添加overflow:hidden属性 清除内外边距：网页元素有很多都带有默认的内外边距，而且不同浏览器默认不同，首先要将元素自带的内外边距清除，如*{margin:0;padding:0} 内边框 内边距（padding） 属性值 padding-left，左内边距 padding-right，右内边距 padding-top，上内边距 padding-bottom，下内边距 简写语法：padding:top right bottom left padding后写一个值时，为上下左右内边距都是这个值 padding后写两个个值时，分别代表上下和左右内边距的值 padding后写三个值时，分别为上内边距、右内边距和下内边距 padding后写四个值时，分别为上、右、下、左内边距（顺时针方向） padding不会撑开盒子：如果盒子没有指定宽度，就不会被padding撑开盒子，如果制定了就会被撑开；不想让padding撑开盒子时，将盒子的宽高减去padding的左右内边距和上下内边距 css的圆角边框 语法：border-radius:像素值 如果想画一个正圆，先设置一个正方形，然后将border-radius设为宽高的一半，或50% 如果想设置四个角的圆角边框不一致 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius border-radius是圆角圆的半径 CSS的盒子阴影 用box-shadow为盒子添加阴影 属性值： h-shadow为必须值，表示水平阴影的位置，允许有负值，向右为正 v-shadow为必须值，表示垂直阴影的位置，允许有负值，向下为正 blur，可选值，表示模糊的距离，值为像素值 spread，可选值，表示阴影的尺寸，值为像素值 color，可选值，表示阴影的颜色 inset，可选值，外部阴影为outset，内部阴影为inset 复合写法：box-shadow:h-shadow v-shadow blur spread color inset;一般outset为默认值，不写，一般只写inset。 注意：默认阴影为外部阴影outset，但是不可以在box-shadow属性中写，否则阴影失效。盒子阴影不占空间，不影响其他盒子的排列。
| 
