zoukankan      html  css  js  c++  java
  • 日常使用css总结

    对于很多的css,日常经常使用到,但是面试的时候或者突然问起这个时候,就会忘记。刚好今天浏览了一个回答,我也给自己总结一下,以防忘记。

    参考链接地址:https://zhuanlan.zhihu.com/p/84212558?from_voters_page=true

    1、css水平居中:

    行内元素: text-align: center
    块级元素: margin: 0 auto
    绝对定位:{position:absolute, left:50%,  transform:translateX(-50%)}
    弹性布局:{display:flex, justify-content: center}
    

     css垂直居中:

    line-height:{height: 100px,  line-height: 100px }
    绝对定位:{position:absolute,  top:50%,  transform:translateY(-50%)}
    弹性布局:{ display:flex, align-items: center}
    栅格布局:{display:table,  display:table-cell, vertical-align: middle;}
    

    2、transform:

     该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    translate:平移   translateX():X轴方向平移  translateY():Y轴方向平移
    scale:缩放
    rotate:旋转
    skew: 倾斜旋转

    3、盒模型:主要区别就是宽度width的不同

    盒模型:content+padding+border+margin
    IE盒子模型: content+padding+border
    标准的盒子模型: width就是content

     可以通过 box-sizing来改变盒模型

     box-sizing: content-box 是W3C盒子模型
     box-sizing: border-box 是IE盒子模型
    

    4、清除浮动:

    1: .clear{ clear:both} 
    2: 父级添加 { overflow:hidden }
    3: 给父级添加伪类
    4: 使用双伪类

    5、css选择符有哪些

    1: id选择器(#myid);
    2: 类选择器(.myclassname);
    3: 标签选择器(div,h1,p);
    4: 相邻选择器(h1+p);
    5: 子选择器(ul>li);
    6: 后代选择器(li a);
    7: 通配符选择器(*);
     
    *   可继承的样式: font-size font-family color;
    *   不可继承的样式:border padding margin width height background-color;
  • 相关阅读:
    动态规划 01背包问题
    日常水题 蓝桥杯基础练习VIP-字符串对比
    本博客导航
    2019 ICPC 南昌 (C E G L)
    [模板]线段树
    [模板]手写双端队列(或普通队列)
    2019 ICPC Asia Yinchuan Regional (G, H)
    与超级源点与超级汇点相关的两题POJ 1062, HDU 4725
    [模板]链式向前星
    [总结]关于反向建图
  • 原文地址:https://www.cnblogs.com/liumcb/p/13323937.html
Copyright © 2011-2022 走看看