将css样式盒模型转化为简单的事物理解

这是一篇关于我个人的理解

这是一篇关于如何简单的理解前端css样式的文章;

对于初学前端css样式的学生来说,理解能力好的当然不是问题,

但对于理解能力相对弱一点的同学来说就需要一些时间来理解或者 一些理解性的开导了;

这个就是我们一般打开DW新建的一个HTML,我们可以先这样看——

我们把这个比喻成一张“画纸”,一张白纸,然后再在上面画描绘图案(代码css样式);

●其中<html></html>标签相当于是纸,也就是网页了;

●其中<head> </head>我们就知道在这个下面可以导入css文件就好了;<title>里面就是你的项目名称

●最后就是我们的<body> </body>标签了,我们也把他当成一张纸,但是张纸是用来画的纸;

下面来简单的介绍一下怎么去“画”

一.我们都知道,css样式样式是通过在<div>标签里写代码来完成的;

二.而我们知道<div>标签是一个块级元素,怎么理解:就相当于是一个区域,我们简单理解就是div就是用来划分区域的一个标签,

三.一个div相当于一个区域,区域大小就看你自己设定的css样式大小了,比如下面的div1/2/3,就是由3个div(块)组成的。而宽度我们设置的是宽100%。高250px;颜色红/蓝/黄,这个就是我们分的3块区域了!

☆★css我们可以这样来理解,就是在我们上面划分的区域画一些东西,在代码里面就是在某个区域添加想要的图标,图片和一些按钮什么的;

如一下;我们在每一块上面写一个“名字”,在代码里面就是类名了<div class="aa">,这个意思就是我们给区域1取一个名字叫“aa”,再通过css界面用一个小点选择到aa,也就是

------------------我们想要在一个叫aa的区域内涂一片红色的长方形,他的宽为整张纸的100%,高度是250px;-----------------------

当然我们的“画”就是通过代码来说的,我们以书面的方式说出我们需要的东西,css就是我们的想法,转化成了代码的方式来进行描述,当然表达对代码不熟悉也只有通过自己勤劳的双手去做笔记咯;

我们需要些的更详细的样式当然离不开自己的分析能力了,首先我们要明确的知道自己划分的区域,其次就是什么区域该有什么样的东西,

而我们写更详细的样式就是类似于这样的反复,在区域里再划分区域,然后再给区域取个名字,再在css里面通过代码的方式去描述样式,

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值