• Day51 前端开发 浮动、定位 、js入门

    Day51 前端开发 浮动、定位 、js入门

    文章目录

    1、盒子模型

    所有的标签都可以看成是一个快递盒

    比喻实际名词
    两个快递盒之间的距离标签之间的距离外边距（margin）
    快递盒的厚度标签的边框边框（border）
    盒子内物体距离盒子内壁内部文本与边框的距离内边距（padding）
    物体自身的大小标签内部的内容内容

    需要掌握的操作

    margin-top: 20px; /*设置 上外边距为20px*/
margin-left: 100px;  /*设置 左外边距为100px*/
margin-right: 100px;   /*设置 右外边距为100px*/
margin-bottom: 100px;  /*设置 下外边距为100px*/

    • 1
    • 2
    • 3
    • 4

    body 标签自带8px的外边距

    margin:0; 简写形式 作用于上下 左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px 40px; 上右下左（顺时针）
margin 还可以让内部标签 居中显示
margin：100px auto 仅限于水平方向 居中

    • 1
    • 2
    • 3
    • 4
    • 5
    • padding 使用方式与margin一致

    2、浮动布局

    靠左 或靠右浮动：float:left\right

    浮动会造成 父标签塌陷 这是一个不好的现象 因为会引起歧义
    解决浮动造成的父标签塌陷

    .clearfix:after{
    content: '';  /*空文本*/
    display: block;  /*让其变成块儿级*/
    clear: both;  /* 让其左右两边不能有浮动元素*/
}

    • 1
    • 2
    • 3
    • 4
    • 5

    提前写好 上述的css操作 遇到标签塌陷就给标签添加clearfix类值 即可

    浏览器针对文本时优先展示的（浮动的元素如果遮挡会想办法展示）

    3、溢出属性

    overflow 属性值作用
    visible默认值，内容不会被修剪，会是呈现在元素框之外
    hidden内容会被修剪，并且其余内容是不可见的
    scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
    auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
    inherit规定从父元素继承 overflow 属性的值
    div {
    width: 50px;
    height: 50px;
    border: black 3px solid;
    overflow: auto; /*更好用的 滚动查看*/
}




    
  
    哈勒可汗发过拉横幅拉回来放回去了
    哈勒可汗发过拉横幅拉回来放回去了
    哈勒可汗发过拉横幅拉回来放回去了
  

    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    圆形头像的实现

    div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: black solid 2px;
    overflow: hidden;
}
div img {
    max-width: 110%;
}


    
  "788438d06ffb10e478ea837cf1598ca.jpg" alt="" >

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    4、定位

    static（静态）
    所有的标签默认都不能直接通过定位修改位置 必须切换成下面三种之一

    relative（相对定位）
    相对于标签原来的位置昨定位

    absolute（绝对定位）
    基于已经定位过的父标签左定位（如果没有父表则以body为参照）

    fixed（固定定位）
    相对于浏览器窗口做定位

    绝对定位用法