拓展简单笔记

系列链接

HTML简单笔记

CSS简单笔记

JavaScript简单笔记

jQuery简单笔记

拓展简单笔记

盒子模型

一 理解概念

• 一对标签就是一个盒子

二 属性

1. 边框

   • border-color`

     属性	说明	示例
     border-top-color	上边框颜色	border-top-color:#369;
     border-right-color	右边框颜色	border-right-color:#369;
     border-bottom-color	下边框	border-bottom-color:#369;
     border-left-color	左边框颜色	border-left-color:#369;
     border-color	四个边框同一色	border-color:#369;
     	上下#369 左右#000	border-color:#369 #000;
     	上#369 左右#000 下#f00	border-color:#369 #000 #f00;
     	上#369 右#000 下#f00 左#00f	border-color:#369 #000 #f00 #00f

   • border-width 同理 从上开始顺时针转 1px thin medium thick

   • border-style 同理 同理 double solid dotted none hidden dashed

   • border:1px red solid; 也可结合四边来写 如 : border-top

2. 边距

   1. 外边距 px

      • margin 可以: 1px , 2px 3px , 4px 5px 6px , 7px 8px 9px 10px
      • margin-top
      • margin-right
      • margin-bottom
      • margin-left

      妙用: 网页居中对齐 margin:0px auto; 网页1024X768比较合适 小于1000

   2. 内边距 padding 同上

标准文档流

1. 块级元素
   • div p ul li等
   • 一个标签独占一行
   • display:inline; 变行级元素
2. 行级元素
   • span a img 等
   • 一行从左往右一次摆放
   • display:block; 变块级元素
3. display:none; 可以不显示 看不见摸不着 但在

div布局

1. 浮动: 元素浮动以后,会脱离标准流,后面的元素抢占属于该元素的位置
   • float:left;
2. 定位: position:static; 相对定位: relative 可加偏移量(相对标准流) top:50px;left:50px;
   • static : 默认值,标准布局,不要使用偏移量
   • relative : 相对定位,没有偏移量就是标准流的位置,有则相对标准流发生偏移,偏移以后不会脱离标准流
   • absolute : 绝对定位 有偏移量 相对父级标签偏远 父级标签没有定位属性则找父级的父级 直到找到或最终相对浏览器
   • fixed : 相对浏览器 瑟情广告记忆