【前端自学(10)】一些基本的CSS

TimeFleeze

已于 2022-04-18 23:06:15 修改

阅读量65

点赞数

文章标签：前端 css3

于 2022-04-18 22:35:58 首次发布

本文链接：https://blog.csdn.net/Time_Freeze/article/details/124259307

版权

本文介绍了几个基本的CSS技巧，包括如何使用边框创建三角形、绘制水平线，以及实现双飞翼布局和水平垂直居中对齐。此外，还展示了如何利用伪元素`before`和`after`来创建三角箭头。这些技巧对于前端开发者在日常布局和美化网页时非常实用。

摘要由CSDN通过智能技术生成

1 一些基本的CSS

画一个三角形

.rect{
  width: 0;
  height: 0;
  border-color: transparent transparent red transparent;
  border-width: 90px;
  border-style: solid;
}
<div class="rect"></div>

画一条线

.line {
  width: 900px;
  border-bottom: 1px solid #000000;
}
<div class="line"></div>

双飞翼/圣杯

 .wrap {
   display: flex;
 }
 
 .left {
   height: 800px;
   width: 300px;
   background-color: aqua;
 }

 .main {
   height: 800px;
   flex: 1;
   background-color: green;
 }

 .right {
   height: 800px;
   width: 300px;
   background-color: red;
 }

<div class="wrap">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

水平垂直居中

 .son {
   width: 200px;
   height: 200px;
   background-color: pink;
 }

  <div class="parent">
    <div class="son"></div>
  </div>
//以下有六种方法让son水平垂直居中
//transform 父子元素宽高均不确定也适用
 .son {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

//margin 需son宽高确定
 .son {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px;
   margin-left: -100px;
 }
 
//0 0 0 0 margin:auto 父子元素宽高均不确定也适用
 .son{
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   margin:auto;
 }
 
//parent flex 需parent高度确定
.parent {
   height: 100vh;
   display:flex;
   justify-content:center;
   align-items:center;
 }

//table-cell 需parent宽高确定 
.parent {
   height: 500px;
   width: 500px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }
.son{
   display: inline-block;
 }

//grid 需parent高度确定
.parent {
   display: grid;
   height: 500px;
 }
.son{
   align-self: center; 
   justify-self: center; 
 }

文本水平垂直居中

//行高 = parent的height
.parent {
   text-align: center;
   line-height: 100vh;
 }
 <div class="parent">测试</div>

//flex 同上 这里省略
//注意writing-mode: vertical-rl;可以写竖向文字

before/after/content

/* 画三角箭头（两个三角形） */
.top {
   position: absolute;
   right: 60px;
   top: calc(50% - 25px);
 }

.top:before,
.top:after {
   position: absolute;
   content: ""; //不设置这个空content就没有后面的border
   border-bottom: 20px transparent solid;
   border-right: 20px transparent solid;
   border-top: 20px transparent solid; //不设置solid等style的话则默认为none,就没有border
 }

 .top:after {
   border-left: 40px red solid; //底和高不同的三角形的画法
 }

 .top:before {
   left: 15px; //与红三角间距15px
   border-left: 40px green solid;
 }
<body>
<div class="top"></div>
</body>

2 总结

上面是一些css的基本内容，复习用

TimeFleeze

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端自学(10)】一些基本的CSS

文章目录1 一些基本的CSS2 总结1 一些基本的CSS画一个三角形.rect{ width: 0; height: 0; border-color: transparent transparent red transparent; border-width: 90px; border-style: solid;}<div class="rect"></div>画一条线.line { width: 900px; border-bo
复制链接

扫一扫