> 文档中心 > 前端开发入门就这一篇文章

前端开发入门就这一篇文章


本文涉及最最基础的HTML+CSS

1、HTML是什么鬼?

大白话:就是用成对尖括号(类似:) 表示内容结构一组方法,就是搭一个骨架骨架(元素)中才放入各种文本、图片、视频;

例如:大家好

我们可以用一下格式展现,其实任何网页都类似如下结构;

div {height:80px;border: 2px dashed red;}.one_div{text-align: center;}
大家好

代码1(显示如下)

具体用哪个标签,你可以直接查询手册,没必要都记住,但是请记住这个三个标签(div,a,img),这三个家伙非常非常常用,其它的都可以参考这三个处理。

div元素:用来构建页面结构

a元素:放文本内容

img元素:用来放图片

特征: 1、标签都是成对出现;

            2、标准上来说html、head 和 body 这个3个最最核心的标签;

1.1 很重要的概念

行级元素和块级元素,下表是两类元素的默认行为

序号 区别 行级元素 块级元素
1  是否占一行? 可以和其它元素公同占一行 独自占一行,包括手机上也是
2 宽度如何定义?

宽度只与内容有关

默认等于屏幕宽度,可设置
3 内部可放什么内容?

行内元素只能容纳文本或者其他行内元素

包含行内元素和块级元素(万能)
4 常用的元素 a\span\img\input\select\lable div\p\form\table\p\h\ul\li\ol

 以上表格你打死也有记住,否则就没法搞了。

2、CSS是什么?

大白话:通常通过控制标签的格式(位置,颜色,大小,行距,边框,层级关系,背景。。。。),然后间接的控制内容的呈现,改变元素的默认行为,不太准确,但是可以凑合这么说。

没有css 内容呈现就乱了,不好看,于是css 编写在前端开发中占据了大多数时间(90%),当然书写JS(页面逻辑等等)也需要花费时间,但不是本文讨论的。

3、css编程

3.1 内容定位

大白话:我要如何将内容呈现在窗口的(PC端浏览器屏幕上,手机端屏幕上)某个位置上。多个标签是可以嵌套的,这个先记住吧!

如下图

问题来了: 这个【蓝色的】div 如何被放到了屏幕中间?就是我们说的定位。

居中估计是最需要掌握的;

     

 在人们印象中居中 = 水平居中+垂直居中,这个在商务谈判中尤其注意,甲方说居中多半都是这个,而技术上的居中其实由三种形态,但是你有义务同甲方确认,应为你在甲方的眼中是专业的。这里的甲方也是是实际的甲方,也许是项目经理。

3.1 水平居中

      行级元素水平居中处理

       用:text-align: center; 如果是单行:需要设置行高:line-height:height

      块级级元素水平居中处理(一)

        居中定位有多种方式,每种方式都有它特的使用场景,你必须熟练的掌握一种方法。

        1、利用弹性布局(flex),实现水平居中,其中justify-content用于设置弹性盒子元素在主轴(横向)方向上的对齐方式,关于弹性布局,我希望大家可以看看阮一峰大牛写的(Flex 布局教程:语法篇 - 阮一峰的网络日志

       

 在class="box" 这个父级标签中加了,子元素的宽度没有设置,由于采用了flex,模式子元素宽度转换成由内容决定,这个非常难以理解。

.box{

        display:flex; justify-content:center;

}        

div {height:80px;border: 2px dashed red;}.one_div{text-align: center;}.box{width:100%;height:100%;display:flex;justify-content:center;}
大家好
水平居中
我也居中

class=“say” 这个元素宽度由内容决定(文字字体,采用了浏览器默认的,因为我没有设置),高度80px

块级元素水平居中处理(二)

 将块级元素显示为行级元素:通过display: inline-block;              

 

 
       

水平居中

        

我也水平居中

        

我也抽个人热闹

    

当然,你也可以采用父亲模块为flex 布局方案,也是可以,参考

3.2 垂直居中

1、方法1:块级元素垂直居中让块的高度=行高实现垂直居中,必须记住

场景:知道显示元素的高度

 代码如下:

    

 
       

优秀的人都需要很长时间的自我修改

    

上面代码中的:border: none 对居中没有效果,注意是为了去掉红色的边框;

2、采用flex布局垂直居中

采用:display:flex;flex-direction: column;justify-content: center;

场景:不知道显示元素的高度或者知道元素的高度

    

        

优秀的人都需要很长时间的自我修改[flex]

    

上面代码中的:border: none;对居中没有效果,height:10px ,的原因是我在全局中设置了div高度为80px;这里我希望内容的高度就10px就可以了;

3、将div转换成table元素垂直居中,这个方式不常用,你了解一下就好了

场景:不知道元素高度

利用表布局的vertical-align: middle可以实现子元素的垂直居中

     

        

优秀的人都需要很长时间的自我修改[vertical-align]

    

4、绝对定位方式:top:50%

如果知道显示元素的高度和宽度,你可以使用这个方式,有时候还就是采用这个方式

        

技术人员的未来究竟在哪里?

5、采用Y轴移动方式:常用,

场景:不知道显示元素的高度,特别是在手机端,原因手机端宽度都是知道的,但是往往高度不知道

     

        

每天遇到的人都应该像贵人一样对待

    

3.3 水平居中+垂直居中

这个是非常常见的日常场景了,是必须掌握的,如果不会这个,我相信你就不能做前端了;

1、未知宽高元素水平垂直居中

方法:利用2D变换,在水平和垂直方向都反向平移宽高的一半,从而使元素水平垂直居中

.page {position: relative; height: 100vh; width:100vw; border: 2px dashed red; }
.child {position: absolute; width:50vw; top: 50%; left: 50%; transform: translate(-50%, -50%);font-size:50px }

    

世界只有妈妈的好,有妈的孩子像块宝

2、FLX布局方式

.box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 200px;
    width: 500px;
    border: 1px solid red;
}

    

有朋来自远方

 感谢阅读;

感谢!

欢迎一起讨论;@smartcat01