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|right center; 也可用百分比

保持图片缩放时位置：background-size:cover;background-position:center center

background-size:contain;

cover   覆盖整个盒子   contain  缩放至我整个在盒子里

background-attachment:scroll|fixed;

background: background-color background-image background-repeat background-attachment background-position/background-size;

logo  弥补网页加载css失败的方案：

table

<table border=1></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    元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

body

float：left right           position：absolute fixed

display：inline-block    table-cell

overflow: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,whitespace

font-style font-weight font-size line-height  font-family

选择器符合单词  中横线

JS钩子ID   符合单词  下划线

选择器 小写   尽可能英文

尽量不用 bottom  top  left right 直观命名法  不利于维护

转载于:https://juejin.im/post/5b6f844851882561274deaec