2023年6月20日发(作者：)

CSS基础--盒⼦阴影、边框圆⾓h盒⼦阴影：box-shadow: ⽔平位置（必） 垂直位置（必） 模糊距离 阴影的尺⼨ 阴影颜⾊ 阴影的种类；阴影遮挡： 给上⼀个盒⼦ position：relative；z-index：1；圆 border-radius：50%；宽⾼相等 椭圆：border-radius：1/2 ⾼图⽚覆盖圆⾓ 在盒⼦⾥ overflow：hidden背景：abackground-repeat:repeat|no-repeat|repeat-x|repeat-y;background-position:left top|left bottom|right top|rigth bottom|center center|center bottom|center top|left center|rightcenter; 也可⽤百分⽐保持图⽚缩放时位置：background-size:cover;background-position:center centerbackground-size:contain;cover 覆盖整个盒⼦ contain 缩放⾄我整个在盒⼦⾥background-attachment:scroll|fixed;background: background-color background-image background-repeat background-attachment background-position/background-size;logo 弥补⽹页加载css失败的⽅案：table

和在css⾥写border：1px solid #000;的区别：css⾥写的时候单元格没有边框 在HTML⾥写则单元格有边框caption-side:top|bottom;标题的位置border-collapse：separation | collapse; collapse合并边框table-layout: automatic|fixed; 单元格布局⽅式，fixed单元格列宽度⼀致table tr td:nth-child(2){text-align:center;}table tr:nth-child(even){background-color:#eee}偶数⾏深⾊table tr:hover{background-color:#ddd}⿏标移颜⾊BFC：block formating contents普通流 normal flow浮动流 float绝对定位布局 absolute positioning 元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，⽽元素具体的位置由绝对定位的坐标决定。bodyfloat：left right position：absolute fixeddisplay：inline-block table-celloverflow:hidden auto scroll带以上属性就带有BFC属性1margin合并 2浮动流造成⽗元素塌陷问题 -- bfc属性可以解决前⾯的盒⼦撑开问题3margin造成的⾼度坍塌 ⼦元素带⽗元素⼀起往下 bfc属性可以解决所有设置float属性的元素都⾃动转成inline-block

4浮动覆盖问题css书写顺序显⽰属性：display，position，float，clear⾃⾝属性: width,height,margin,padding,border,background⽂本属性：color，font，text-align，vertical-align,whitespacefont-style font-weight font-size line-height font-family选择器符合单词 中横线JS钩⼦ID 符合单词 下划线选择器 ⼩写 尽可能英⽂尽量不⽤ bottom top left right 直观命名法 不利于维护

2023年6月20日发(作者：)

CSS基础--盒⼦阴影、边框圆⾓h盒⼦阴影：box-shadow: ⽔平位置（必） 垂直位置（必） 模糊距离 阴影的尺⼨ 阴影颜⾊ 阴影的种类；阴影遮挡： 给上⼀个盒⼦ position：relative；z-index：1；圆 border-radius：50%；宽⾼相等 椭圆：border-radius：1/2 ⾼图⽚覆盖圆⾓ 在盒⼦⾥ overflow：hidden背景：abackground-repeat:repeat|no-repeat|repeat-x|repeat-y;background-position:left top|left bottom|right top|rigth bottom|center center|center bottom|center top|left center|rightcenter; 也可⽤百分⽐保持图⽚缩放时位置：background-size:cover;background-position:center centerbackground-size:contain;cover 覆盖整个盒⼦ contain 缩放⾄我整个在盒⼦⾥background-attachment:scroll|fixed;background: background-color background-image background-repeat background-attachment background-position/background-size;logo 弥补⽹页加载css失败的⽅案：table

和在css⾥写border：1px solid #000;的区别：css⾥写的时候单元格没有边框 在HTML⾥写则单元格有边框caption-side:top|bottom;标题的位置border-collapse：separation | collapse; collapse合并边框table-layout: automatic|fixed; 单元格布局⽅式，fixed单元格列宽度⼀致table tr td:nth-child(2){text-align:center;}table tr:nth-child(even){background-color:#eee}偶数⾏深⾊table tr:hover{background-color:#ddd}⿏标移颜⾊BFC：block formating contents普通流 normal flow浮动流 float绝对定位布局 absolute positioning 元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，⽽元素具体的位置由绝对定位的坐标决定。bodyfloat：left right position：absolute fixeddisplay：inline-block table-celloverflow:hidden auto scroll带以上属性就带有BFC属性1margin合并 2浮动流造成⽗元素塌陷问题 -- bfc属性可以解决前⾯的盒⼦撑开问题3margin造成的⾼度坍塌 ⼦元素带⽗元素⼀起往下 bfc属性可以解决所有设置float属性的元素都⾃动转成inline-block

4浮动覆盖问题css书写顺序显⽰属性：display，position，float，clear⾃⾝属性: width,height,margin,padding,border,background⽂本属性：color，font，text-align，vertical-align,whitespacefont-style font-weight font-size line-height font-family选择器符合单词 中横线JS钩⼦ID 符合单词 下划线选择器 ⼩写 尽可能英⽂尽量不⽤ bottom top left right 直观命名法 不利于维护