一.今日学习内容：CSS的盒子模型
概念：页面布局的时候我们要学习三大核心：盒子模型，浮动和定位。
盒子模型的组成：边框，外边距，内边距。
边框：border属性可以设置元素的边框，有三部分组成，宽度和样式，还有颜色。语法：border：border-width border-style border-color。 单独设置边框的部分样式：border-width设置边框的宽度，border-style设置边框的样式，border-color设置边框的颜色。常用的属性值：solid 实线边框，dotted点线边框，doshed虚线边框。单独设置一个边框颜色：broder-top-color；
边框会影响盒子的实际大小：解决放法：如果我们去页面上量盒子的时候需要width/height减去边框的宽度*2
给表格设置细线边框：border-collape：collapse；表示将相邻的边框整合在一起。
内边距（padding）：padding属性来设置内边距，就是边框和内容直接的距离。属性：padding-left左边内边距，padding-rignht右内边距，padding-top上内边距，padding-下内边距。如果要将padding简写：如果padding：后写一个值，代表上下左右都是一样的内边距；如果padding后面写俩个值，代表分别设置上下和左右内边距；如果设置三个值，就是分别代表设置上内边距左右内边距和下内边距；如果四个值，分别代表顺时针设置上右下左的内边距的值。
padding不会撑开盒子的情况：如果盒子指定宽度，就不会被padding撑开盒子，如果指定了就会被撑开；如果不想让padding撑开盒子，就将盒子的宽度和高度减去padding的值即可。
外边距（margin）：边距的简写，同上，把padding全部改为margin即可。
外边距的典型运用：margin：0 auto；给盒子水平居中，将块级盒子水平居中，条件：盒子必须有高度，将左右外边距设置为auto，如果让行内块元素水平居中，给父元素添加text-align；center即可进行水平居中。
外边距的合并：使用margin定义块元素的垂直外边距时，可能会出现外边距合并的问题。主要有俩种情况：相邻块元素的垂直外边距的合并，当上下相邻的来个块元素相遇时，如果上面的元素有外边距，下边的元素有外边距，则他们的外边距不是上外边距和下外边距的和，而是选择大的外边距进行设置，这种现象就是相邻元素的垂直外边距的合并；嵌套元素垂直外边距塌陷：如果俩个嵌套的盒子，父元素上右外边距，子元素也有外边距，此时父元素会塌陷较大的外边距值。解决塌陷方案：给父元素定上边框；给父元素定上内边距；给父元素添加overflow：hidden；属性。
清除内外边距：网页元素很多带有默认的内外边距，而且不同浏览器默认的也不同，所以在网页进行布局之前，可以线清除掉默认的内外边距*{margin；padding；}
CSS圆角边框
在CSS中使用border-radius属性来设置圆角边框
语法：border-radius：像素值/百分比。 border-radius是只圆的半径。
如果想要画一个正圆，就可以线设置一个正方形，然后将border-radius设置为高宽的一半或者50%。
如果相要设置四个角的圆角边框值不一致，
border-top-left做上角边框设置，border-top-right右上角边框设置；border-bottom-left左下角边框的设置，border-bottom-right右下角的边框的设置。
CSS的盒子阴影
在CSS中使用box-shadow属性来为盒子添加阴影。
相应的属性：
h-shadow必须值，水平阴影的位置，允许有负值。
v-shadow必须值，垂直阴影的位置，允许有负值。
blur可选模糊距离。
spread可选阴影的尺寸。
color 可选阴影颜色。
inset可选，外部阴影是outset，内部阴影是inset。
注意：
默认的阴影是外部阴影，但是不可以在box-shadow写这个单词，否则会造成阴影失效。
盒子阴影不占有空间，不影响其他盒子的排列。
|
