HTML/CSS/手写代码

W米线儿
546 阅读11分钟

响应式布局

viewport

利用meta标签控制viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询@media

适配不同设备

@media （min-width：600px）and (max-width:700px){}
@media （not min-width：600px）and (not max-width:700px){}
@media （min-width：600px ，max-width:700px){}
//，or的意思、、、、not是对查询结果取反

自适应单位：rem,vw,%

px自动转换为vw:postcss-px-to-viewport

响应式布局flex

Flexbox 布局更易于学习，也更适用于轻量级的布局。当布局中主要是行或者主要是列时，Flexbox 布局的表现更出色

flex布局

原理:通过给父盒子添加flex属性来控制盒子的位置和排列方式

特点：Flex布局可以实现空间自动分配、自动对齐（弹性、灵活） flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴

父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式

tips:如果两者同时设置，以子容器的设置为准

轴 包括 主轴 和 交叉轴、flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定

有两种方式可以设置flex布局：

  • display: flex;会生成一个块状的flex容器盒子
  • display: inline-flex;会生成一个行内的flex容器盒子

父元素

父元素的属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

flex-direction
  • 主轴方向，它决定了容器内元素排列方向

row: 默认值，主轴为水平方向从左到右；
row-reverse: 主轴为水平方向从右到左；
column: 主轴为垂直方向从上到下；
column-reverse: 主轴为垂直方向从下到上

justify-content:

主轴上子元素在主轴上的对齐方式

flex-start: ➡左到右
flex-end：➡️右到左
cneter: 居中对齐
space-between: 两端对齐，平均分配剩余空间 space-around:先两侧贴边，再平分剩余空间

align-items

定义子元素在交叉轴上的对齐方式（垂直方向）（单行）

strech: 默认值，子元素的高度铺满父元素
flex-start: 子元素⬇️从上到下排列、、让子项沿着容器顶部对齐，并且让子项保持各自的高度
flex-end: 子元素从⬆️ 从下到上
center: 子元素垂直居中
baseline: 根据子元素第一行文字的基线对齐(当字体大小不一致时，突出效果)

align-content

定义子元素多根轴线在侧轴上的对齐方式，只在多行显示下有效

stretch: 默认值，轴线铺满交叉轴
flex-start: 与交叉轴起点对齐
flex-end: 与交叉轴终点对齐
center: 与交叉轴中点对齐
space-between: 子元素先分配在上下，再平均非配剩余空间
space-around: 每根轴线两侧的间隔相等

flex-wrap

决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行

nowrap: 默认值，不换行
wrap: 换行，第一行在上方
wrap-reserve: 换行，第一行在下方

flex-flow

是flex-direction和flex-wrap的组合、默认值为row nowrap

子元素

子元素属性:flex-grow、flex-shrink、flex-basis 、flex 、order、align-self

flex
  • 是flex-grow、flex-shrink和flex-basis的合集，默认值为0 1 auto，后两个属性可不写
  • flex:1（默认：1 1 0%） *

image.png

flex-grow

父元素空间有剩余时，将剩余空间分配给各子元素的比例，默认为0，表示不分配；当为数值时，表示父元素剩余空间分配给各子元素的比例

flex-shrink

表示当子元素宽度总和大于父元素宽度，且未换行显示时，各子元素压缩大小，默认为1，表示各子元素等比压缩；当数值不一时，表示各子元素因为压缩空间而减小的尺寸的比例

flex-basis

可以用来设置子元素的空间，默认值为auto，表示为原本大小。当父元素有剩余空间时，可通过此属性扩充子元素的空间；各子元素通过扩孔之后的空间总和超过了父元素的空间大小时，按flex-basis值比例来设置子元素的大小，没有flex-basis属性时，默认flex-basis值为子元素原本大小，使子元素大小总和不得超过父元素空间大小

order

定义子元素在排列顺序，默认值为0，值越小越靠前，可以为负值

align-self

允许子元素单独设置对齐方式，优先级比父元素的align-items高。默认值为auto，表示继承父元素的align-items，如果没有父元素，则等同于stretch auto: 继承父元素的align-items

stretch \
flex-start
flex-end
center
baseline

盒模型

组成部分：content → padding → border → margin（由内到外）

  • 基本概念：包括margin,border,padding,content 包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素
  • box-sizing:
    • content-box ：标准模型（外扩模式）
    • border-box：IE模型（内减模式）
/* 标准盒模型（默认） */
.box {
    box-sizing: content-box;
    width: 100px; /* 只包含内容宽度 */
    border:10px;
    padding: 20px;
      /* 实际占宽：100 + 20*2 + 10*2 = 160px */
}

/* IE盒模型（推荐） */
.box {
    box-sizing: border-box;
    width: 100px;/* 包含内容+内边距+边框 */
    border:10px;
    padding: 20px;  
     /* 实际占宽：仍为100px，内容区被压缩 */
     内容宽=100-10*2 - 20*2 = 40px
}

BFC：块级格式上下文

一个独立的渲染区域，内部元素不会影响外部

触发条件（常用）：

  • overflow: hidden/auto(父元素因浮动从而高度塌陷，所以需要overflow来触发父元素的BFC来重新布局回到普通布局)
  • display: inline-block/tabel/table-cell/table-caption
  • position: absolute/fixed
  • float: left/right(子元素本身触发了BFC，使普通布局流变成了浮动流布局)

BFC应用

  • 防止margin重叠
    • 当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠、给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠
  • 可以包含浮动元素--清除内部浮动
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖、防止字体环绕
清除浮动的方法：
浮动产生的问题：脱离文档流、父元素高度塌陷
/* 方法1：触发父元素BFC */
.parent {
    overflow: hidden;
}

/* 方法2：使用clear（推荐） */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

定位position

image.png

隐藏元素

  1. display:none：元素彻底消失，不在文档流中占用位置了、不可点击、具有继承性即给父元素设置后，子元素也隐藏、不会影响布局，所以会有回流(重排和重绘)操作，性能开销比较大
  2. visibility:hidden：元素消失但会占据空间所以页面结构未发生变动，不可点击，不具有继承性，子元素visibility: visible，不会影响布局，触发重绘
  3. opacity:0：(占据空间，可点击会影响交互)、会被子元素继承且不能取消藏，会影响布局，触发重绘

怎么让元素平铺整个页面

/* 方法1：绝对定位 */
.fullscreen {
    position: absolute/fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 方法2：视口单位 */
.fullscreen {
    width: 100vw;
    height: 100vh;
}

文本省略

 //单行
 div {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行
div {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

动画

animation动画、transition过渡、transform变形：旋转、缩放、移动或倾斜

  • transition：颜色值，位置，大小的过渡，： transition: transform 1s ease-in 1s;
    • 需要触发，没法自动发生
    • 只有起始两个状态,是一次性的，不能重复发生，除非一再触发
    • 只能定义一个属性的变化
  • animation
    • 自主触发，可重复发生
    • 有多个状态：keyframes、尤其是时间轴的控制
    • 可定义多个属性的变化：比如颜色，大小，位置
  • transform
    • 移动（translate）
    • 缩放（scale）
    • 旋转（rotate）
    • 倾斜（skew)

rem,em,px,%,vw和vh,vmin和vmax

image.png

水平垂直居中:已知宽高的情况

文本对齐：text-align:center;line-hight:height

flex

  • 只设置父元素：display:flex;justify-content:center;align-self:center;
  • 父子元素都设置：父：display:flex;子：align-self:center;margin:auto

position子绝父相 + margin

  • 父：position:relative
  • 子position:absolute;top/bottom/left/right各为0；margin:auto

position子绝父相 + 负margin

  • 父：flex:relative
  • 子position:absolute;top/left各50%；margin-top:1/2子高;margin-left:1/2子高

position子绝父相 + transform

  • 父position:relative
  • 子position:absolute;top/left各50%; transform:translate(-50%,-50%)

position+calc函数(宽高各为200px)

  • 父position:relative
  • 子absolute;top:calc(50%,-100px);left:calc(50%,-100px)

两栏布局:左固定，右自适应

 <div class="outer1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

flex

  • 父：display:flex
  • 右：flex:1(占比可自动铺满剩余空间)

position

  • 第一种
    • 父：flex:relative
    • 右：float:absolute;top/right各为;left:左宽
.outer1 {
    position: relative;
}
.left {
    width: 200px;
    background-color: red;
}
.right {
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
}
  • 第二种
    • 父：flex:relative;overflow:hidden
    • 左(脱离文档流)：flex:absolute;left/right各为0
    • 右：margin-left:左宽
 .outer1 {
   position: relative;
}
.left {
   position: absolute;
   width: 200px;
}
.right {
   margin-left: 200px;
}

float+overflow

  • 左：float:left
  • 右:overflow:hidden

float + margin

  • 左：float:left
  • 右：margin-left:左宽

三栏布局：两侧固定，中间自适应

<div class="outer outer1">
   <div class="left">1-left</div>
   <div class="middle">1-middle</div>
   <div class="right">1-right</div>
</div>

flex

div顺序：left、center、right,左右均设宽高，中间为了自适应设高不设宽

  • 父display:flex
  • 中flex:1
 .outer1 {
    display: flex;
    text-align: center;
}
.left {
    flex: 0 0 100px;
}
.middle {
    flex: auto;
}
.right {
    flex: 0 0 200px;
}

position:左右absolute

div顺序：left、center、right,左右均设宽高，中间为了自适应设高不设宽

  • 左position:absolute;top/left各为0
  • 中position:absolute;top/right各为0
  • 右margin-left:左宽；margin-right:右宽

float

 <div class="outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
    <div class="middle">1-middle</div>
</div>
  • 左float:left
  • 中margin:0 右宽 0 左宽
  • 右float:right
.outer1 {
    width: 100%;
    height: 100px;
    text-align: center;
}
.left {
    float: left;
    width: 200px;
}
.middle {
    margin: 0 200px;
}
.right {
    width: 200px;
    float: right;
}

圣杯布局&双飞翼布局

  • 相同之处：
  1. 两侧内容宽度固定，中间内容宽度自适应
  2. 三栏布局，中间一栏最先加载、渲染出来
  3. 都使用了float浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局
  • 不同之处：

1、实现方法的不同

  • 圣杯布局：通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。
  • 双飞翼布局：通过float+margin，没有使用相对定位。

2、怎么处理两列的位置：

  • 圣杯布局：给外部容器加padding，通过相对定位把两边定位出来。
  • 双飞翼布局：是靠在中间这层外面套一层div加padding将内容挤出来中间。

圣杯布局:relative+float

  • div顺序：center,left,right
<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>

#container {
    /* 因左右侧会遮住center，给外层的container设置 padding-left: 200px;padding-right: 150px;，
    给left和right空出位置 */
    padding-left: 200px;
    padding-right: 150px;
    overflow: hidden;
}

#container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
}

#center {
    width: 100%;  /*这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了 */
    background: rgb(206, 201, 201);
}

#left {
    width: 200px;
    right: 200px;
    margin-left: -100%;/* 让left回到上一行最左侧 */
    background: rgba(95, 179, 235, 0.972);
}

#right {
    width: 150px;
    margin-left: -150px; /* 把right拉回第一行，这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了 */
    right: -150px;
    background: rgb(231, 105, 2);
}

双飞翼布局

  1. 两侧内容宽度固定，中间内容宽度自适应
  2. 三栏布局，中间一栏最先加载、渲染出来 实现：
  • left、center、right三种都设置左浮动
  • 设置center宽度为100%
  • 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
  • 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  
   #container {
    overflow: hidden;
  }

  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }

  #left,
  #right,
  #center {
    float: left;
  }

  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }

  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }

  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }

  .content {
    margin: 0 150px 0 200px;
  }

九宫格

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>

浮动+百分比

 .container {
    width: 300px;
    height: 300px;
}
.item {
    float: left;
    width: 33.33%;
    height: 33.33%;
    box-sizing: border-box;
    font-size: 32px;
    text-align: center;
    border: 1px solid #e5e4e9;
}

flex布局

 .container {
    display: flex;
    flex-wrap: wrap;
    width: 150px;
    height: 150px;
}
.item {
    width: 33.33%;
    height: 33.33%;
    box-sizing: border-box;
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
}
avatar
文章
阅读
粉丝