HTML与CSS

邶念
438 阅读3分钟

HTML

如何理解HTML语义化

  1. 让人更容易读懂（增加代码可读性）
  2. 让搜索引擎更容易读懂（SEO）

块状元素 & 内联元素

  1. 块状元素：独占一行
display: block/table
div h1 h2 table ul ol p...
  1. 内联元素：独占一块
display: inline/inline-block
span img input button...

CSS

布局

优先级算法

写法权重
!importantInfinity
行间样式1000
id100
class，属性，伪类10
标签选择器，伪元素1
通配符0

盒模型

  • 盒模型：IE盒模型、标准盒模型。
// IE(一般都用这个)  
width = content + padding + border;
box-sizing: border-box;
// 标准
width = content;
box-sizing: content-box;

// box的 offsetWidth 是多大？
<style>
    #box {
        width: 100px;
        padding: 10px;
        border: 1px solid red;
        margin: 10px;
        box-sizing: border-box; // 如果加上，offsetWidth 是多大？
    }
</style>
<div id="box"></div>

答案：122px / 100px。
因为：offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距。加上之后则宽度是多少就是多少。

margin 纵向重叠问题

// AAA 和 BBB之间距离是多少？
<style>
    p {
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

答案：15px。
因为：相邻元素的 margin-top 和 margin-bottom 会发生重叠；空白内容的<p></p>也会重叠，相当于被忽略掉的样子。

margin 负值问题

  • 对 margin 的 top left right bottom 设置负值，有何效果？
  1. margin-top 和 margin-left 负值，元素向上、向左移动。
  2. margin-right 负值，右侧元素左移，自身不受影响。
  3. margin-bottom 负值，下方元素上移，自身不受影响。

BFC 理解与应用

  • 含义
  1. Block format context，块级格式化上下文。
  2. 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
  • 形成 BFC 的常见条件
  1. float 不是 none。
  2. position 是 absolute 或 fixed。
  3. overflow 不是 visible。
  4. display 是flex 或 inline-block 等。
  • 常见应用
  1. 清除浮动。
<style type="text/css">
    .box {border: 1px solid red;}
    .box div {width: 100px;height: 100px;background-color: #ccc;}
    .box-left {float: left;}
    .box-right {float: left;}
    // 清除浮动
    .bfc {
        overflow: hidden;
    }
</style>

<div class="box bfc">
    <div class="box-left"></div>
    <div class="box-right"></div>
</div>

float 布局 和 clearfix

  • float 布局
  1. 圣杯布局。
  2. 双飞翼布局。
  • 手写 clearfix（清除浮动）
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

flex布局

  • 常用语法
  1. flex-direction：主轴方向。
  2. flex-wrap：是否换行。
  3. justify-content：主轴对齐方式。
  4. align-items：和主轴垂直轴（交叉轴）的对齐方式。
  5. align-self：子元素在交叉轴对齐方式。
  • flex 画一个三个点的骰子
<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 20px;

        display: flex; // flex 布局
        justify-content: space-between; // 两端对齐
    }
    .item {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
    }
    .item:nth-child(2) {
        align-self: center; // 第二项居中对齐
    }
    .item:nth-child(3) {
        align-self: flex-end; // 第三项尾部对齐
    }
</style>

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>

定位

absolute 和 relative 分别依据什么定位

  • relative：依据自身定位。
  • absolute：依据最近一层的定位元素定位。
  1. 定位元素可为：body、fixed、relative、absolute...

居中对齐的实现方式

  • 水平居中
  1. inline 元素：text-align: center。
  2. block 元素：margin: auto。
  3. absolute 元素：left: 50% + margin-left 负值。
  • 垂直居中
  1. inline 元素：line-height 的值等于 height 值。
  2. absolute 元素：top: 50% + margin-top 负值。
  3. absolute 元素：transform(-50%, -50%)。
  4. absolute 元素：top, left, bottom, right = 0 + margin: auto。
<style type="text/css">
    .container {
        position: relative;
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
        height: 200px;
    }
    .block {
        width: 200px;
        height: 100px;
        background-color: #ccc;
    }

    .container-1 {
        text-align: center; // 水平对齐
        line-height: 200px; // 垂直对齐
        height: 200px;
    }
    .container-2 .block {
        margin: auto; // 水平对齐
    }
    .container-2 .block { // 缺点：必须知道宽高
        position: absolute;
        left: 50%;  // 水平对齐
        margin-left: -100px;
        top: 50%; // 垂直对齐
        margin-top: -50px;
    }
    .container-3 .block { // 缺点：某些浏览器不支持该写法
        position: absolute; // 垂直对齐 + 水平对齐
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .container-4 .block {
        position: absolute; // 垂直对齐 + 水平对齐
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>

<div class="container container-1">
    <span>内联元素 inline</span>
</div>

<div class="container container-2">
    <div class="block">this is block</div>
</div>

<div class="container container-3">
    <div class="block">this is block</div>
</div>

<div class="container container-4">
    <div class="block">this is block</div>
</div>

图文样式

line-height 继承问题

  1. 具体数值，如 30px，则继承该值。
  2. 写比例，如 2 or 1.5，则继承该比例。
  3. 写百分比，如 200%，则继承计算出来的值。
<style type="text/css">
    body {
        font-size: 20px;
        // 1. 具体数值
        line-height: 30px; // 继承结果 30px
        // 2. 比例
        line-height: 2; // 继承结果 2 * 16 = 32px
        // 3. 百分比
        line-height: 200%; // 继承结果 20 * 200% = 40px
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }
</style>
<body>
    <p>这是一行文字</p>
</body>

色值

  • 三原色：红 绿 蓝 r (00-ff)、g(00-ff)、b(00-ff)
  • 16进制，代表饱和程度。 rgb(0-255,0-255,0-255);
  • 10进制，代表饱和程度。

响应式

rem 是什么

  • rem 是一个长度单位。
  1. px，绝对长度单位，最常用。
  2. em，相对长度单位，相对于父元素，不常用。
  3. rem，相对长度单位，相对于根元素，常用于响应式布局。
<style>
    html {
        font-size: 100px;
    }
    div {
        font-size: 0.16rem; // 则 font-size 为 16px
    }
</style>

如何实现响应式

  • media-query，根据不同的屏幕宽度设置根元素 font-size。然后通过 rem 基于根元素的相对单位做长度计算。
<style type="text/css">
    @media only screen and (max-width: 374px) {
        /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
        html {
            font-size: 86px;
        }
    }
    @media only screen and (min-width: 375px) and (max-width: 413px) {
        /* iphone6/7/8 和 iphone x */
        html {
            font-size: 100px;
        }
    }
    @media only screen and (min-width: 414px) {
        /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
        html {
            font-size: 110px;
        }
    }

    body {
        font-size: 0.16rem;
    }
    #div1 {
        width: 1rem;
        background-color: #ccc;
    }
</style>

<body>
    <div id="div1">this is div</div>
</body>

CSS3

新增伪类

div:first-child{}
div:last-child{}
div:only-child{}
div:nth-child(2) {}
...
:after,:before,:disabled,:checked...

关于 CSS3 动画

// X 轴从左到右移动100px
transform: translateX(100px);

// 顺时针旋转 45度
transform: rotate(45deg);

// 放大2倍
transform: scale(2);

// 拉伸扭曲45度
transform: skew(45deg);

// 过渡属性，使CSS动画过渡不那么生硬
transition: 1s all ease;

// 动画效果
animation: theAni 1s linear infinite both;
@keyframes theAni {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
}
avatar
文章
阅读
粉丝