前端工程师-CSS专项练习

简介: 前端工程师-CSS专项练习

一、两种盒子模型


  • 分别为:W3C盒子模型、IE盒子模型
  • 不同点:
  • 1、W3C盒子模型,宽度(width)指content部分的宽度。在IE盒子模型中,宽度(width)表示content+padding+border这三个部分的宽度
  • 2、切换盒模型,W3C盒子模型:box-sizing: content-box,IE盒子模型:box-sizing: border-box


二、水平垂直居中有几种方式


方法一:


  • 使用绝对定位(position: absolute),然后(top: 50%;left: 50%;),
  • 再去掉margin的宽度和高度,盒子模型宽高的一半( margin-top: -150px;margin-left: -150px;),即可垂直居中
    -优点:兼容性好, 缺点:你要知道盒子模型的宽高,不然不知道margain的宽高


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>css水平垂直居中</title>
</head>
<body>
  <div class="test"></div>
</body>
<style>
  .test {
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
  }
</style>
</html>


方法二:


  • 为了解决宽高问题,CSS3推出了transform: translate(-50%, -50%)代替了margain,偏移的百分比是相对于自身大小,这就不用再推算margain的宽高啦~


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>css水平垂直居中</title>
</head>
<body>
  <div class="test"></div>
</body>
<style>
  .test {
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-top: -150px;
    margin-left: -150px; */
    transform: translate(-50%, -50%);
  }
</style>
</html>

方法三:


  • 通过绝对定位(position: absolute),然后再把上下左右(top: 0;left: 0;right: 0;bottom: 0;)全部为0,再用(margin: auto)水平垂直居中


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>css水平垂直居中</title>
</head>
<body>
  <div class="test"></div>
</body>
<style>
  .test {
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>
</html>


方法四:


  • 通过body弹性布局(display: flex),定义body的元素垂直居中(align-items: center),定义body的元素水平居中(justify-content: center


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>css水平垂直居中</title>
</head>
<body>
  <div class="test"></div>
</body>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    /*垂直居中*/
    align-items: center;
    /*水平居中*/
    justify-content: center;
  }
  .test {
    background-color: antiquewhite;
    width: 300px;
    height: 300px;
  }
</style>
</html>


方法五:


  • 通过相对定位(position: relative),然后水平居中(margin: 0 auto),再来垂直居中(top: 50%;transform: translateY(-50%)


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>css水平垂直居中</title>
</head>
<body>
  <div class="test"></div>
</body>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .test {
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
    position: relative;
    /*水平居中*/
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
</html>


三、margin塌陷如何解决

相关文章
|
1月前
|
前端开发
【面试题】金九银十,你准备好面试了吗? (30w字前端面试题总结)(CSS)
【面试题】金九银十,你准备好面试了吗? (30w字前端面试题总结)
|
1月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
|
7天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1
|
7天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
|
7天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
7 0
|
10天前
|
Web App开发 前端开发 容器
前端秘法进阶----css中那些不能说的秘密
前端秘法进阶----css中那些不能说的秘密
|
10天前
|
前端开发
前端秘法基础式(CSS)(第一卷)
前端秘法基础式(CSS)(第一卷)
|
20天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
10 0
|
24天前
|
前端开发 JavaScript API
|
30天前
|
前端开发 UED
不可或缺的前端技术之CSS选择器
CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。

热门文章

最新文章

相关产品

  • 云迁移中心