0227CSSS学习

• 列表样式
  • list-style-type:none; 去除无序列表前的实心圆点；
• 浮动
  • 浮动常结合div无限嵌套进行网页布局；
  • float:left; 向左浮动；
  • float:right; 向右浮动；
  • 浮动元素会按指定方向浮动，直到碰到其它浮动元素和边框。若碰到非浮动的普通流，则会覆盖在这些元素之上。若要这些元素不被覆盖，需要用以下方式清除浮动。
  • 清除浮动：
    • clear:left right both;
    • 给浮动的父级元素固定高度；
    • 给浮动元素的父级添加overflow:hidden; 裁剪超出边框的内容；
• 盒模型：
  • 整个模型的范围=元素宽高+內边距+边框粗细+外边距
  • 外边距
    • margin-top;margin-bottom;margin-left;margin-right;分别定义元素的上边距，下边距，左边距和右边距。若四边边距一样，则可简写成margin.
    • margin:0 auto; 水平方向上的居中；
    • 四个值：margin:10px 20px 30px 40px;(上右下左)
    • 三个值：margin:10px 20px 30px（上10px 右20px 下30px 左20px）第四个缺少的左边距会参考右边距的设定；
    • 两个值：margin:10px 20px（上下为10px, 左右20px）
  • 內边距
    • padding-top:上內边距
    • padding-bottom:下內边距
    • padding-left:左內边距
    • padding-right:右內边距
    • padding:10px 20px 30px 40px ；(上右下左)
    • padding:10px 20px 30px; 第四值等于第二值
    • padding:10px 20px ;上下10 左右20
    • padding:10px 所有的值
      
  • 边框：
    • 颜色
      • border-left-color:
      • border-right-color:
      • border-top-color:
      • border-bottom-color:
    • 宽度
      • border-left-width:1px
      • border-right-width:
      • border-top-width:
      • border-bottom-width:
    • 样式
      • border-left-style:solid 细实线
      • double  双实线
      • dotted  点线
      • dashed  虚线
      
      
      
      
    • 简写：border:1px solid #aaa;
    • 去除边框：border-left:none
    • 圆角边框：border-radius:10px;  圆角的半径
    • 阴影box-shadow:10px 20px 30px 40px red inset;
      • 10px 在水平方向上的偏移量
      • 20px 在垂直方向上的偏移量
      • 30px 模糊程度
      • 40px 模糊尺寸（将阴影的水平，垂直尺寸扩充40px）
      • red  阴影的颜色
      • inset  内部阴影(不写时默认为外部阴影)
  • 不同元素之间会有默认自带的margin和padding,常常会影响页面的布局。所以尽量使用div和span布局，若要使用其他元素，为了避免自带的margin和padding的影响，可以同福哦”*{margin:0px; ub apadding:0px}”（不包括引号）