前端基础——html和css篇

HolyZheng commented 6 years ago

作者：holyZheng 转载请注明出处

css基础

css选择器和优先级

css中常见的选择器有

元素（标签）选择器
类选择器
ID选择器
属性选择器
后代选择器 div p
子元素选择器 div > p
相邻兄弟选择器 div + div（下一个兄弟）div ~ div (后面的所有兄弟)
通配符选择器 * 优先级：!important > 内联样式 > id选择器 > 伪类(: hover) > 类选择器 = 属性选择器 > 相邻兄弟选择器 > 后代/子代选择器 > 标签选择器 > 通配符选择器 > 伪类（:first-child）> 继承 > 浏览器默认样式权重计算：权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
css盒子模型

所有html元素可以看作一个盒子，它包括：外边距，边框，内边距，内容这几部分。
1. 标准盒子模型：width 属性指定的是元素内容content 的宽度。
2. IE怪异盒子模型： width属性指定的是元素内容content + 内边距padding + 边框border 的宽度

主动转换：可以通过box-sizing 对盒子模型进行转换

content-box使用标准盒子模型
border-box使用IE怪异盒子模型 border-box的应用场景 border-box作用就是可以让我们脱离border,padding的值的影响，所以当我们需要元素在页面上占用一个准确的面积的时候，或则要实现宽度100%等，我们可以通过把box-sizing：border-box来避免因为border和padding的宽度高度使得元素布局效果与我们预测的不一致。
position
- relative 相对定位相对于自身位置定位，不脱离文档流
- fixed 固定定位相对于视窗来定位，脱离文档流
- absolute 绝对定位相对于祖先元素中第一个不是static定位的元素进行定位，脱离文档流
- sticky 粘性定位它本身的行为与relative定位相似，但是当他的容器滚动使它超出页面可视范围的时候，它的表现又与fixed相似，适合做类似app中顶部导航
  BFC
  
  BFC（Block formatting context）直译为“块级格式化上下文”，具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会布局上影响到外面的容器。满足一下任一条件即可触发BFC特性
- body根元素
- 浮动元素
- display为inline-block，teble，flex
- overflow 除了visible意外的值（hidden，auto，scroll）特征：
同一个BFC内的元素的外边距会发生折叠
BFC可以包含浮动元素

BFC可以阻止元素被浮动元素覆盖

overflow


//  默认值，不会被裁剪，内容呈现在元素之外
overflow: visible;

/ 内容会被修剪，并且其余内容不可见 / overflow: hidden;

/ 内容会被修剪，浏览器会显示滚动条以便查看其余内容 / overflow: scroll;

/ 由浏览器定夺，如果内容被修剪，就会显示滚动条 / overflow: auto;

/ 规定从父元素继承overflow属性的值 / overflow: inherit;

### 常见行内元素
button，input，textarea，span，img
> 行内元素： b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

> 块级元素： div dl form ul p ol有序 table h  hr 以及h5的各种语义化标签

1. 行内元素与块级元素的区别：
    - 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
    - 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
    - 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
    - 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
2. 行内元素和块级元素转换
```cs
   display:block; (字面意思表现形式设为块级元素)
   display:inline; (字面意思表现形式设为行内元素)

inline-block inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性

可继承的css属性

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

居中

文字单行水平居中可以用text-align：center，垂直居中可以用 line-height = 父元素的height
固定宽度的块级元素： margin: 0 auto
对元素的通用垂直居中和水平居中
- 也可以用绝对定位和transform：translate 配合实现居中效果。
- 可以用flex布局。justify-content: center; align-items: center;

多行文字垂直居中

<div>
<span>
  多行文字
</span>
</div>


div {
width: 300px;
height: 400px;
position: relative;
}
span {
width: 100px;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%)
}

/ 或者 / div { height: 300px; width: 400px; display: flex; align-items: center; } span { display: inline-block; width: 100px; }

flex: “flexible box的缩写”，就是弹性布局的意思。他能够简便、完整、响应式地实现一些类似垂直居中的特殊的布局。
  主要用到的几个属性就是 justify-content ，align-items，flex-direction， flex-grow，flex-shrink

### 隐藏元素
- opacity:0；
- visibility:hidden
- display:none
```css
.hide{
    display:none;/* 不占据空间，无法点击 */
}
.hide{
    opacity:0;/* 占据空间，可以点击 */
}
.hide{
    visibility:hidden; /* 占据空间，无法点击 */
}

HolyZheng commented 6 years ago

css3

HolyZheng commented 6 years ago

html5

HolyZheng commented 6 years ago

经典布局

圣杯布局

holygrail

<div id="header">#header</div>

  <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>

  <div id="footer">#footer</div>

实现的效果主要在container中，left 和 rgith固定宽度，center首先渲染，且自适应宽度。

    body {
      min-width: 550px;      /* 2x LC width + RC width */
    }
    #container {
      overflow: auto;        /* BFC */
      padding-left: 180px;   /* LC width */
      padding-right: 150px;  /* RC width */
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 180px;          /* LC width */
      right: 180px;          /* LC width */
      margin-left: -100%
    }
    #right {
      background-color: blue;
      width: 150px;          /* RC width */
      margin-right: -150px;  /* RC width */
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

该方案几个注意的点：

center元素位于left和right之前，可以让center先渲染，用户首先看到页面的主要内容。
container （width:100%）包裹着三栏内容，通过padding-left和padding-right为左右两栏腾出空间。
center，left，right都设置一个左浮动（float:left），所以container内部是一个浮动流。
通过给 left 元素设置 margin-left: -100%，使得left移动到container的左上角，在通过position：relative； right: 180px，移动到container的padding-left的位置上去。
给right 元素设置 margin-right: -150px，使得它移动到container的padding-right的位置上去。

ps: margin-left 和 margin-right 利用了浮动流的特性，使得第一行能够同时容纳center，left，right这三个元素。

圣杯布局（flexbox实现）

holygrail-by-flexbox

<div id="HolyGrail">
  <div id="header">#header</div>

  <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>

  <div id="footer">#footer</div>

    body {
      min-width: 550px;  
    }
    #HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #container {
      display: flex;
      flex: 1;
    }
    #center {
      background-color: #e9e9e9;
      flex: 1;
    }
    #left {
      background-color: red;
      order: -1;
      width: 150px;
    }
    #right {
      background-color: blue;
      width: 150px;
    }
    #header, 
    #footer {
      height: 50px;
      background-color: #c9c9c9;
    }

如果不考虑ie10及以下的浏览器，那么可以使用flexbox来实现圣杯布局。而且圣杯布局可以通过让container填充高度来使得footer达到一个sticky的效果。 flex兼容性

双飞翼布局

holygrail

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同的地方在于解决中间div内容不被遮挡的思路上面

圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容div置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不则当中间内容。
双飞翼布局的解决方案是：通过再中间元素的内部新增一个div用于放置内容，然后通过左右外边距margin-left和margin-right为左右两栏留出位置。
双飞翼布局多了1个div标签，少用了4个css属性。少用了padding-left，padding-right，左右两个div用相对布局position: relative及对应的right和left，多了margin-left，margin-right。

<div id="header">#header</div>

  <div id="container">
    <div id="center" class="column">
      <div id="center-content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>

  <div id="footer">#footer</div>

    body {
      min-width: 550px;      /* 2x LC width + RC width */
    }
    #container {
      overflow: auto;        /* BFC */
    }
    #container .column {
      height: 200px;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #center-content {
      margin-left: 180px;
      margin-right: 150px;
    } 
    #left {
      width: 180px;
      background-color: red;
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;          /* RC width */
      margin-left: -150px;  /* RC width */
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

HolyZheng commented 6 years ago

响应式布局

响应式布局就是页面根据不同的屏幕宽度，呈现不一样的布局样式。对应的方案有

媒体查询
百分比
rem 为了使得 1 rem = 10px
```
html{ font-size: 62.5% }
```
vw/vh

对应的工具库和ui框架有reset.css normalize.css respond.js bootstrap reset 和 normalize的作用是：对默认样式进行重置，避免因为浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，出现很多兼容性问题。它们的异同：异同

HolyZheng commented 6 years ago

过渡

transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。

transition: property duration timing-function delay;

timing-function具体值有

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform: none|transform-functions;

具体动作

动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}

HolyZheng commented 6 years ago

语义化

语义化就是我们得html代码可以体现出页面的结构。语义化

语义化的标签有: h1-h6 p ul ol li table strong em header nav footer article section h1 页面的核心 h2 主栏目 h3文章标题 h4 副标题 h5 h6 小标题

好处

有利于SEO，搜索引擎优化，便于抓起更多有效的信息
方便其他设备解析，像屏幕阅读器，盲人阅读器等
便于团队合作，提高代码可读性

HolyZheng commented 6 years ago

canvas

弧形进度条

<!DOCTYPE html>
<!-- Learn about this code on MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes -->

<html>
 <body onload="draw();">
   <canvas id="canvas" width="200" height="200"></canvas>
   <script src="./demo.js"></script>
 </body>
</html>

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.strokeStyle = "orange"
ctx.lineWidth = 10
ctx.arc(100,100,50,0,Math.PI)
ctx.stroke()

HolyZheng / holyZheng-blog