一 CSS篇

鲍鲍18
107 阅读4分钟

1 HTML语义化

  • 让代码更可读
  • 利于爬虫抓取内容（SEO-搜索引擎优化）

2 盒模型宽度如何计算，给一个div求offsetWidth

  • 答: offsetWidth = 内容宽度 + 内边距 + 边框，无外边距

box-sizing: border-box就是width为 内容宽度 + 内边距 + 边框值

3 margin纵向重叠问题，代码AAA与BBB之间的距离

<html>
<style>
p {
  font-size: 16px;
  line-height: 1;
  margin-top: 15px;
  margin-bottom: 5px;
}
</style>
<body>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>
</html>

知识点

1 相邻元素的margin-top和margin-bottom会发生重叠
2 空白内容的<p></p>也会重叠，即宽度就不算了，被忽略掉
3 答案15px

image.png

4 margin的top, bottom, left, right设置负值有什么效果

答：

margin-top的margin-left会向上和向右移动；

margin-right负址，右侧元素左移，自身不受影响；

margin-bottom负值，下方元素上移，自身不受影响

5 BFC理解与应用

BFC块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

  • 形成BFC的常见条件
1 float不是None
2 position是absolute或fixed
3 overflow不是visible
4 display 是flex inline-block等
  • 常用用法

6 float布局

圣杯布局和双飞翼布局的目的

  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于PC网页

技术总结

  • 使用float布局
  • 两侧使用margin负值，以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖，一个用padding一个用margin（都可）

圣杯布局

// 圣杯布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            margin-left: -100%; // 1 解释见下方
            // 它应与center在一排上的，被挤下来了，要想上去，就设置-100%, 100%为父元素宽度的100%，即container的宽度
            // 这时就移上去了，与center左对齐了
            
            position: relative; // 2 相对于自身右移了200px，不会影响任何元素
            right: 200px; // 自身宽度为200px,所以再右移200px，就到最左边了？？不懂明明是左移啊, 解释见下方
            // 随便写个position: relative; right: 10px，就知道是右边缺少了，就相当于左移了，见下方红色的图
            
            background-color: yellow;
            width: 200px;
            
            
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px; // 3 解释见下方
            // 因为margin-right设置负值后，自身元素不变，后面的元素左移；
            // 其实就是虽然自身内容没变，但在外界看来相当于自身宽度减少；
            // 所以当margin-right设置为自身宽度的值时，相当于它没有宽度了，
            // 所以它后面的元素才会左移，在这里便会当它没宽度就到center的右边了
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

image.png

双飞翼布局

  • 比圣杯布局简单，更好懂
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>
  • 对比图
  • 我的理解就是圣杯布局没给留空，除了margin-left就设置为负，你还得position自己去定位
  • 双飞翼布局给你留好空了，你margin-left就设置为负就行了

image.png

7 CSS定位

absolute和relative定位

relative依据自身定位，对外界元素不会有影响

absolute依据最近一层的定位元素定位

定位元素：absolute relative fixed，都没有的话，就依据body定位

水平居中

  • inline元素：text-align:center
  • block元素：margin: auto
  • absolute元素：left: 50%, margin-left负值

垂直居中

  • inline元素：line-height的值等于height的值
  • absolute元素：top：50%+margin-top负值 // 需要知道子元素宽高
  • absolute元素：transform(-50%, -50%) //考虑兼容
  • absolute元素：top, left, bottom, right=0 + margin:auto // 兼容性最好

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置，是移父元素的50%，

当仅设置top: 50%;left: 50%;时是子元素左上角那个点水平垂直居中对齐了

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

.container-2 {
    position: relative;
}
.container-2 .item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -50px;
}

.container-3 {
    position: relative;
}
.container-3 .item {
    width: 200px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.container-4 {
    position: relative;
}
// 兼容性好，不需要css3特性
.container-4 .item {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto; // 神器，外边距自动填充
}

8 图文样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>line-height 继承问题</title>
    <style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一行文字</p>
</body>
</html>

问P标签的行高是多少

答40px

line-height情况

  • 写具体数值，如30px，则继承该值
  • 写比例，如2/1.5之类的，则继承该比例

父元素的line-height比例 * 子元素自身的font-size，即 *1 * 16px = 16px, p标签的font-size就是16px

  • 写百分比，如200%，则继承计算出来的值

父元素的font-size * * 父元素的line-height百分比，*即 20 * 200% = 40px, p标签的font-size就是40px

父line-height为比例时

image.png

父line-height为百分比时

image.png

9 响应式

rem是一个长度单位

  • px，绝对长度单位，最常用
  • em，相对长度单位，相对于父元素，不常用
  • rem，相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常用方案： 1.@media-query, 根据不同屏幕的宽度设置根元素的 font-size 2.rem，基于根元素的相对单位

语法：

@media only screen and (max-width: 374px 设备大小范围) {

html {

font-size: 具体的值

}

}

媒体查询语句，主要是设备适配

image.png

375/320 = 100/86，86就是这么来的

414/375 = 110/100，110就是这么来的

视口尺寸

window.screen.height // 屏幕高度

window.innerHeight // 网页视口高度

document.body.clientHeight // body高度

image.png

vmax, vmin取两者的最大/最小值，考虑横屏情况

avatar
文章
阅读
粉丝