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包括:
-
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;
}

默认排列方向是row
flex-wrap
控制子元素换行的方式
.box{
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse
}
wrap:

wap-reverse:

默认是nowrap,nowrap超出不显示。
justify-content
控制在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-aroud
}

align-items
控制子元素在cross axis上的对齐方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
