温故而知新(1)重新通俗易懂理解 ☞标签语义化 1.代码更加通俗易懂 2.便利搜索引擎seo ☞BFC 1.bl

重新通俗易懂理解

☞标签语义化

代码更加通俗易懂
便利搜索引擎seo

☞BFC

block format context块级格式化上下文(独立区域)
区域内的任何元素不会影响外部的区域，触发bfc效果的容器，限定元素中的布局效果

☞margin纵向重叠

margin-top与margin-bottom紧靠着的时候，会发生重叠，取最大值，如果有空文本元素的，依次重叠

4方向负值问题

margin-top 负值，自身往上移动，负值距离超过自身元素高度，元素下个元素，向左补齐元素宽度
margin-left 负值自身往左移动(如若自身是浮动元素且负值距离超过自身元素宽度，元素则排在上一行元素尾部计算排布距离)
margin-right负值，自身元素位置不动，右边元素向左移动(或者可以理解为自身元素宽度从右边距收缩，如若元素收缩宽度为0且浮动，该元素移动至上一行元素末尾)
margin-bottom 负值自身元素位置不动，底部元素向上移动(或者自身元素高度从底边框开始收缩)

☞圣杯布局

容器 padding-left:left元素宽度 padding-right:right元素宽度
容器中left center right float:left
center第一位 width:100%
left margin-left:-100%(容器宽度) position:relative right:自身元素宽度
right margin-right:-自身元素宽度

☞clearfix清除浮动

.claerfix:after {
content:'',
display:table/block;
claer:both;
}

☞flex

flex-direction 元素排布方向

row 水平方向不用手动设置
column 垂直方向

flex-wrap 元素在对应主轴上是否需要换行

nowrap 不换行不需要手动设置
wrap 换行

justify-content 元素在主轴上的排布方案

flex-start 从左开始依次排布默认方案不需要手动设置
center 元素在主轴上做居中处理（常用于居中布局）
flex-end 从右开始依次排布
space-between 如名字一样，元素在主轴上从两堆往中间，并以元素间相等间隔排布
space-around 如名字一样，每个元素上主轴方向上两边都是环绕相等间隔排布

align-items 元素在主轴的---垂直轴上的排布方案

flex-start 从此轴头部开始依次排布默认方案不需要手动设置
center 元素在此轴上做居中处理（常用于居中布局）
flex-end 从此轴尾部开始依次排

align-self --->允许设置此属性的元素在主轴的---垂直轴上的排布方案

定位

absolute 相对上一个定位元素而定，如没有定位元素则以body做绝对定位
relative 相对自身做出定位可供给其它元素用作定位元素
fixed 固定定位

垂直水平居中布局问题

inline元素

text-align:center;  水平居中
line-height:xxx;
height:xxx;       垂直居中

block元素

position:absolute;
let:0;
top:0;
right:0;
bottom:0;
margin:auto;

position:absolute;
let:50%;  相对定位元素
top:50%;  相对定位元素
width:xxx;
margin-lfet:-xxx;
height:xxx2;
margin-top:-xxx2;

position:absolute;
let:50%;  相对定位元素
top:50%;  相对定位元素
transform:translate(-50%,-50%) 分别相对自身的width height属性

通用

要垂直居中的 父元素中
display:flex;
justify-content:center;
align-items:center;

响应式布局 ---根据屏幕像素做出对应的元素的调整排布

单位

px---绝对长度单位
em---相对长度单位相对父元素
rem--相对长度单位相对根元素

解决方案 1.media-query 媒体查询

@media only screen and (max-width:374px){
   html{
       font-size:86px;
   }
}
.....以此类推根据不同手机屏幕像素区间，在根页面 全局设定好即可  弊端明细，区间多-繁琐

设定好后，在页面 直接使用 xxx rem即可 这里示例1rem 代表86px

2.vw-vh 根据浏览器窗口视图宽度高度仅用于现代浏览器但通用

window.innerWidth=100vw
window.innerHeight=100vh

line-height 继承

父元素{
    font-size:16px;
    line-height:200%;
}

子元素：{
    line-height:100%  16*2 32px行高
}
//////////////////////////////////
父元素{
    font-size:16px;
    line-height:1.5;
}

子元素：{
    font-size:12px;
    line-height:100%  12*1.5行高
}