zoukankan      html  css  js  c++  java
  • css学习笔记一

    text-indent缩进。
    px像素,像素是相对单位。1em=1 * font-size=16px(默认是16px),会根据你的font-size大小变的。所以缩进用
    这个就比较好。
    text-indent:2em;

    1.行级元素,内联元素 inline
    feature:内容决定元素所占位置,不可以通过css改变宽高。
    span,strong,em,a,del

    2.块级元素 block
    feature:独占一行,可以通过css改变宽高。

    3.行级块元素 inline-block
    feature:内容决定大小,可以改宽高。
    img就是行级块元素,img如果只设置了width的话,它的height会同比例缩放的。



    行内元素和块级元素可以互相转换的。display:inline display:block display:inline-block


    标签选择器的作用,初始化标签,可以把标签自带的marign,padding,样式啥的都去掉。
    ul{
    list-style: none;
    margin: 0;
    padding: 0;
    }

    em{
    font-style: normal;
    color: #e50000;
    }

    通配符选择器:权重为0
    *{
    margin: 0;
    padding: 0;
    }

    盒子模型:margin padding border content,很多浏览器的bod有默认的margin是8px


    定位:
    CSS的position属性用于指定元素的定位类型。默认值: static,静态定位的元素不能使用 top, right, bottom 和 left 属性进行定位。
    absolute绝对定位,脱离文档流,脱离原来位置进行定位,跑到上面那一
    层去了。
    relative相对定位,不脱离文档流,保留原来的位置进行定位。一般被作为参照物。
    fixed固定位置,脱离文档流。

    z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象),
    用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序,
    也就是说如果元素是没有定位的,对其设置的z-index会是无效的

    介绍一个元素居中的写法:背下来。
    div{
    position:absolute;
    100px;
    height: 100px;
    left: 50%;
    top: 50%;
    background-color: red;
    margin-left: -50px;
    margin-top: -50px;
    }


    margin合并和塌陷的问题:
    margin合并:
    兄弟结构水平方向的margin正常,但是垂直方向上面的margin会合并,
    并且这里的取到的是较大的一个,一般情况下,margin合并我们可以不处理,合理安排垂直方向的margin就能达到需求效果。

    margin塌陷
    父子结构的元素,垂直方向上的margin,会取最大那个



    BFC: block format context - 块级格式化上下文,每一个盒子当中都有一套正常的渲染规则,但是我们可以通过一些语法,
    来触发bfc,让这个盒子的渲染规则不一样! 就是这个渲染规则的改变,刚好就解决了margin塌陷的问题,下面是触发bfc的语法:
    position: absolute;
    display:inline-block;
    float:left / right
    overflow: hidden;


    float:left/right浮动元素产生了浮动流,
    所有产生了浮动流的元素,块级元素看不到他们,
    产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动
    元素。(让block元素无视float元素,让inline元素让流水一样围绕着float元素)

    sometimes the hardest part isn't letting go,but rather start over
  • 相关阅读:
    hdu 3333 树状数组+离线处理
    poj 2352 树状数组 OR Treap
    hdu 1698 线段树
    【概率dp】D. Card Collector
    【分段哈希】H. Paint the Wall
    【置换】G. Poker 2.0
    【概率dp】C. Race to 1 Again
    【dp】D. Caesar's Legions
    【并查集】F.find the most comfortable road
    【算法系列学习】连续邮资问题
  • 原文地址:https://www.cnblogs.com/zhumeiming/p/10351626.html
Copyright © 2011-2022 走看看