zoukankan      html  css  js  c++  java
  • 盒子属性

    弹性布局

    一个盒子,如果将其display属性设置为 flex ,该盒子变为弹性盒(弹性容器),该盒子的 所有子元素,自动变为弹性项目。弹性盒本身按照自身的定位体系排列,弹性布局影响的仅 仅是弹性盒中的弹性项目 。

    属性  :

    1.flex-direction :更改主轴方向  

    2.row  行 默认值

    3.row-reverse  反向 主轴从右向左

    4.column  列 按主轴从上往下排列

    5.column-reverse  按主轴从下往上

    6.justify-content  :更改主轴对其方式  

    7.flex-start  默认值 主轴起点一次排列

    8.flex-end  主轴终点对齐

    9.center  主轴中线对齐

    10.space-between  左右项目靠边,中间平均分布

    11.space-around  所有项目平均分布

    12.align-items:  更改侧轴对齐方式  

    13.stretch  默认值 拉伸

    14.flex-start  侧轴起点对齐

    15.flex-end  侧轴终点对齐

    16.center  侧轴中线对齐

    flex-wrap :   wrap (换行) nowrap (不换行)

    align-content   规则:弹性项目宽度自动时,表示适应内容的宽度和高度。margin为自动时,会吸收 弹性容器的剩余空间。

    项目属性  : order  更改弹性项目的排列顺序,顺序为从小到大进行排列 flex-shrink  更改弹性项目的压缩比例   1 默认 0 不压缩

    flex-grow : 更改弹性项目的增长比例   0 默认 不增长

    flex-basis : 弹性项目在压缩或增长前的基础宽度,若不设置,默认值为auto,表示 与width属性值相同

    速写  flex:grow shrink basis; 同时设置增长、压缩、基础值。

    水平居中方式

    1. 文字水平居中,设置文字所在元素的 text-aline:center;

    2. 常规流块盒水平居中,定宽,左右m argin 为 auto

    3. 将该盒子的父元素设置为弹性盒,同时设置 justify-content: center;

    4. 设置父元素为弹性盒,将需要居中的元素的左右 margin 设置为 auto 。

    垂直居中

    1. 文字在元素中垂直居中,设置行高为元素高度 。

    2. 盒子在包含块中垂直居中,设置父元素为弹性盒,其侧轴对齐方式为居中 align-items: center 。

    3. 设置父元素为弹性盒,将需要居中的元素上下 margin 设置为 auto 。

    水平居中(包含块中居中)

    1.定宽,左右margin为auto。(常规流块盒、弹性项目[不用定宽])

    2.弹性盒设置justify-content:center,让弹性项目在主轴上居中。(普遍适应)

    3.父元素设置text-align: center,让其内部的行盒、块盒居中。

    4.绝对定位元素,left:0; right:0; 定宽;左右margin: auto。 5.margin-left:50%;transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分比

    垂直居中

    1.单行文本垂直居中,设置父元素的line-height为包含块高度。

    2.弹性盒设置align-items:center,让弹性项目在侧轴上居中。

    3.绝对定位元素,top:0;bottom:0;定高;上下margin:auto。

    4.绝对定位元素,top:50%;transform:translateY(-50%)。

    5.绝对定位元素水平垂直居中

    left:50%;top:50%;transform:translate( -50%,-50%)

    行盒和块盒的区别

    1.行盒不可设置宽高,垂直方向上所有尺寸不占用空间,但水平方向上的margin、border、 padding可以。块盒所有尺寸有效。

    2.行盒会在合适位置被截断,而块盒不行。

    3.行盒只有常规流(浮动和绝对定位会强行将之转换为块盒),排列时,与其他行盒首尾相 接。块盒有多种定位体系,每种定位体系按照自身规则排列。

    4.行盒之间和行盒内部会空白折叠。块盒不会。

    伪类选择器

    1.:hover,鼠标悬浮时的效果

    2.:active,a/button元素激活(按钮)时的效果

    3.:link,a元素未访问过的样式

    4.:visited,a元素访问过的样式

    5.:checked,单元或多选被选中的样式

    6.:focus,表单元素聚焦的样式

    7.:firstchild,第一个子元素

    8.:lastchild,最后一个子元素

    9.:nthchild(2),第二个子元素

    10. :nthchild(2n)/:nthchild(even),第偶数个子元素

    11. :nthchild(odd),第奇数个子元素

    伪元素选择器

    1. ::before,在内部生成一个子元素,作为第一个子元素,然后选中它

    2. ::after,在内部生成一子元素,作为最后一个子元素,然后选中它

    3. :selection,选中被框选的文字

    后:IE5~IE7   前*:IE5~IE7   前_:IE5~IE6

    设置color属性,让非IE浏览器为绿色,IE5~IE6为红色,IE7为棕色,IE8~IE11为黑色   color:green;   color:black;   *color:brown;   _color:red;

    height的百分比相对于包含块的高度,其有效的前提条件是:包含块的高度是可计算的给html设置100%,是视口的高度。

    CSS框架

    bootstrap  理念:移动端优先,响应式,栅格系统(960布局) 960布局:主区域宽度为960像素,将区域内部划分为12列,每列之间间隔10像素,每列宽度60像素。

  • 相关阅读:
    c++ time_t
    sql 一些题目
    vc 找到一个或多个多重定义的符号
    c++ json 详解
    c++ json cpp
    C++ string(转)
    java web 复选框checked
    20_采用ContentProvider对外共享数据
    16_采用SharedPreferences保存用户偏好设置参数
    android开发 eclipse alt+”/”自动提示失效
  • 原文地址:https://www.cnblogs.com/akangwx0624/p/10971481.html
Copyright © 2011-2022 走看看