css基础

最新推荐文章于 2024-08-14 12:22:11 发布

yecengxiangshi0426

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量893

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yecengxiangshi0426/article/details/117461995

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.css垂直水平居中

(1) 父容器有宽高

.father {
  position:relative;
  width:200px;
  height:200px;
}
.box {
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
}

(2) 父容器不知道宽高，兼容性不好

.father {
  position:relative;
}
.box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

(3)弹性布局，display:flex，兼容性不太好，移动端经常使用

.father {
  display:flex;
  justify-content:center;
  align-items:center;
}

(4)js实现

<div id="box" style="text-align:center"></div>
<script>
let html = document.documentElement,
    winW = html.clientWidth,
    winH = html.clientHeight,
    //box = document.getElementById("box"), 可以不用元素，可以直接用id
    boxW = box.offsetWidth,
    boxH = box.offsetHeight;
box.style.position = "absolute";
box.style.top = (winH - boxH)/2 + "px";
box.style.left = (winW - boxW)/2 + "px";
</script>

(5)dispaly:table-cell

body {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  //固定宽高
  width:500px;
  height:500px;
}

.box {
 dispaly:inline-box;
}

2.css3中的盒子模型

标准盒子模型：box-sizing:content-box

宽高指的是内容区域的宽高

标准盒子模型

怪异盒模型(IE盒子模型)：box-sizing:border-box

宽高指的是border+padding+content区域的宽高

IE盒子模型

flex模型

多列布局，用于pad上文章排列

3.几大经典布局方案

圣杯布局：浮动和负margin

<body>
  <div class="container">
    <div class="content"></div>
    <div class="left"></div>
    <div class="right></div>
  </div>
  
</body>

双飞翼布局：左右固定，中间自适应

<body>
  <style>
   .container{
     display:flex;
     justify-content:space-between;
     height:100%;
   }
   .left,.right {
     flex: 0 0 200px;
     height:200px;
     
   }
   .content {
     flex:1;
     min-height:400px;
   }
  </style>
  <div class="container">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right></div>
</body>

flex布局

<body>
  <style>
   .container{
     display:flex;
     justify-content:space-between;
     height:100%;
   }
   .left,.right {
     flex: 0 0 200px;
     height:200px;
   }
   .content {
     flex:1;
     min-height:400px;
   }
  </style>
  <div class="container">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right></div>
  </div>
 </body>

4.移动端响应式布局开发的三大方案

media

rem

flex

vh/vw

5.z-index的工作原理，适用范围？

文档流

定位

6.不考虑其他因素，下面哪种的渲染性能比较高?

.box a { ...}

a { ...}

第二种高，浏览器渲染机制是css选择器从右向左查询，先找所有a，再找box下的所有a

7.html5的理解

yecengxiangshi0426

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础

1.css垂直水平居中.father { position:relative; width:200px; height:200px;}.box { position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;}
复制链接

扫一扫

专栏目录