• Python web前端 04 盒子模型


    Python web前端 04 盒子模型

      盒子模型是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的

    一、边框 border

    #border 边框
    div{border:10px soiled blue}#依次表示border-width(边框宽度)、border-style(类型)、border-color(颜色),这是符合写法
    
    #border-width
    #一个值的时候:表示四个方向一样,上右下左(顺时针);
    #两个值的时候:上下、右左
    #三个值的时候:上、右左、下
    #四个值的时候:上、右、下、左
    
    #当然也可以指定某条边的样式
    #border-top上(right右、bottom下、left左)-style类型(width宽度、color颜色)

    二、内边距 padding

    #padding表示内边距,即内容与边框的距离
    div{padding:30px;} #表示四个方向的值都一样
    
    #写1-4个值的规则跟border一样都是顺时针
    
    #特殊情况:span 左右有效果,上下没有效果

    三、外边距 margin

    #margin 外边距 元素与其他元素的距离(边框以外的距离)
    div{margin:20px}
    
    #1-4个值的时候跟border、padding一样都是顺时针
    
    #如果需要左右居中的是可以margin:auto
    
    #注意:垂直方向 margin-top(bottom)取的是两者之间的较大值
    #         水平方向 margin-right(left)取的是两者的和
    
    #解决内边距重叠的问题
    #当内嵌盒子与外部盒子内边距重叠的时候
    overflow:hidden.#给外盒子添加这句话就可以
    border:!px soiled red #这两种方法都可以解决这个问题,但是加了border的时候盒子的大小会变化

    四、盒子大小

    #盒子大小=样式宽+内边距+边框
    #盒子宽度=左右border + 左右padding + width
    #盒子高度=上下border + 上下padding + height

    五、浮动

    #浮动:使元素脱离文档流,按照指定(左右)方向发生位移,遇到父级边界或者相邻的浮动元素停下来
    #文档流:使文档中可显示对象所占用的位置/空间(在页面中占位置)
    #脱离文档流:在页面中不占位置
    
    #清除浮动:1、给父级增加高度(不推荐);2、给父级加overflow:hiddin;(推荐使用)3、给父级加一个类
    #类:.clearfix:after{content:"";display:block;clear:both;}
    
    #特点:如果只给前面的元素浮动,后面的要占据他的位置
    
    float:left(right)#左右浮动
    
    border-radius:50% #将内部元素变成了圆圈,这个便是快速圆角,也可以写px,1-4个值
    
    #浮动的用途:导航条

    六、定位 position

    #定位position
    #分为 静态定位static、相对定位relative、绝对定位absolute、固定定位fixed
    #静态定位:没有定位,默认
    #相对定位:相对于正常位置(原来没定位之前的位置)进行定位,还要占据位置
    #绝对定位:没有占据位置,是元素完全脱离文档流;
    #固定定位:相对于浏览器窗口进行定位
    
    #没有定位父级,则相对于整个文档发生偏移、参考最近非static定位的父级进行定位
    #方向词:top left bottom right 
    z-index #规定定位的层级(默认为0)
    #值:number值越打层级越高
    #相对定位
    position:relative;
    left:20px;
    top:25px;
    #绝对定位
    #如果有参照父级,如果父级有,就找父级,没有就继续往上面找
    
    #absolute一般跟相对一起用
    #固定定位
    #不管浏览器上下怎么滚,这一行必须一直出现,这就得的用到固定定位
    
    div{
      position:fixed;
      top:0;#既然用到了固定定位,那么就必须制指定位置
      left:100;      
    }
    #层级问题
    相同元素定位的话遇到重叠的情况会默认出先最后面的元素,如果想要某个元素,可以下z-index=1lai

     七、补充

      

    #若要实现页面样式没有的,鼠标移上去出现图标
    #例如ul 下的 li
    
    #在style里面在原来的样式里面写上:
    li{display:none}
    
    #在父级元素
    ul:hover li{ dispaly:bolck}
  • 相关阅读:
    Rabbitmq
    eclipse查看源码
    winSCP:无权访问
    jdk1.8.0环境变量设置
    【Linux】开放指定端口设置
    Redis (windows)安装
    [转]Windows8下设置VS默认启动方式为管理员启动
    [转]varchar(n),nvarchar(n) 长度、性能、及所占空间分析
    [转]Linq中GroupBy方法的使用总结
    [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
  • 原文地址:https://www.cnblogs.com/xuchengcheng1215/p/8660629.html
Copyright © 2020-2023  润新知