超链接&盒子模型

• 超链接

• 1）使用超链接可以让我们从一个页面跳转到另一个页面
•                               关键字 ：<a herf="#">  超链接的字 </a> 标签
•                               属性：
•                                                 href：指向连接，即跳转到目标的地址，可以写一个相对路径，也可
•                                                           以是完整路径
•                                                 target:可以选择打开链接的位置
•                                                           1._self:表示在当前的网页中打开（默认值）
•                                                           2._blank：表示重新创建一个新的网页，在新的网页中打开
•                                                           3.可以设置也各内联框架的名字，点开后在内联框架中打开
•                            2）# ：在超链接不确定时，可以用 # 占位,并且可以回到顶部
•                                                 比如：<a href="#">
•                            3）唯一标识：
•                                                 关键字：id
•                                                 格式：在标签名后 加 id="xxx"  如： <a id="bottom"
•                                                 作用：可以给每一个标签增加一个唯一标识，id不能重复。
•                            4）#（id的值）：能跳转到id的地方
•                                                           比如：<a href="#id名">
•                            5) 形式：href="mailto:3416177992@qq.com"
•                                      发送电子邮件的超链接，点击连接后可以自动打开计算机中的默认邮件客
•                                       户端并且将邮件地址输入收件人的位置
•                    

---

• 盒子模型：

•                         1）设置盒子的边框
•                                                 - 三者缺一不可
•                                                          - border-width: 边框高度   ---> 可以指定四个边框
•                                                              （填四个数）：上 右 下 左，若指
•                                                                 定三个值：上 左右 下，若两个值：上下 左右
•                                                          - border-top-width: 也可以直接指定
•                                                          - border-left-width: 也可以直接指定
•                                                          - border-right-width: 也可以直接指定
•                                                          - border-bottom-width: 也可以直接指定
•                                                      - border-color: 边框颜色   ---> 可以指定四个边框（填四个数）：
•                                                       上 右 下 左，    若指定三个值：上 左右 下，   若两个值：上下
•                                                        左右
•                                                         - border-top-color: 也可以直接指定
•                                                          - border-left-color: 也可以直接指定
•                                                          - border-right-color: 也可以直接指定
•                                                          - border-bottom-color: 也可以直接指定
•                                                       - border-style: 边框样式   ---> 可以指定四个边框（填四个
•                                                         数）：上 右 下 左，    若指定三个值：上 左右 下，   若两个
•                                                                         值：上下 左右
•                                                                      - border-top-style: 也可以直接指定
•                                                                      - border-left-style: 也可以直接指定
•                                                                      - border-right-style: 也可以直接指定
•                                                                      - border-bottom-style: 也可以直接指定
•                                                                      可选值：
•                                                                                - none 空
•                                                                                - solid 实线
•                                                                                - dotted 点状
•                                                                                - dashed 虚线
•                                                                                - double 双线
•                                                                                           ...
•                                                 - 简写样式：boder
•                                                           - 没有顺序要求
•                                                           - 但是一指定就是四个边
•                                                           - 但是可以单独设置四个边的样式
•                                                           - boder-xxx：
•                                      2）设置盒子的内边距 padding
•                                                 - 一共有四个方向的边距
•                                                                      - padding-top
•                                                                      - padding-left
•                                                                      - padding-right
•                                                                      - padding-bottom
•                                                 - 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
•                                                 - 盒子可见框的宽度 = 边框 + 内容区 + 内边距
•                                                 - 简写：
•                                                           -padding 与 border 一样
•                           
•                                      3）盒子的外边距
•                                                 - 有四个方向
•                                                           - margin-top:
•                                                           - margin-right:
•                                                           - margin-left:
•                                                           - margin-bottom:
•                                                 - 指的是盒子与盒子之间的距离
•                                                 - 不会影响盒子的可见框的大小
•                                                 - 可以用来调整盒子的位置
•                                                 - 数值
•                                                           - 正值：向右移动
•                                                           - 负值：反方向移动
•                                                 - auto
•                                                           - 水平方向的设置
•                                                                      - 如果只将左或右设置为auto，则会最大值
•                                                                      - 如果只将左和右设置为auto，则会使盒子居中    
•                                                 - 外边距垂直重叠
•                                                           - 在网页中相邻的垂直方向的外边距会发生外边距重叠
• 就是相邻的兄弟元素之间的外边距会取最大值而不是去和如果父子元素的垂直外边距相邻了，则子元素的外边 距的设置会给父元素
•                                                                   
•                                                                     
•                                                           - 解决方法
•                                                                      为父元素（父盒子）增加一个内边距，把子元素向下
•                                                                    挤，并且将盒子的高度减去内边距的高度（因为内边距
•                                                                  会影响可见框的大小）
•                                                          - 简写
•                                                           - margin 与 padding 一样
•                                      4）清空浏览器的默认样式
•                                                 - *
•                                                           {
•                                                                      margin：0；
•                                                                      padding：0；
•                                                           }
•