css样式总结

change log: 2018-11-28 本文主要汇总开发中前端布局,遇到的小问题以及对小问题的研究;

change log: 2020-10-14 针对这2天前端开发,重新整理了一下css布局:主要介绍:大小(box模型)、位置(display、position、float、flex)的控制,重点是postion 与 flex

box模型

  • 基本属性

​ width,heigh,padding,border,margin的关系如下图所示:


对于框模型已经较为熟悉了,但有一点height与width属性都是内容部分的属性,而不是整个元素的属性。元素的宽度 = width + 2padding + 2border + 2*margin

  • 父子元素尺寸关系

    若父元素与子元素都设置了尺寸,则各自按照自己的设置进行。

    height展现了一种自下向上的尺寸影响路线:子元素设置的height,会决定父元素的height;父元素的height不会影响子元素的height。

    width展示了从上而下的影响路线:父元素设置的width,决定子元素的width;子元素的width设置不会影响父元素的width。

    • 100%的设置尺寸问题

      子元素继承父元素的width是content,子元素尺寸100%的设置时,不能再设置padding、border、magin等宽度,否则就会超出限制

      .parent{
          height: 300px;
          width: 300px;
          border: 1px solid red;
      }
      
      .child{
          height: 100%;
          width: 100%;
          border: 50px solid green;
      }
      

      这样的child元素的尺寸会超出父元素parent,因为child元素的尺寸已经是100%父元素的内容了,父元素没有设置border,而子元素增加border的宽度。

    • 左右居中的一种实现:
      .center-me { margin: 0 auto; }

      注意:这样是左右居中的实现方式。

display

display属性决定element如何展现,每一种HTML element都有默认的display属性。绝大多数的值是block与inline。

  • block

    block的element总是从一个新行开始,并尽可能多的占用可用的width.

    默认的block element包括:

    • div
    • h1 - h6
    • p
    • form
    • header
    • footer
    • section
  • inline

    inline是行内元素,不会另起一新行,只占用它需要的width。

    默认inline element包括:

    • span
    • a
    • img
  • none

    通常是javascript在不删除、重建元素条件下,控制elements的显隐。

    display: none; 的元素展示时,page就像没有该元素一样,隐藏的元素不占用空间。

position

需要先明白文档流,文档流是自上而下分成一行行, 并在每行中按从左至右的顺序排放元素的方式。

postition是对元素位置的控制,它会影响文档流的排列方式。通过它设置控制位置的类型,包括: static、relative、absolute、fixed、sticky5种类型,影响:top、right、bottom、left等属性的设置。

static

遵循正常的文档流对象,对象占用文档空间,该定位方式下,top、right、bottom、left、z-index等属性是无效的。

staic是默认的定位方式,也就是不设置postion情况下,top、right、bottom、left、z-index等值是无效的。

relative

relative是相对于元素原来的位置定位,且原来的位置仍然存在。

相对定位

position: relative;
top: 20px;
left: 30px;

absolute

absolute是针对父元素的位置进行定位,原来的位置不存在了。

绝对定位

position: absolute;
top: 20px;
left: 30px

注意:这个父元素不能是fixed,如果absolute定位的元素,没有相对的父元素,它相对与document body进行定位,当滚动式跟随滚动。

​ absoulte是根据祖先类的border进行的定位

fixed

fixed是相对视窗进行定位,当元素滚动式,它的位置不会发生变化。

参展:app bar

示例

sticky

sticky的定位比较特别,正常情况下,它在文档流中的位置正常,当滚动到一定位置时,它变成fixed的,就像黏在窗口的制定位置上。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

示例

属性相关

  • 如果同时设置top、bottom,该听谁的?
    如果top和bottom一同存在的话,那么只有top生效。
    如果left和right一同存在的话,那么只有left生效。

  • z-index属性

    z-index,又称为对象的层叠顺序,它用一个整数来定义堆叠的层次,整数值越大,则被层叠在越上面,当然这是指同级元素间的堆叠,如果两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。需要注意的是,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

float

float属性制定一个elements如何浮动。例如:让图片浮动到文字的右侧。

它的值包括: left、right、none、inherit(从父元素继承)。

img {
    float: right
}

示例

flex

flex(弹性)是display的一种方式,它更加方便的改变了文档流,尤其是当父组件container控制子组件的的排列的时候。

参考

基本

  • flex布局最基本的概念是轴,行轴称为main axis,列轴称为cross axis。

    应用flex布局的元素,其子元素的布局方式收flex属性的影响。

  • 使用

    .box {
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    

flex-direction

控制子元素的排列方向

.box {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction

默认排列方向是row

flex-wrap

控制子元素换行的方式

.box{
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse
}

wrap:

wrap

wap-reverse:

wrap-reverse

默认是nowrap,nowrap超出不显示。

justify-content

控制在主轴上的对齐方式

.box {
    justify-content: flex-start | flex-end | center | space-between | space-aroud
}

justify-content

align-items

控制子元素在cross axis上的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×