zoukankan      html  css  js  c++  java
  • CSS-弹性盒子

    1.块级和行内的区别?

      答:a.块级元素可设置宽高,行内元素不可设置宽高。

          B.块级元素独占一行,行内元素不独占一行。

    2.清除浮动的几种方法?

      答:a.设置一个空白标签,clear:both来清除浮动

          B.设置overflow:hidden,用在父元素里面。

          C.after来清除,一般采用这种,

         例:.div:after{

                    Content:””

                    Display:block;

                    Clear:both;

                   }   

    3.标准盒模型和IE盒模型的区别?

     答:标准盒模型会因为borderpadding而撑大,而IE浏览器不会出现这种问题。

    4.选择器有哪几种?

      答:a.内联(权重值最高,1000),

    B.ID选择器(用符号#表示,权重值为100),

    C.类选择器(用符号.来表示,权重值10),

    D.属性选择器又叫伪元素 选择器(权重值10,first-letter:首行第一个字,first-line:第一行,只能用于块级元素),

    E.伪类选择器 (权重值为10,一般用于a标签,a:hover:是指鼠标移上去的效果,a:visited:是指访问过后的效果,a:link是未访问的链接a:active:是指鼠标悬停在上面的效果),

    F.元素选择器(权重值为1),后代选择器(符号为>是指父元素之后的所有子元素),

    G.兄弟选择器(符号为+,~,是指父元素之后的第一个子元素)

    H.通配符选择器 (权重值最低,符号为*

    4.遇到子元素设置margin的时候,父元素也会随之受到影响的问题该怎么解决?

      答:a.设置border属性,但是宽高也要随之减去相应宽高。

          B.设置padding属性,也要减去相应宽高。

          C.设置overflow:hidden,在父元素设置。

    5.CSS两大核心?

      答:继承和层叠,内联优先级最高(内联样式在html属性里面写style,)外联(link rel stylesheet)和内部优先级一样(在title包裹里面写<style></style>),取决于位置。

    6.BFC的解释?

      答:就是独立出来一个盒子,不影响其他盒子。

    7.弹性盒子是什么?需要什么条件触发?

     答:弹性盒子是一种布局方式,需要display:flex触发。

         1.flex-direction(主轴的方向)

           A.row 默认水平方向。

         B.row-reverse:主轴为水平,起点在右端。

         C.column:主轴为垂直,起点在上端。

         D.column:主轴为垂直,起点在下端。

       2.flex-wrap(换行):

    A.nowwrap:默认不换行

    B.wrap:换行,第一行在上方,从上到下。

    C.wrap-reverse:换行,第一行排列在下方。

      3.justify-content(在主轴的对称方式)

       A.flex-start:默认左对齐。

       B.flex-end:右对齐。

       C.center:居中。

       D.space-between:两端对齐,项目之间间隔相等

       E.space-around:每个项目两侧间的间隔相等,项目间的间隔比边框大了整整一倍。

     4.align-items(在交叉轴上如何对齐)

       A.flex-start:交叉轴的起点对齐

       B.flex-end:交叉轴的终点对齐。

       C.center:交叉轴的中点对齐

       D.baseline:所有文字相对于同一基线对齐。

     5.align-content:(定义了多根轴线的对齐方式,如果项目只有一根轴线,则该属性不起作用)

      A.flex-start:与交叉轴的起点对齐

     B.flex-end:与交叉轴的终点对齐。

     C.center:中点对齐

     D.space-between;

     E.space-around:

     F.stretch:默认值轴线占满整个交叉轴

    6.order属性(定义项目的排列顺序,数值越小,排列 越靠前,默认为0

     例:.div{order:-1}

    7.flex-grow(是一个没有单位的非负数,默认值为0,用来定义项目容器有多余的空间时,这些空间在不同条目之间的分配比例)

     例:.div{flex-grow:1;}

    8.flew-shrink(默认值为1,空间不足时,各个项目等比例缩小)

     例:.div{flew-shrink:1;}

    9.flex-basis(定义了项目占据的主轴空间比例,计算主轴是否有多余空间,它的默认值是auto

     例:.item{flex-basis:50%;}占据父级的一半

    10.align-self(允许单个项目与其他项目有不一样的对齐方式,可覆盖align-items

      A.flex-start:交叉轴的起点对齐

      B.flex-end:交叉轴的终点对齐

      C.center:交叉轴的中点对齐

      D.baseline:所有文字相对于同一基线对齐

  • 相关阅读:
    Combination Sum
    Partition List
    Binary Tree Zigzag Level Order Traversal
    Unique Binary Search Trees II
    Count and Say
    Triangle
    3Sum Closest
    Search for a Range
    Longest Common Prefix
    Convert Sorted List to Binary Search Tree
  • 原文地址:https://www.cnblogs.com/waitingforbb/p/7191869.html
Copyright © 2011-2022 走看看