前端题目杂记

最新推荐文章于 2024-02-18 00:33:43 发布

Symiac

最新推荐文章于 2024-02-18 00:33:43 发布

阅读量244

点赞数

分类专栏：前端练习题目文章标签：前端面试

本文链接：https://blog.youkuaiyun.com/Symiac/article/details/93767621

版权

前端练习题目专栏收录该内容

4 篇文章

订阅专栏

1.css实现三角形

.one {

width: 0;

height: 0;

border-top: 200px solid red;

border-bottom: 200px solid blue;

border-left: 200px solid #FFFFFF;

border-right: 200px solid #FFFFFF;

}

2.css布局的应用场景，三栏布局（固定左右，中间自动）

<!DOCTYPE HTML>
<html>
<head>
<style>

.outer{
position:relative;
background:#DCDCDC; /*灰*/
}
.left{
width:200px;
height:400px;
position:absolute;
left:0;
background:#ff9900;; /*橘色*/
}
.middle{
height:100%;
margin-left:200px; /*左子元素宽度*/
margin-right:300px; /*右子元素宽度*/
background:#fff700; /*黄色*/
}
.right{
width:300px;
height:300px;
position:absolute;
right:0;
background:#93ec7c; /*绿色*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left">left</div>
<div class="inner right">right</div>
<div class="inner middle">middle</div>
</div>
</body>
</html>

3.实现垂直居中

（1）单行文本垂直居中

#child {
line-height: 200px;
}

（2）多行文本垂直居中

父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中

html：

<div class="span_box bg_box">
<span class="words_span">
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
</span>
</div>

css：
.bg_box {
   width: 300px;
   height: 300px;
   margin-top: 20px;
   background-color: #BBBBBB;
}

.span_box {
   display: table;
}
.words_span {
   display: table-cell;
   vertical-align: middle;
}

（3）图片垂直居中

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

（4）基于绝对定位的pc端实现

.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

（5）其他

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug：

1
2
3

#child {
display: inline-block;
}

块级元素

css

#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

总结：关于垂直居中，有很多大佬都总结了好多，我看了也没记住，所以我选了自己用到的几个～～