zoukankan      html  css  js  c++  java
  • CSS 基础深入理解

    box-sizing属性

    正常来说,我们在页面元素设置的高宽其实并不是真正想要的高宽,默认情况下,元素的宽度和高度计算如下:

    padding + border + width = 元素的实际宽度;padding + border + height = 元素的实际高度;这就意味着设置的元素通常看起来比您设置的大。看下图更好理解

     

    box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中:

    <!DOCTYPE html>
    <html>
     <head> 
      <style> 
    div.box1
    {
      width:50%;
      height: 100px;
      border:1em solid red;
      padding: 20px;
    }
    
    div.box2
    {
      box-sizing:border-box;
      -moz-box-sizing:border-box; /* Firefox */
      -webkit-box-sizing:border-box; /* Safari */
      width:50%;
      height: 100px;
      border:1em solid blue;
      padding: 20px;
    }
    </style> 
     </head> 
     <body> 
      <div class="container"> 
       <div class="box1">
        这个 div 宽度是50%,高度为200px
       </div> 
       <div class="box2">
        这个 div 也是宽度是50%,高度为200px
       </div> 
      </div>   
     </body>
    </html>

    一个元素居中的办法(不确定宽高的情况下如何用定位的办法实现)

    方法一:水平居中

    父层:text-align:center;
    子层:display:inline-block;

    方法二:水平垂直居中

    父层:display:table-cell;
             text-align:center;
             vertical-align:middle;
    子层:display:inline-block;
    父层:position: relative;
    子层:position:absolute;
         top:50%;
         left:50%; 
         transform:translate(-50%,-50%);

    已知高宽元素水平垂直居中:

    方法一:display:table和diaplay:table-cell

    <style>
    .container {
      display: table;
    }
    .inner {
      display: table-cell;
      vertical-align:middle;
      text-align:center;
    }
    </style>
    <div class="container">
      <div class="inner">
      you own content
      </div>
    </div>


    方法二:position:absolute、50%和translate

    <style>
    .container {
      position: relative;
    }
    .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    </style>
    <div class="container">
      <div class="inner">
        your own content
      </div>
    </div>

    方法三:vw vh和translate

    <style>
    .inner {
       position:fixed;
       top: 50vh;
       left: 50vw;
       transform: translate(-50%, -50%); 
    }
    </style>
    <div class="inner">
      this is a box fixed in center of screen
    </div>

    方法四::before和display:inline-block

    <style>
    .container{
        text-align: center;
    }
    .container:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .inner {
        display: inline-block;
    }
    </style>
    <div class="container">
        <div class="inner">
            this is a box fixed in center of screen<br>The second line
        </div>
    </div>

    方法五:css3 flex

    <style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    </style>
    <div class="container">
        <div class="inner">
            this is a box fixed in center of screen<br>The second line
        </div>
    </div>

     方法六:absolute + 四个方向的值相等

    .wrapper {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        position: relative;
    }
    .wrapper > p {
        width: 170px;
        height: 20px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    方法七:grid

    .wrapper {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        display: grid;
    }
    .wrapper > p {
        align-self: center;
        justify-self: center;
    }

    两列布局——左侧宽度固定,右侧宽度自适应的三种方法

    方法一:元素浮动

    .left {
        position: absolute;
        height: 100px;
        width: 300px;
        background-color: blue;
    }
    .right {
        height: 200px;
        margin-left: 300px;
        background-color: red;
    }

    方法二:BFC

    .left {
        float: left;
        height: 100px;
        width: 300px;
        background-color: blue;
    }
    .right {
        overflow: auto;
        height: 200px;
        background-color: red;
    }

    方法三: flex

    .left{
         width:200px;
        height: 300px;
        background: red
    }
    .right{
        flex: 1;
        height: 300px;
        background-color: blue;
    }

    用纯 CSS 创建一个三角形

    .triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px;
        border-color: red transparent transparent transparent;
    ; }

     

    用纯CSS创建一个等腰梯形

    .border-arrow {
      width: 256px;
      height: 256px;
      border: 64px solid ;
      border-color : red transparent transparent transparent ;
    }

     用纯CSS创建一个扇形

    .sector {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px;
        border-color: transparent transparent blue transparent;
        border-radius: 50%;
    }

      

    盒模型

    ·标准盒模型 border, padding, content, margin

    ·IE盒模型 border, padding, content

    ·通过 box-sizing属性改变元素的盒模型

    CSS选择符

    ·id选择器(#myId)

    ·类选择器(.myClassName)

    ·标签选择器(div, h1, p)

    ·后代选择器(h1 p)

    ·相邻后代选择器(子)选择器(ul > li)

    ·兄弟选择器(li~a)

    ·相邻兄弟选择器(li+a)

    ·属性选择器(a[rel="external"])

    ·伪类选择器(a:hover, li:nth-child)

    ·伪元素选择器(::before, ::after)

    ·通配符选择器(*)

    CSS3有哪些新特性

    ·新增各种CSS选择器(:not(.input) 所有class不是“input”的节点)

    ·圆角(border-radius: 4px;)

    ·多列布局(multi-columnlayout)

    ·阴影和反射(Shadow/Reflect)

    ·文字特效(text-shadow)

    ·文字渲染(Text-decoration)

    ·线性渐变(gradient)

    ·旋转(transform)

    ·缩放,定位,倾斜,动画,多背景

     伪类和伪元素的区别

    伪类和伪元素是一个比较容易混淆的概念,这不仅仅是从名称上,而且在写法上也是相似的(目前因为兼容性的问题,它们的写法是一致的),这就更容易混淆了。

    规范:

    css3 明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号 :: 来表示。

    区别:

    • 伪类更多的定义的是状态,如:hover,或者说是一个可以使用CSS进行修饰的特定的特殊元素,如:first-child
    • 伪类使用一个冒号:
    • 常见伪类:

      伪元素简单来说就是不存在于DOM文档树中的虚拟的元素,它们和HTML元素一样,但是你又无法使用JavaScript去获取,如:before
      • :hover
      • :active
      • :focus
      • :visited
      • :link
      • :lang
      • :first-child
      • :last-child
      • :not
    • 伪元素使用两个冒号::
    • 常见伪元素:

      • ::before
      • ::after
      • ::first-letter
      • ::first-line

    :target来实现折叠面板

    :target是文档的内部链接,即 URL 后面跟有锚名称 #,指向文档内某个具体的元素。

    利用 :target 的特性可以实现以前只能使用JavaScript实现的显示隐藏或者Collapse 折叠面板。

    <html>
     <head></head>
     <body>
      <div class="row" style="margin-top: 2rem;"> 
       <div class="t-collapse">
        <a class="collapse-target" href="#modal1">target 1</a> 
        <div class="collapse-body" id="modal1"> 
         <a class="collapse-close" href="#">target 1</a> 
         <p> 1 </p> 
        </div> 
       </div> 
       <div class="t-collapse">
        <a class="collapse-target" href="#modal2">target 2</a> 
        <div class="collapse-body" id="modal2"> 
         <a class="collapse-close" href="#">target 2</a> 
         <p> 2 </p> 
        </div> 
       </div> 
       <div class="t-collapse">
        <a class="collapse-target" href="#modal3">target 3</a> 
        <div class="collapse-body" id="modal3"> 
         <a class="collapse-close" href="#">target 3</a> 
         <p> 3</p> 
        </div> 
       </div> 
       <div class="t-collapse">
        <a class="collapse-target" href="#modal4">target 4</a> 
        <div class="collapse-body" id="modal4"> 
         <a class="collapse-close" href="#">target 4</a> 
         <p>4 </p> 
        </div> 
       </div> 
      </div>
     </body>
    </html>
    .collapse {
      >.collapse-body {
        display: none;
        &:target {
          display: block;
        }
      }
    }

      

      

    持续更新中……

  • 相关阅读:
    JAVA BigDecimal 小数点处理
    对 Element UI table中数据进行二次处理
    Kettle-User Defined Java Class使用-大写转换
    多线程-同步函数
    多线程-银行分批存款
    多线程-并发卖票
    多线程-控制两个线程交替打印
    ztree-可拖拽可编辑的树
    ztree-编辑节点(树节点添加,删除,修改)
    ztree-拖拽(排序树)
  • 原文地址:https://www.cnblogs.com/minjh/p/13496801.html
Copyright © 2011-2022 走看看