快30了,转行前端还来得及吗?

发布网友发布时间：2022-05-01 16:40

共4个回答

懂视网时间：2022-05-14 09:50

如何设置水平居中？

分两种情况行内元素与块级元素

1.行内元素（如图片文字）

 div.textcenter{
 text-align:center;
 }
 <div class="textcenter">hello joe!</div>

2.块级元素

块级元素的水平居中又分为两种定宽块状元素和非定宽块状元素

定宽块状元素（即块状元素的width值是定值）：

可以通过块级元素的左右margin为auto来实现中如下

 div{
 border:1px solid red;
 width:500px;/*定宽*/
 margin:30px auto;/*margin-right margin-left为auto*/
 }
 <div>I am middle placed.</div>

不定宽块状元素（即宽度width不确定比如网页上的分页导航）

对于不定宽元素实现水平居中有三种方法(常用)：

第一种方法：利用table标签

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

 table{
 margin: 0 auto;
 }
 ul{list-style:none;/*将小圆点去掉*/}
 li{float:left;display:inline;margin-right:5px;}
 <table>
 <tbody>
  <tr> <td>
  <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
  <ul>
  </td></tr>
 </tbody>
 </table>

第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如下例子：

 .container{
 text-align:center;
 }
 .container ul{
 display:inine;
 list-style:none;
 padding:0;
 margin:0;
 }
 .container li{
 display:inline;
 margin-right:8px;
 }

与第一种方法相比不用添加无语义标签（table）但是由于li被视作行内元素，所以无法为其设定height,width等属性

第三种方法：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

 .container{
 float:left;
 position:relative;
 left:50%;
 }
 .container ul{
 list-style:none;
 margin:0;
 padding:0;
 position:relative;
 left:-50%;
 }
 .container li{
 float:left;
 display:inline;
 margin-right:8px;
 }
 <div class="container">
 <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
 </ul>
 </div>

2.如何设置垂直居中？

分为两种情况，父元素高度确定的单行文本，父元素高度确定的多行文本。

单行文本：通过设置line-height 与 height一致实现垂直居中

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

.container{
 line-height:100px;
 height:100px;
 background:purple;
}
<div class="container"><h1>Hello World!</div>

CSS进阶之CSS的技巧分享

但是该方法有一个弊端：当文字的长度长于块的宽度的时候，内容就脱离了块。

多行文本：

有两种方法：

使用table标签使用vertical-align:middle（注意td标签默认就设置了vertical-align:middle

所以不需要我们手动设置。

table td{
height:500px;
background:#purple;
}
<table>
 <tbody>
 <tr><td>
 <div>
 I am centered<br>
 I am centered<br>
 I am centered<br>
 I am centered<br>
 I am centered<br>
 </div>
 </tr></tr>
 </tbody>
</table>

CSS进阶之CSS的技巧分享

最后一个技巧

隐式的改变display的属性当为元素设置以下两个语句之一的话：

float:right 或者float:right

position:absolute

元素的display类型就会自动变为display:inline-block 此时就可以设置元素的宽和高了例如

<style type="text/css">
.container a{
 position:absolute;
 width:100px;
 height:50px;
 background:purple;
}
</style>
<body>
 <div class="container">
 <a href="#">
  I am CEO,you son of bitch.
 </a>
 </div>
</body>

CSS进阶之CSS的技巧分享

热心网友时间：2022-05-14 06:58

年龄不是主要问题，活到老学到老，一切都不算晚。
任何时候，只要你想学习，都是没有问题的。

WEB前端入门简单，只需要从HTML/CSS/JS去入手就可以了。
活到老学到老嘛，多少岁都可以参加培训的。
培训的虽然大多为应届生，但也有年龄大一些的人在追求着新的知识。
在这个世界上厉害的人有很多，不必妄自菲薄；如果真的下定决心去踏进这行，那就做好万全准备，为自己的将来打好基础。
补充书籍，可以看看，打一下基础：
《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。
《CSS权威指南(第三版)》，这本书作为 CSS 的经典著作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。
《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。
《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。
《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。
《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。

热心网友时间：2022-05-14 08:16

我实话说，30岁学前端不晚，但是30岁准备转行做前端，就有点不太适合了。

以你现在这个年龄，出去以初级开发的身份去面试，根本不占优势，而且编程这一行，兴趣不浓厚的话根本走不下去。我有个朋友，也是30岁，转行前端干了三年，现在感觉前途渺茫，架构师级别自身能力不够，转产品沟通能力又不擅长，而且现在技术日新月异，没有长期自学的能力很难往下发展，当初以为掌握三大框架和node就能接近山顶了，后面才发现，这只是万丈高楼的第一层。

不过如果你并不是把前端工作当做你的主业去发展，那就另当别论了。

热心网友时间：2022-05-14 10:08

你现在做的是相关开发行业么