淘先锋技术网

首页 1 2 3 4 5 6 7

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

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

1、HTML是什么鬼？

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

例如：大家好

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

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<style type="text/css">
	div {
		height:80px;
		border: 2px dashed red;
	}
	.one_div{
		text-align: center;
	}
</style>
</head>
<body>
	<div class="one_div"> 
        大家好
	</div>
</body>

代码1(显示如下)

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

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

a元素：放文本内容

img元素：用来放图片

特征： 1、标签都是成对出现；

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

1.1 很重要的概念

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

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

宽度只与内容有关

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

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

包含行内元素和块级元素（万能）
4常用的元素a\span\img\input\select\lablediv\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;

}        

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<style type="text/css">
	div {
		height:80px;
		border: 2px dashed red;
	}
	.one_div{
		text-align: center;
	}
	.box{
		width:100%;
		height:100%;
		display:flex;
		justify-content:center;
	}
</style>
</head>
<body>
	<div class="one_div"> 
        大家好
	</div>

	<div class="box" > 
        <div class="say">水平居中</div>
        <div class="say">我也居中</div>
	</div>
</body>

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

块级元素水平居中处理（二）

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

 <div style="text-align: center"> 
        <div style="display: inline-block">水平居中</div>
        <div style="display: inline-block">我也水平居中</div>
        <div style="display: inline-block">我也抽个人热闹</div>
    </div>

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

3.2 垂直居中

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

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

 代码如下：

    <div style="height:100px"> 
        <div style="line-height:100px;border: none">优秀的人都需要很长时间的自我修改</div>
    </div>

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

2、采用flex布局垂直居中

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

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

    <div style="height:100px;display:flex;flex-direction: column;justify-content: center;">
        <div style="border: none;height:10px">优秀的人都需要很长时间的自我修改[flex]</div>
    </div>

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

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

场景：不知道元素高度

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

     <div style="height:100px;display: table;">
        <div style="border: none;height:10px;display:table-cell;vertical-align: middle;">优秀的人都需要很长时间的自我修改[vertical-align]</div>
    </div>

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

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

<div style="position: relative;height:100px;display: table;">
        <div style="border: none;height:20px;width:500px;position: absolute;top:50%;margin-top: -10px;">技术人员的未来究竟在哪里？</div></div>

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

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

     <div style="position: relative;height:100px;display: table;">
        <div style="position: absolute;width:300px;top:50%;transform: translateY(-50%);">每天遇到的人都应该像贵人一样对待</div>
    </div>

3.3 水平居中+垂直居中

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

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

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

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<style type="text/css">
.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 }
</style>
</head>
<body>

<div class ='page'>
    <div class="child">世界只有妈妈的好，有妈的孩子像块宝</div>
</div>
</body>

2、FLX布局方式

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<style type="text/css">
.box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 200px;
    width: 500px;
    border: 1px solid red;
}
</style>
</head>
<body>


<div class ='box'>
    <div>有朋来自远方</div>
</div>

</body>

 感谢阅读；

感谢！

欢迎一起讨论；@smartcat01