zoukankan      html  css  js  c++  java
  • CSS笔记

    一.水平居中

    行内 inline 元素: text-align:center;
    块级block元素 :margin:0 auto;
    absolute 定位元素: left:50%+margin-left 负值

    二.垂直居中:

    行内inline元素:line-height 的值等于 height的值

    absolute定位元素 :

    1.top:50%+margin-top 负值
    2.top:50%;left:50;+transform :translate(-50%,-50%)
    3.兼容性好 top:0;left:0;right:0;bottom:0; + margin:auto;

    三.relative 和 absolute定位
    relative 定位 相对于 自身 定位
    absolute 定位 相对于 最近的一层父级定位元素 定位

    定位元素:relative absolute fixed 或body

    四.flex布局
    容器的属性:
    1.项目排列方向flex-direction:row(默认值) | row-reverse | column | column-reverse;
    2.项目换行flex-wrap: nowrap(默认) | wrap | wrap-reverse;
    3.项目排列方向+项目换行flex-flow:<flex-direction> <flex-wrap>;
    4.项目的水平对齐方式justify-content:flex-start | flex-end | center | space-between | space-around;
    5.项目的占位一行垂直对齐方式align-items: flex-start | flex-end | center | baseline | stretch;
    6.项目的占位多行垂直对齐方式align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    项目的属性:
    1.项目的排序order:0(默认值)项目的排列顺序。数值越小,排列越靠前,默认为0
    2.项目的放大flex-grow:0(默认值)属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    3.项目的缩小flex-shrink:项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
    4项目的空间大小.flex-basis:auto(默认值)|<length>属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
    5.flex:[ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    6.单个项目对齐方式align-self:auto | flex-start | flex-end | center | baseline | stretch

    五.BFC

    Block formatting context 块级格式化上下文
    作用:形成独立的渲染区域
    内部元素的渲染不会影响外界
    形成BFC 常见的条件
    1.浮动元素 float 不是none
    2.绝对定位元素 position 是absolute或者fixed
    3.块级元素 overflow 不是visiable
    4.flex元素
    5.display:inline-block或者table-cell 元素
    应用场景

    1.解决浮动元素令父元素高度坍塌的问题,清除浮动,给父元素添加BFC条件
    2.解决布局自适应的问题

    未完待续

  • 相关阅读:
    高精度计算
    高精度除以低精度
    P1258 小车问题
    POJ 2352 stars (树状数组入门经典!!!)
    HDU 3635 Dragon Balls(超级经典的带权并查集!!!新手入门)
    HDU 3938 Portal (离线并查集,此题思路很强!!!,得到所谓的距离很巧妙)
    POJ 1703 Find them, Catch them(确定元素归属集合的并查集)
    HDU Virtual Friends(超级经典的带权并查集)
    HDU 3047 Zjnu Stadium(带权并查集,难想到)
    HDU 3038 How Many Answers Are Wrong(带权并查集,真的很难想到是个并查集!!!)
  • 原文地址:https://www.cnblogs.com/chandlerwong/p/14691903.html
Copyright © 2011-2022 走看看