学习路线
文本垂直操作:vertical-align的使用图示。middle设置居中。
vertical-align
只对行内元素、行内块元素和表格单元格(table-cell)元素生效:不能用它垂直对齐块级元素。
1.对于行内元素来说,左右的margin是可以完美设置的,上下的margin设置后是无效的。对于行内元素来说,左右的padding是可以完美设置的,上下的padding设置后是会被遮挡。反之块元素和行内块元素则正常。 2.给一个固定宽高的块级元素左右margin-left,margin-right设置auto可以实现该元素在其父容器里面水平左右居中,反之设置竖直方向的margin则竖直方向居中。但是行内元素设置无效,因为行内元素无法设置宽高生效。 3.父容器开启flex布局,子容器margin:auto;也可以设置设置子容器居中。
定位元素(positioned element)是其计算后位置属性为 relative
, absolute
, fixed
或 sticky
的一个元素(换句话说,除static
以外的任何东西)。
relative
的元素,会占用原来位置并留下空白。absolute
的元素。绝对定位必须是作用于父级或往上的层级非static模式的布局里面才生效。同时设置float浮动失效。fixed
的元素相对于视口html定位,且不随视口滚动而滑动,不占原来的位置。同时设置float浮动失效。sticky
的元素。
注:所有的定位都是同一层级。建议大模块用浮动,微调用定位。给一个span块元素设置宽高是不生效的,有特殊情况可以如下操作:
移动盒子模型位置的方法 :
浮动与弹性盒子选择上的区别: 浮动(float):可以让元素同行显示,元素排列不下时会自动让元素换行显示。 弹性容器(display: flex):可以让元素同行显示,元素排列不下时不会自动换行,而是将元素进行压缩排列显示,除非设置flex-warp属性才会换行显示。
flex(弹性盒子)
采用flex布局的元素,称为flex容器;这个容器的子元素称为flex项目。
格式:display: flex; 写在父级元素(容器)里
容器属性
1. flex-direction: 主轴方向
2. flex-wrap: 主轴一行满了换行
3. flex-flow: 1和2的组合
4. justify-content: 主轴元素对齐方式
5. align-items: 交叉轴元素对齐方式//单行
6. align-content: 交叉轴行对齐方式//多行
侧轴: align-items:stretch;属性是单行子元素默认值,在不设置固定高度的时候,侧轴方向高度自动充满父容器。子元素设置固定高度时,与flex-start效果一样。 align-content:stretch;属性是多行子元素默认值,在不设置固定高度的时候,侧轴方向高度自动平分父容器。子元素设置固定高度时,与flex-start效果一样。
媒体查询特征.png
媒体类型.png
媒体运算符.png
image.png
开启BFC.png
开启BFC.png