No.3小白的HTML+CSS心得篇
A--看的东西多了总会出现好多模糊不清的又长的很像的的词语 今天对此进行区别分析下
1. align 与 text-align的区别
align 在W3Cschool中是这样解释的 ----align 属性规定表格相对于周围元素的对齐方式。 通常来说,HTML 表格的前后都会出现折行。通过运用 align 属性,可实现其他 HTML 元素围绕表格的效果。
text-align 在CSS2.0中是这样解释的 ---设置或检索对象中文本的对齐方式。
用自己的话描述就是
align 作为HTML标签属性使用,一般表格中应用较多
text-align 是 css 种的属性
2.bgcolor与background的区别
W3Cschool中的描述
背景颜色(Bgcolor)
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
背景(Background)
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。
B--做了task1—2的体会最深的就是如何布局是这个任务的核心,先不说里面的CSS样式的设置,总结下布局问题
1、传统的页面布局方式,其实就是使用table 表格来实现,充分利用表格单元格的原理。
2、现在的布局都是从table演进成使用div来设置,但其布局思路是一样的,将网页的每个模块看作是table的单元格,排版思路抓住这两点:
(1)从大到小排版
把一个整体划分成各个小模块,细小划 套用一个词 叫 逐步求精
(2)从左到右,从上到小排版
C-- 继续补充
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
1、块级元素特点:
(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
(2)元素的高度、宽度、行高以及顶和底边距都可设置。
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2、内联元素特点:
(1)和其他元素都在一行上;
(2)元素的高度、宽度及顶部和底部边距不可设置;
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变。
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3、内联块状元素特点:
(1)和其他元素都在一行上;
(2)元素的高度、宽度、行高以及顶和底边距都可设置
常用的内联块状元素有:
<img>、<input>
三者之间的转换:
将块级元素设置为内联元素 display:inline
将元素设置为内联块状元素 display:inline-block
将内联元素转换为块状元素 display:block
No.3小白的HTML+CSS心得篇的更多相关文章
- No.1小白的HTML+CSS心得篇
一个web前端的小白,听前辈说写好笔记很关键,so 特此用博客来开始记录自己的旅程——Web之路 最近几天看的HTML 1.纠正一个认知错误 “HTML是一种编程语言” ————(错) HTML ( ...
- No.4小白的HTML+CSS心得篇
书读百遍,其义自见 遵照这句话 今天再次重新把慕课网的HTML+CSS看了一遍,再次阅读感受不再是那么陌生,从而心里默默地喜欢上了这种方式,坚持. 好了,开始今天的收获小总结 1.html中,表单&l ...
- No.2小白的HTML+CSS心得篇
今天要强调的重点是分析把握好HTML标签的两个方面: 1.标签的用途(用途指的是用来干什么,有什么作用)在专业术语叫作 语义化. 举个列子:<br/> 换行的作用 见了它就明白它的语义就是 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 小白学Docker之基础篇
系列文章: 小白学Docker之基础篇 小白学Docker之Compose 小白学Docker之Swarm PS: 以下是个人作为新手小白学习docker的笔记总结 1. docker是什么 百科上的 ...
- CSS效果篇--纯CSS+HTML实现checkbox的思路与实例
checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
- 我的web前端自学之路-心得篇:我为什么要学习web前端?
时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...
随机推荐
- Android WindowManager 小结
Android---系统服务之 ---WindowManager WindowManager是Android中一个重要的服务(Service ).WindowManager Service 是全局的, ...
- iOS 使用xib创建cell的两种初始化方式
曾几何时,被自己坑过,为了防止下次继续被自己坑,我决定了!在每个我能看到的地方,都把问题写一遍!!! 方法一: ? 1 2 3 4 第一步: [self.collectionView register ...
- 转:Grunt:任务自动管理工具
Grunt:任务自动管理工具 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:gru ...
- ComboBox控件绑定数据源
最近在研究机房收费系统的组合查询的方法时,看到了ComboBox控件可以进行数据绑定,我觉得这个功能真的很不错,可以给我省去很多的麻烦. 下面是我组合查询窗体界面 一.数据转换方法 现在我们开看一下我 ...
- 使用自定义脚本扩展程序自动执行 VM 自定义任务
在 Build 开发者大会上推出VM 扩展程序的其中一个称为"自定义脚本扩展程序",它支持 PowerShell.如果这是您第一次访问这些博客,可能需要查看以前的博客,请单击 ...
- java的抽象类
现实世界中,人们表征世界时,会把现实世界中的很多类具有相同特征的事物归为一个抽象类.比如水果是许多植物果实的总称,我们可以定义一个苹果类.定义一个西瓜类,可以实例化一个苹果对象,可以实例化一个西瓜对象 ...
- php正则表达式的基本语法
简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例 如,vi编辑器,Perl或PHP脚本语言,以及awk或sed sh ...
- SGU 242 Student's Morning 网络流(水
题目链接:contest=0&problem=242">点击打开链接 题意: 给定n个人,m个终点 以下n行表示每一个人能够去m个点. 每一个人仅仅能去一个点. 输出随意一个方 ...
- Node.js、Ionic、Cordova、AngualrJS安装
1.安装node.js: 从node.js官网下载node.js安装包,node.js下载地址:https://nodejs.org/en/download/,选择对应系统的安装下载后进行安装.(注: ...
- JavaSE学习总结第26天_网络编程
26.01 网络编程概述 网络编程:就是用来实现网络互连的不同计算机上运行的程序间可以进行数据交换. 26.02 网络模型概述和图解 计算机网络之间以何种规则进行通信,就是网络模型研究问题. ...