css基础

wzw31
96 阅读4分钟

1.盒子模型的宽度的计算问题

此处介绍两种盒子模型：标准盒模型(content-box)以及怪异盒子模型(border-box)

盒子模型的种类可以通过css的 box-sizing 属性控制,该属性的默认值是content-box

例子1:请问下面div1点offsetWidth是多大？

#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}

**标准盒模型offsetWidth = (**内容宽度 width+ 内边距padding + 边框border)

可知答案是122px

例子2:如果想让div1的offsetWidth的宽度为100px，该怎么做呢？

#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px; 
box-sizing:border-box;
}

答案是将div1转为怪异盒子模型

怪异模型中

  • 内边距与边框宽度之和<width，则offsetWidth 等于 内容宽度width，但实际的内容宽度被压缩了
  • 内边距与边框宽度之和>width，则offsetWidth 等于内边距与边框宽度之和，内容宽度width被压缩为0

2.margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠；空白内容的p标签、div标签等也会重叠

请看下题，问：A和B之间的距离是多少？

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

<body>
    <p> A </p>
    <p></p>
    <p></p>
    <p> B </p>
</body>

答案：15px；

小的margin会塌陷道大的margin中，从而小的margin部叠加，只以大值为准

3.margin负值问题

margin有四种：margin-left、margin-top、margin-right、margin-bottom

  • margin-left和margin-top取负值时，分别向左和向上移动

  • margin-right取负值，自身不动，它的右边元素向左边移动

  • margin-bottom取负值，自身不动，它的下边元素向上边移动

4.BFC的理解与应用

BFC（块级格式化上下文）：一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素

形成BFC的条件有如下几种：

  • display为flex inline-block等

  • float不为none

  • position为absolute或fixed

  • overflow不是visible

BFC的应用：可以用于清除浮动

<style>
    .float{
        float:left;
    }
    #bfc{
        overflow:hidden;
    }
</style>
<body>
    <div id='bfc'>
        <img class='float' src='./a.jpg' alt='测试图片'>
        <p id='bfc'></p>
    </div>
</body>

手写clearfix

作用：清楚浮动

.clearfix{  
    /* 兼容IE低版本 */  *zoom:1;
}
.clearfix::after{   
    content:'';   
    display: table;   
    clear: both;
}

5.float布局

应用点1:三栏布局

圣杯布局、双飞翼布局

目的：

  • 中间一栏最先加载和渲染
  • 两侧宽度固定，中间一栏宽度自适应

技术总结：

  • 圣杯布局用padding，将两边留白
  • 双飞翼布局用margin，将两边留白

实现难易：圣杯布局 较 双飞翼难一些

圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-width: 600px;
        }
        #container{
            padding-left:200px;
            padding-right: 150px;
            background-color: pink;
        }
        .column{
            float: left;
        }
        .center{
            width: 100%;
            background-color: blue;
        }
        .left{
            position: relative;
            width: 200px;
            background-color: yellow;
            margin-left: -100%;
            right: 200px;
        }
        .right{
            width: 150px;
            background-color: red;
            margin-right: -150px;
        }
        #header{
            width: 100%;
            background-color: green;
        }
        #footer{
            width: 100%;
            background-color: rgb(167, 51, 155);
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="header"> this is a header</div>
    <div id="container">
        <div class="column center">center</div>
        <div class="column left">left</div>
        <div class="column right">right</div>
    </div>
    <div id="footer"> this is a footer</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-width: 710px;
        }
        .center{
            width: 100%;
            background-color: yellow;
        }
        .center-container{
            margin: 0 200px 0 200px;
            background-color: pink;
        }
        .left{
            background-color: red;
            width: 200px;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            width: 200px;
            margin-left: -200px;
        }
        .column{
            float: left;
        }
    </style>
</head>
<body>
    <div class="center column">
        <div class="center-container ">main</div>
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</body>
</html>

6.flex布局

flex布局常用语法回顾

  • flex-direction

  • justify-content

  • align-items

  • align-self

  • flex-wrap

使用flex布局画骰子

<head>
    <style>
        .box{
            width: 156px;
            height: 156px;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .box-item{
            width: 30px;
            height: 30px;
            background-color: red;
            border: 1px solid #ccc;
            border-radius: 20px;

        }
        .box-item:nth-child(2){
            align-self: center;
        }
        .box-item:nth-child(3){
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class=" box-item"></div>
        <div class=" box-item"></div>
        <div class=" box-item"></div>
    </div>
</body>

7.定位

问题1.absolute和relative分别依据什么定位？

absolute依据最近的设置了定位的父级元素进行定位，如果找不到，则依据body元素定位

relative依据自身定位

问题2.居中对齐有哪些方式？

水平居中

  • 内联元素：text-align：center；
  • 块级元素：margin：auto auto；
  • absolute元素：left:50%;margin-left:-自身宽度的一半值

垂直居中

  • 内联元素：inline-height:等于height；

  • absolute元素：top:50%;margin-top:-自身高度的一半值

  • absolute元素：top：50%；transform:translateY(-50%)

  • absolute元素：top，left，bottom，right都为0，margin：auto 不需要知道方框尺寸（不存在兼容性问题）

8.line-height继承

line-height继承有三种模式

  • 写具体数值：则子元素直接继承

  • 写比例，如2/1.5，则子元素的line-height等于子元素的font-size*该比例

  • 写百分比，如200%，则子元素的line-height等于父元素的font-size*该百分比

9.响应式

单位：

  • px，绝对长度单位，最常用

  • em，相对长度单位，相对于父元素，不常用

  • rem，相对长度单位，相对于根元素html，常用语响应式布局

响应式布局常见方案

  • 媒体查询media-query，根据不同的屏幕宽度设置根元素font-size

  • rem，基于根元素的相对单位

比rem更好的响应式布局方案是使用vh与vw

原因：rem存在阶梯性。

vh与vw原理：将网页的视口高度和宽度分别切分为100份，就是说将视口分别切分为100vh和100vw。

1vh表示该视口高度的百分之1，1vw表示该视口宽度的百分之1。

avatar
文章
阅读
粉丝