2.HTML、CSS初识&盒子模型详解&行高理解

最新推荐文章于 2024-08-06 14:46:11 发布

无足舞者

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量1.8k

点赞数

分类专栏：前端工程师【基础篇】文章标签： css html 行高 css复合属性前端开发工具

本文链接：https://blog.csdn.net/u010567918/article/details/79217555

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

什么是语言？

1. 语言是一个沟通工具；

2. 人与人之间的沟通交流我们会用到语言，比如：汉语、英语…… ；

3. 作为前端工程师，要与浏览器沟通交流，就要用到浏览器所能识别的语言。

浏览器 3大语言

1. html (Hypertext Markup Language) 超文本标记语言。

a) 理解为一栋大厦的钢筋水泥骨架

2. css (Cascading Style Sheets) 层叠样式表。

a) 理解为给一栋大厦粉刷、铺地板等装潢

3. js (javascript) 行为

a) 理解为一栋大厦的物业，如给这栋大厦供上电梯，供上水等

常用开发工具

1. Adobe Dreamweaver CS6

a) Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。

2. Notepad++（推荐）

a) 本人很喜欢这个工具，它轻量级，而且有很好的html结构辅助作用，还免费。

3. IntelliJ IDEA （推荐）

a) 是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。免费版只支持Java等极少数语言。

4. HBuilder

a) HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。

b) 快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

c) 听说手机端可以用。

html代码初阶

提高html语言认知

1. 块 = box = <div></div>

a) 中文的块就是”块”

b) 英文的块用”box”表示

c) html 的块用 “<div></div>”表示

2. 一个块，宽度是300像素，高度是200像素，背景红色

a) 中文表示就是“一个块，宽度是300像素，高度是200像素，背景红色”

b) 翻译成html语言为:

html语法初识

1. 网页是由html元素组成，元素是由一个开始和一个结束标签组成或一个独立标签

2. 元素必须闭合

3. 元素可以嵌套，但不能交叉

4. html元素通常小写

html基本骨架

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8”/>
    <title>网页标题</title>
  </head>
  <body>

     网页主体内容

  </body>
</html>

html骨架元素介绍

1. 文档声明：<!DOCTYPE html> , “!”是注意/声明的意思

a) 此声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

b) <!DOCTYPE> 声明不是 HTML标签；它是指示 web浏览器关于页面使用哪个 HTML版本进行编写的指令。

c) 在 HTML 4.01 中，<!DOCTYPE> 声明引用DTD，因为HTML 4.01 基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。

i. SGML ：标准通用标记语言（以下简称“通用标言”），是一种定义电子文档结构和描述其内容的国际标准语言

d) HTML5 不基于 SGML，所以不需要引用DTD。

e) 请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

f) HTML 4.01 与 HTML5之间的差异

i. 在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在HTML5 中只有一种：

<!DOCTYPE html> 。

g) 声明没有结束标签。

h) 声明对大小写不敏感。

2. 根元素： <html></html> ,其他元素都包含在此根元素里。

3. 头元素： <head></head> ,包含一些此html文档的重要属性，如：编码格式，标题等。

4. 编码格式：<meta charset=”utf-8”/>

a) utf-8编码是国际标准。

b) 用于告诉浏览器用utf-8编码解释。

5. 标题元素： <title></title>，此元素包含此网页的标题，是头元素的子元素。

6. 主体元素：<body></body> ,页面中显示的内容都包含在此元素里。

html注释

1.

a) 注意 : “”跟被注释内容至少留一个空格，不留空格有出错的可能。

css样式初阶

css语法初识

1. 除了行间样式以外，一般一条css语句由两个部分构成：

a) 选择器

b) 花括号

i. 花括号里存放一到多条键值对 :

1. 键和值之间用”:”隔开；键通常称作属性，值也就是属性值了。

2. 多个键值对之间用 “;”隔开

2. 例：#box{width:300px;height:200px;background:red;}

样式的3个位置

1. 行间样式 / 内嵌样式

a) 如：<div style="width:300px;height:200px;background:red;"></div>

2. 内部样式

a) 用<style></style>元素包裹起来的样式

i. 内部样式必须跟选择器结合使用才能起效果。

ii. 下面结合id选择器一起来一个代码案例

1. “id”好比人的身份证是唯一的，id选择器用“#”表示，不要问为什么用“#”表示，就像不要问为什么“块”表示块一样

<!DOCTYPE html>

<html>

<head>

<title>无标题文档</title>

<style>

#box{width:300px;height:200px;background:red;}

</style>

</head>

<body>

</body>

</html>

3. 外部样式 （推荐）

a) 分两步

i. 单独写一个样式文件以“.css”为扩展名，里面直接写样式代码。

ii. 页面引入样式文件，引入语法 :

1. <link href="style.css" rel="stylesheet"/>

2. 一般link标签放在头元素中，便于维护，方便查找

css 注释

1. /* 注释内容 */

a) 注意 : “/*” 或 “*/”跟被注释内容至少留一个空格，不留空格有出错的可能。

css常见样式

css结构样式

width （宽）

height （高）

background （背景）[复合属性]

1. background是一个复合属性

a) 所谓复合属性是指一个属性对应多个属性值，值与值之间用空格隔开。

2. background详解1（控制背景图出现的次数）

a) div{width:300px; height:200px; background:blue;}

i. 会使div块宽为300像素，高为200像素，背景为蓝色

b) div{width:300px; height:200px; background:blue url(icon.gif);}

i. icon.gif图片会铺满整个盒子

c) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat;}

i. icon.gif图片出现一次不会重复

d) div{width:300px; height:200px; background:blue url(icon.gif) repeat-x ;}

i. icon.gif图片会在x轴上重复铺满一行

e) div{width:300px; height:200px; background:blue url(icon.gif) repeat-y ;}

i. icon.gif图片会在y轴上重复铺满一列

3. background详解2（控制背景图位置）

a) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat 10px 50px ;}

i. icon.gif图片会距离左上角往右移动10像素（X轴），往下移动50像素（Y轴）

b) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat -10px 50px ;}

i. icon.gif图片会距离左上角往右移动-10像素（X轴），往下移动50像素（Y轴）

c) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat 0px 0px ;}

i. 等价div{width:300px; height:200px; background:blue url(icon.gif) no-repeat 0 0 ;}

ii. 等价div{width:300px; height:200px; background:blue url(icon.gif) no-repeat ;}

iii. 其实默认就是0px 0px，即左上角，能简写就要简写，这样客户端就少下载一些代码，达到提高速度。

d) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat 10% 20% ; }

i. icon.gif图片在盒子距离左上角x轴上百分之10的地方，y轴上百分之20的地方

ii. 这种百分数形式很少用。

4. background详解3（背景图居中）

a) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat center 0 ;}

i. center是居中的意思

ii. 这里表示x轴上水平居中（这种方式不受背景所在盒子的宽度影响，如果用像素就不好控制，会受到宽度变化影响）

b) div{width:300px; height:200px; background:blue url(icon.gif) no-repeat centercenter ;}

i. 水平和垂直居中，即在盒子中间

5. background详解4（编写规则）

a) background属性值的书写顺序其实随意，只要保证属性值之间有空格即可。

b) 下面几种都是等价的

i. div{width:300px; height:200px; background:blue url(icon.gif) no-repeat center top ;}

ii. div{width:300px; height:200px; background:url(icon.gif) no-repeat center top blue ; }

iii. div{width:300px; height:200px; background:url(icon.gif) center top no-repeat blue ; }

6. background详解5（fixed）

a) fixed属性值表示固定

b) body{ height:1500px; background:blue url(icon.gif) no-repeat center top fixed ;}

i. 背景图片会始终停留在盒子顶部水平居中的位置不论页面如何拖动

ii. 拆分后如下（两者等价，虽然等价，但推荐使用上面简写的，代码少，客户端加载速度快，前端要做到代码尽量精简）

body{

height: 1500px;

background-attachment: fixed; /* 背景是否滚动 */

background-color: blue; /* 背景颜色 */

background-image: url(icon.jpg); /* 背景图片 */

background-repeat: no-repeat; /* 背景图片是否重复 */

background-position: center top; /* 背景图位置 */

}

border （边框）[复合属性]

1. 实例

#box{

width:400px;

height:200px;

border:10px solid red ; /* 10像素实线红色边框*/

}

b) “border:10px solid red”复合属性可以拆分出下面12条

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 10px;

border-left-width: 10px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: red;

border-right-color: red;

border-bottom-color: red;

border-left-color: red;

2. 关于边框类型solid、dashed、dotted

a) solid （实线）各个浏览器都支持。[常用]

b) dashed（虚线）各个浏览器显示差异不是很大。

c) dotted（点线）IE是圆点线，谷歌是方点线，1像素的点线实际上看不出区别，所以1像素点线很常用，另外IE6对点线是不支持的，会呈现出虚线的感觉，一节一节的，这个问题没有解决方案的。[常用]

3. 特殊案例

a) 案例1

i. 效果

ii. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box{

width: 300px;

height: 200px;

border-top:100px solid yellow;

border-right:100px solid red;

border-bottom:100px solid green ;

border-left:100px solid blue;

}

</style>

</head>

<body>

<div id="box">

块

</div>

</body>

</html>

b) 案例2

i. 效果

ii. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box{

width: 0 ;

height: 0 ;

border-top:100px solid yellow;

border-right:100px solid red;

border-bottom:100px solid green ;

border-left:100px solid blue;

}

</style>

</head>

<body>

<div id="box">

块

</div>

</body>

</html>

c) 案例3

i. 效果

ii. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box{

width: 0 ;

height: 0 ;

border-top:100px solid white;

border-right:100px solid red;

border-bottom:100px solid green ;

border-left:100px solid blue;

}

</style>

</head>

<body>

块

</div>

</body>

</html>

padding （内边距）[复合属性]

1. 上右下左

a) 顺时针，这门语言是外国人发明的，外国人喜欢用顺时针来指定方位。

i. 如：美国大片中经常出现几点钟方向这个词。

2. 内边距是一个严格的复合属性

a) 复合的顺序是有一定的要求的，必须按照上右下左的顺序进行复合。

3. 内容距盒子边框的距离叫做内边距。

4. 内边距相当于给一个盒子加了填充厚度，会影响盒子大小。

5. 当我们给一个盒子添加了内边距，如果希望这个盒子大小不发生改变，就需要在这个盒子对应的宽高上进行相应的修改。

6. 实例

a) 为box盒子顶部填充30像素的内边距。

7. #box{width:300px; height:200px; border:1px solid #000; padding-top:30px;}

i. box盒子实际高度为232像素

8. 复合拆分

a) 复合的（推荐）

#box{

width:300px;

height:170px;

border:1px solid #000;

padding:30px 50px 60px 20px ;

}

b) 拆分的

#box{

width:300px;

height:170px;

border:1px solid #000;

padding-top:30px;

padding-right:50px;

padding-bottom:60px;

padding-left:20px;

}

9. padding复合详解

a) “padding : 30px” （一个值）

i. 表示上右下左内边距都是30像素。

b) “padding : 30px 50px” （两个值）

i. 表示上下内边距都是30像素，左右内边距都是50像素。

c) “padding : 30px 50px 60px” （三个值）

i. 表示上面内边距是30像素，左右两边内边距是50像素，下面内边距是60像素。

margin （外边距）[复合属性]

1. 外边距也是一个严格的复合属性

a) 与内边距一样，复合的顺序是有一定的要求的，必须按照上右下左的顺序进行复合。

2. 外边距实际上有很多问题，所以开发中能不使用就尽量不用。

3. 盒子与内容之间的距离叫内边距（padding）,盒子与盒子之间的距离叫做外边距（margin）

4. 叠压问题（下面a、b、c三个效果是一样的）

<!DOCTYPE html>

<html>

<head>

<style>

#box1{width:500px;height:300px;background:green;margin-bottom:30px;}

#box2{width:300px;height:100px;background:yellow;}

</style>

</head>

<body>

</body>

</html>

i. 给box1盒子添加一个向下30像素的外边距。

<!DOCTYPE html>

<html>

<head>

<style>

#box1{width:500px;height:300px;background:green;}

#box2{width:300px;height:100px;background:yellow;margin-top:30px;}

</style>

</head>

<body>

</body>

</html>

i. 给box2盒子添加一个向上30像素的外边距。

<!DOCTYPE html>

<html>

<head>

<style>

#box1{width:500px;height:300px;background:green;margin-bottom:30px;}

#box2{width:300px;height:100px;background:yellow;margin-top:30px;}

</style>

</head>

<body>

</body>

</html>

i. 上下外边距会叠压。（杜绝）

ii. 通常我们是不会给相邻的两个盒子，即给上面的盒子下外边距，又给下面的盒子上外边距的，因为它们会叠压。

5. 传递问题

a) 父子级包含的时候，子级的margin-top会传递给父级。

i. 解决办法：内边距替代外边距。

b) 问题演示

i. 效果

ii. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box1{width:500px;height:300px;background:green;}

#box2{width:300px;height:100px;background:yellow;margin-top:100px;}

</style>

</head>

<body>

<div id="box1">

<div id="box2"></div>

</div>

</body>

</html>

c) 解决演示

i. 效果

ii. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box1{width:500px;height:200px;background:green;padding-top:100px;}

#box2{width:300px;height:100px;background:yellow;}

</style>

</head>

<body>

</div>

</body>

</html>

6. 特殊应用（常用）

a) 右对齐

i. 代码

<!DOCTYPE html>

<html>

<head>

<style>

/* 左外边距自动，它会自动计算右边的距离统统塞给左边，得到右对齐 */

#box2{width:300px;height:100px;background:yellow;margin-left:auto}

</style>

</head>

<body>

<div id="box2"></div>

</body>

</html>

ii. 效果

1. 这时候无论你怎么调整页面大小，黄色块始终在页面最右边。

b) 左对齐

i. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box2{width:300px;height:100px;background:yellow;margin-right:auto}

</style>

</head>

<body>

</body>

</html>

ii. 效果

1. 这时候无论你怎么调整页面大小，黄色块始终在页面最左边。

c) 居中（常用）

i. 代码

<!DOCTYPE html>

<html>

<head>

<style>

#box2{

width:300px;

height:100px;

background:yellow;

/* 同时指定，相互抵消产生居中 */

margin-left:auto;

margin-right:auto;

/* 上面两句其实通常简写为margin:0 auto; */

}

</style>

</head>

<body>

</body>

</html>

ii. 效果

1. 这时候无论你怎么调整页面大小，黄色块始终在页面居中。

7. margin复合详解

a) “margin-left:auto; margin-right:auto;”简写为 “margin 0 auto”。

i. 上下外边距为0 ，左右自动。

盒模型

1. 盒模型就是由上面讲到的“css结构样式”组成。

2. 页面中所有的东西都是大大小小的盒子。

3. 盒模型图

a) margin外边距会影响到这个盒子所显示的位置。

b) border边框、padding内边距、width/height宽高都会影响到这个盒子的大小。

4. 理解盒模型

a) 就拿礼物盒来说，盒子本身的厚度你可以就认为是边框border,当把盒子打开后你可以看到一圈的泡沫塑料、空气包或包装纸这样的一些填充物，那么填充的这部分东西你可以认为是padding内边距，当我们把这些填充东西打开后你会发现里面有一个非常精美的小礼物，那在这里能放东西的这部分空间指的就是盒子的宽高，或者你也可以认为这个宽高就是盒子的容积。

5. 盒子大小的计算公式

a) 盒子大小 = border + padding + width/height

i. 盒子宽度 = 左border +左padding + width +右padding +右border

ii. 盒子高度 = 上border +上padding + height +下padding +下border

6. 盒模型详解

a) 假使在我们桌子上放了一个礼物盒，如果我们想移动这个礼物盒的位置，实际上就是控制它的外边距margin，比如说margin-left:100px他会往右100像素，margin-top:100px它会往下100像素。

文本设置

font-size （文字大小）

1. 书写格式为“font-size:12px”。

2. font-size的属性值一般均为偶数，尽量不要使用奇数，因为奇数会出现这样那样的问题。

3. 在工作中对于文字大小的设置，设置中文一般最小不会小于12px的。

font-family （文字字体）

1. 书写格式为“font-family：微软雅黑，宋体”。

a) font-family可以设置多个值，用逗号隔开，如上面假如“微软雅黑”不支持就会解析“宋体”。

2. 中文默认宋体，虽然有点丑，但是所有浏览器都兼容的。

3. 工作中常用“微软雅黑” 或英文默认字体“arial”，例：“font-family：微软雅黑，arial ;”。

color （文字颜色）

1. color属性值一般有如下3种格式：

a) 英文，如：red

b) rgb，如：rgb(165,26,59)

c) 十六位进制色彩值，如：#a51a3b [推荐]

line-height （行高）

1. 行高的理解

a) 误区

i. 行高不是文本之间的间隔。

ii. 咱们所写的文字不是在行高的顶端。

b) 正确

i. 文本在行高的上下居中位置，如下图：

c) 文本居中（常用特性）

i. 我们说文字是在行高上下居中的位置，那么当行高等于盒子的高度时，那么文字自然也就在盒子的上下居中了。

text-align （文本对齐方式，水平方向的）

1. “text-align:center”水平居中。

a) 无论文字多少都保持水平居中。

2. 默认左对齐：“text-align:left”。

text-indent （首行缩进）

1. text-indent属性值常用有如下两种计量单位：

a) 像素（px）

i. 这种方式很直观但缺点就是不好控制，如果文本大小为12px,你又想首行缩进两个文本，那么就需要给text-indent属性值为24px，但是哪一天你改变了文本大小为16px时，这时你又必须跟着修改text-indent属性值为32px，这样非常不方便。

b) 字（em）（推荐）

i. 1em相当于一个字，2em相当于两个字，也可以是负数如：-2em。

ii. “text-indent:2em”表示盒子中文本首行缩进2个字，无论文字大小为多少，都缩进两个字，它会自动检索文字大小，来自动缩出以当前文字大小为基础的两个字的空间。

font-weight （文字着重）

1. “font-weight：bold”表示粗体。

2. “font-weight：normal”表示文字正常的。

font-style （文字样式）

1. “font-style：italic”表示斜体。[当然斜体字用户体验非常差，通常不用]

2. “font-style：normal”表示正常。[用它主要是将斜体变为正常]

text-decoration （文本修饰）

1. “text-decoration:overline”表示给文本添加上划线修饰。

2. “text-decoration:underline”表示给文本添加下划线修饰。

3. “text-decoration:line-through”表示给文本添加中划线/删除线修饰。

a) 商城中的价格就常用到删除线。

4. “text-decoration:none”表示没有修饰。

letter-spacing （字母间距）[了解]

1. 正常情况下用不到这个属性，js可能会用到如：让文字聚在一起再扩散等。

2. 例： letter-spacing:10px 或 letter-spacing:-10px 。

word-spacing （单词间距）[了解]

1. 正常情况下用不到这个属性。

2. 单词间距实际上并不智能，它是以空格为解析单位的，如果你敲了一个空格它就认为你单词写完了。

3. 例：word-spacing:30px 或 word-spacing:-30px 。

总结

常见复合属性

1. background

2. border

3. padding

4. margin

5. font [了解]

a) font复合属性的属性值顺序非常严格，必须要按照下面顺序：

i. font : font-style | font-weight | font-size/line-height | font-family ;

1. 如：font:italic small-caps bold 12px/1.2em Arial ;

b) 因为页面上各区域字体的样式行高等基本上都不太一样，通常都需要单独设置，所以font这个复合属性了解即可，基本上没用的。

常见样式（17个）（基础）

width 宽度	height 高度
background 背景	border 边框
padding 内边距	margin 外边距
font-size 文字大小	font-family 字体
color 文字颜色	line-height 行高
text-align 文本对齐方式	text-indent 首行缩进
font-weight 文字着重	font-style 文字样式
text-decoration 文本修饰	letter-spacing 字母间距
word-spacing 单词间距