zoukankan      html  css  js  c++  java
  • 06-盒模型/css

    #### css属性
      * 边框做三角形
        + transparent:透明属性
      ```css
      向下的三角形
      div{
        0;
        height:0;
        border-top: 20px solid red;
        border-right: 20px solid transparent;
        border-bottom:   20px solid transparent;
        border-left: 20px solid transparent;
      }
      ```
      * 鼠标样式 cursor
        + **pointer 手型**
        + help 帮助
        + not-allowed 禁止选择
        + wait 等待 
    #### 盒模型
      * 内容区 content 宽高生成内容区
      * 内填充 padding:数值+px
        + 值的设置
          - 1个值 padding:20px; 四周
          - 2个值 padding:10px 20px;上下 左右
          - 3个值 padding:10px 20px 30px; 上 左右 下
          - 4个值 padding:10px 20px 30px 40px; 上 右 下 左
        + 单独方向设置 padding-方向(left/top/bottom/right)
        + padding的特点
          - padding值的设置会把盒子撑大,如果不想被撑大,要在原来的宽高的基础上减去对应方向的padding值
          - 调整子元素(内容)在父元素(盒子)内的位置  
          - 背景色可以在padding区域进行显示
          - padding值不可以设置负数
      * 边框 border 边框也会撑大盒子
      * 外边距 margin:数值+px
        + 值的设置和padding一样
        + 单方向设置
        + margin的特点
          - 不会撑大显示的区域,但是会影响到别的盒子
          - 
          背景色不在margin区域进行显示
          - margin可以设置负数
          - margin在边框的外面显示
          - 用来调整盒子到盒子之间的距离
          - margin:0 auto; 上下 左右 左右根据浏览器窗口的宽度去掉当前盒子的宽度后,左右两边平均分配
        + margin值设置的bug
          - 在一个盒子里面,当对该盒子的第一个子元素设置**margin-top**的上边距的时候,会错误的加载父元素的身上,叫做**margin的传递**
            1. 给父元素添加边框 透明的边框 
            2. **给父元素添加 overflow:hidden; 溢出隐藏**
            3. 给父元素或者该元素添加浮动
          - 给上面的盒子添加下边距,下面的盒子添加上边距的时候,会产生上下边距的重叠,取最大值显示间距
            1. 设置一个方向的间距  
  • 相关阅读:
    HTML和CSS
    springcloud中配置多数据源
    洛谷 P3800 Power收集(单调队列优化dp)
    洛谷 P2569 [SCOI2010]股票交易(单调队列优化dp)
    洛谷 P3957 [NOIP2017 普及组] 跳房子(二分,单调队列优化dp)
    洛谷 P1419 寻找段落(01分数规划,实数二分,单调队列)
    Prometheus(普罗米修斯)和grafana监控的安装和使用
    AMC如何管理NPL
    linux 正则表达式与字符处理
    react-router-dom switch & match
  • 原文地址:https://www.cnblogs.com/qdbj2020/p/13438199.html
Copyright © 2011-2022 走看看