【知识分享】HTML 与 CSS

2021-12-03 04:43:04

HTML 与 CSS

主要内容

![](/HTML + CSS.png)

HTML

? HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。

? 它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。

? HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。

基础语法

标签

? HTML 标记是由"<"和">"所括住的指令标记，用于向浏览器发送标记指令。

? 主要分为：单标记指令、双标记指令（由"<起始标记>"＋内容＋"</结束标记>"构成）。

? HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用"<标志名>内容</标志名>"来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。

? 为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。

单标签

单标签,不设置属性值。

如：

<br/>、<hr/>
单标签属性

单标签(也叫空元素)，设置属性值。如：

<hr width="800" />
双标签

双标签，不设置属性值。如：

<title>…</title>
双标签属性

双标签，设置属性值。如：

<body bgcolor="red">…</body>
<font size="7">…</font>

整体结构

? HTML的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。

? 通常一个HTML网页文件包含3个部分：标记头区<HEAD>......</HEAD>、内容区<BODY>......</BODY>和网页区<HTML>......</HTML>。

<html>
<head></head>
<body></body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML文档的基本结构</title>
        <script></script>
        <link rel="stylesheet" type="text/css" href=""/>
    </head>
    <body>
    </body>
</html>
html

? <html>标志用于HTML文档的最前边，用来标识HTML文档的开始。而</html>标志放在HTML文档的最后边，用来标识HTML文档的结束，两个标志必须一块使用。

head

? <head>和</head>构成HTML文档的开头部分。<head>和</head>标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。

? 在此标志对之间可以使用<title></title>、<script></script>、<meta>、<link>等标签。

? <meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文。

? <link>：用来引入css文件

? <script>：用来引入js文件或编写js代码。

title

? <title>定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

? 注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。

body

? 一般情况下大部分浏览器上显示的内容，都放在body中。但也不排除其他标签可以不用body，比如frameset框架集标签。

? <body>和</body>是HTML文档的主体部分，在此标志对之间可包含<div></div>、<a>、<p>…</p>、<h1>…</h1>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

常用属性

属性 值 描述
bgcolor #xxxxxx：十六进制的数字，00-ff <br>colorname：Red、Green...<br>rgb(x,x,x)：red、green、blue，x:0-255 规定文档的背景颜色，以后可以用样式取代它
text rgb(x,x,x) #xxxxxx colorname 规定文档中所有文本的颜色，以后可以用样式取代它

DOCTYPE

? Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。

? 由于使用的场景或者版本的更替间，HTML使用的标准不同，所以需要浏览器按照不同的标准来解析HTML文本内容，这就需要告知浏览器我当前的HTML页面是按照那种方式进行编写的。没有该声明，将是你HTML噩梦的开始。

常用标签

? HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染 ，我们需要记忆常用的标签即可。大致可分为如下几类：标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span等。

标题和水平线

标题

? <h1> - <h6> 标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

? <h999>这样的标签不产生错误，但是不具有标题的效果。

? h1标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是一个页面最好只有一个h1标签，否则可能进入搜索引擎的黑名单。

<h1></h1>
水平线

? <hr /> 标签在 HTML 页面中创建一条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML 中，<hr> 标签没有结束标签。

<hr />

常用属性

属性 值 描述
align CenterLeftright 规定 hr 元素的对齐方式，以后可以用样式取代它
size pixels 规定 hr 元素的高度（厚度），后可以用样式取代它
width Pixels% 规定 hr 元素的宽度，后可以用样式取代它

段落和换行

段落

? <p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

? 理解：语文课本中各个段落之间会有大的空隙。 

<p></p>

常用属性

属性 值 描述
align left、right、center、justify 规定段落中文本的对齐方式，以后可以用样式取代它
换行

? br标签为换行符号，<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。

? 注意：<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行，而不是分割段落。

<br/>

列表

无序列表
由<ul></ul>和<li></li>标签组成。
<ul>
    <li></li>
    <li></li>
    ......
</ul>

<ul>
    <li>好好学习</li>
    <li>天天向上</li>
</ul>

常用属性

属性 值 描述
type disc<br>circle<br>square 规定列表的项目符号类型。可以使用样式取代。<br>dise：实心圆（默认）<br>circle：空心圆<br>square：方块
有序列表

? 由<ol></ol>和<li></li>标签组成。

<ol>
    <li></li>
    <li></li>
    ......
</ol>

<ol>
    <li>好好学习</li>
    <li>天天向上</li>
</ol>

常用属性

属性 值 描述
type 1<br>a<br>A<br>i<br>I 规定在列表中使用的标记类型。<br>1：用数字形式表示序号（默认）<br>a：用小写字母表示序号<br>A：用大写字母表示序号<br>i：用小写罗马数字表示序号<br>I（大写i）：用大写罗马数字表示序号

div和span

div

? <div>是一个块级元素，通常与css配合使用，用于布局。

? <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

? <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

<div>content</div>

常用属性

属性 值 描述
align left、right、center 规定div元素中的内容的对齐方式，以后可以用样式取代它
span

? <span>标签被用来组合文档中的行内元素 ，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化 。

<span>content</span>

格式化标签

font

? 规定文本的字体、字体尺寸、字体颜色

pre

? 定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

文本标签
**<b>**（粗文本）、**<i>**（斜体文本）、**<u>**（下划线文本）、

? < del >（中划线文本）、<sub>（下标文本）、<sup>（上标文本）

a标签

? <a>标签定义超链接，用于从一张页面链接到另一张页面。

? <a>元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。

? 若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

<a href="http://www.baidu.com">百度</a>

常用属性

属性 值 描述
href URL 连接所要跳转的位置，可能是其他或当前页面。
target _blank<br>_parent<br>self<br>top<br>Framename作为锚点的a标签的name值 规定在何处打开链接文档。<br>_blank：开启新页面显示页面；<br>_self：当前页面显示跳转到页面，默认值。<br>_top：用于有frameset布局的页面，想要覆盖整个页面显示。<br>Framename：这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。

锚点的实现

? 利用a标签的name属性：

<a name="top"></a>

? 一般标签的id属性：div id=""、a id="" 等：

<div id="top"></div>、<a id="top"></a>

? 锚点定位

<a href="#top">返回首部</a>

图片

? img 元素向网页中嵌入一幅图像。

? 注意：从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img src=""  >

必须属性

属性 值 描述
alt text 规定图像的替代文本，一般在图片无法正常显示占位的文字。
src URL 规定显示图像的 URL。

常用属性

属性 值 描述
align top、bottom、middle、left、right 规定如何根据周围的文本来排列图像
border pixels 定义图像周围的边框
height pixels、% 定义图像的高度。
width pixels、% 定义图像的宽度。
title 文本 当鼠标在图片上时显示的文字

表格

? <table></table> 标签定义 HTML表格。

? <tr></tr>标签定义表格的行。tr元素包含一个或多个th或td元素

? <td></td>标签定义 HTML 表格中的标准单元格。

? <th></th>定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

? 简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。

? 理解：table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。

常用属性

属性 值 描述
align right、center、left 表格对齐方式
border px 规定表格边框的宽度
width % 、px 规定表格的宽度

tr常用属性

属性 值 描述
align right、left、center 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格行的背景颜色，以后可以用样式取代它
valign top、middle、bottom 规定表格行中内容的垂直对齐方式，以后可以用样式取代它

? <td>的colspan和rowspan分别规定单元格横跨的列数和行数

表单

form

? <form> 标签用于为用户输入创建 HTML 表单。

? 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。

? 表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

常用属性

属性 值 描述
action URL 规定当提交表单时向何处发送表单数据
method get、post 规定用于发送 form-data 的 HTTP 方法
name Form_name 规定表单的名称
target _blank self parent _top framename 规定在何处打开 action URL

? method：表单提交方式：get、post

? get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

? post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

input

? <input> 标签用于搜集用户信息。

? 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。

常用属性

属性 值 描述
alt text 定义图像输入的替代文本。
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
readonly readonly 规定输入字段为只读。
maxlength number 规定输入字段中的字符的最大长度。
value value 规定 input 元素的值。
type button<br>checkbox<br>file<br>hidden<br>image<br>password<br>radio<br>reset<br>submit<br>text 规定 input 元素的类型。按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

若上传文件，请求方式为post，且表单添加一个属性:enctype="multipart/form-data"

注意：

? 1. 没有name属性的属性是无法提交到后台的！！！！

? 2. Radio单选按钮以name相同为一组。

? 3. Checkbox复选按钮以name相同为一组。

textarea

? 该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content</textarea>
label

? <label> 标签为input 元素定义标注（标记）。

? label元素不会呈现任何的特殊效果。

? label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
button
<button>按钮</button>

常用属性

属性 值 描述
disabled disabled 禁用该按钮。
type button、submit、reset 规定按钮的类型。
value text 规定按钮的初始值。
name button_name 规定按钮的名称。
select

? <select>用于定义下拉列表

<select name="color" >
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
</select>

select常用属性

属性 值 描述
disabled disabled 禁用该下拉框。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
size number 规定下拉列表中可见选项的数目。

option常用属性

属性 值 描述
disabled disabled 禁用该下拉框。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value text 定义送往服务器的选项值。

?

常用字符实体

? 在 HTML 中，某些字符是预留的。

? 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

? 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

? 实体名称对大小写敏感！

【知识分享】HTML 与 CSS

标签的分类

? HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素

? 元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素

? 和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素

? 和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

CSS

? CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

? CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

? CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能 。

? 【知识分享】HTML 与 CSS

CSS的基本使用

CSS基本语法

? CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。 【知识分享】HTML 与 CSS

选择器名 {
    属性 : 属性值;
    ......
}
div {
    background-color : red;
}

注意：

  1. css声明要以分号;结束，声明以{}括起来
  2. 建议一行书写一个属性
  3. 若值为若干单词，则要给值加引号，如 font-family: "agency fb";

注释

多行注释：

/* 这里的内容就是注释 */

CSS的使用

1. 行内式

? 行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

<p style="color:red;font-size:50px;">这是一段文本</p>

在当前元素使用 style 属性的声明方式。

? style 是行内样式属性；

? color 是颜色属性；red 是颜色属性值；

? font-size是字体大小属性；50px 是字体大小属性值

2. 嵌入式

? 嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套<style>标签，在<style>中通过选择器的方式调用指定的元素并设置相关 CSS。

<style type="text/css">p {color: blue;font-size: 40px;}</style>

3. 引入外联样式文件

? 在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

style.css

p {color: green;font-size: 30px;}

test.html

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

? rel:rel 属性规定当前文档与被链接文档之间的关系。

? stylesheet:文档的外部样式表。

? 很多时候，大量的 HTML 页面使用了同一个CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过<link>元素去引入它。

? 注意：当有多重样式时，记住前提规则，越精确越优先。

CSS选择器

? 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

? CSS选择器有很多，掌握常用的即可；

基本选择器

通用选择器

选择所有 <font color="red">*</font>

* {
    ......
}
* {
    color: orange;
}
元素选择器

选择指定标签

元素名称 {
    ......
}
p {
    color: red;
    font-size: 20px;
}
ID选择器

选择设置过指定id属性值的元素 <font color="red">#</font>

#id属性值 {
    ......
}
#p1 {
    font-weight: bold;
}
类选择器

选择设置过指定class属性值的元素 <font color="red">.</font>

.class属性值 {
    ......
}
.hidden {
    display: none;
}
分组选择器

? 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2,... {
    ......
}
h2 , #pre1 {
    color: orange;
    font-style: italic;
}

? CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

? 元素选择器：1

? 类选择器：10

? id选择器：100

? 内联样式：1000

组合选择器

? CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。

? 在 CSS 中包含了四种组合方式: 后代选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），普通兄弟选择器（以波浪线分隔）。

后代选择器（派生选择器）

? 用于选择指定标签元素下的后辈元素，以空格分隔

选择器1 选择器2 {
    ......
}
.food  li {
    border: 1px solid red;
}
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
子元素选择器

? 用于选择指定标签元素的所有第一代子元素，以大于号分隔

选择器1 + 选择器2 {
    ......
}
#d + div {
    border: 1px solid red;
}
html代码同上
相邻兄弟选择器

? 可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

选择器1 + 选择器2 {
    ......
}
#d + div {
    border: 1px solid red;
}
<div id="d">
    相邻兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
    </ul>
</div>
<div>
    相邻兄弟选择器2
</div>
普通兄弟选择器

? 选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

选择器1 ~ 选择器2 {
    ......
}
li ~ li {
    background-color : yellow;
}
<div>
    普通兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
        <li>沈腾</li>
        <li>王宁</li>
    </ul>
</div>

CSS常用属性设置

背景

? CSS 背景属性用于定义HTML元素的背景效果

background-color

? 设置元素的背景颜色

body {
    background-color:#ff0000;
}
background-image

? 设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {
    background-image:url(‘paper.gif‘);
}
background-repeat

? 设置是否及如何重复背景图像

body {
    background-image: url(img/logo.jpg);    
    background-repeat: no-repeat;
}

【知识分享】HTML 与 CSS

文本

color
body {
    color:blue;
} 
h1 {
    color:#00ff00;
} 
h2 {
    color:rgb(255,0,0);
}
text-align

? 设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

body {
    text-align:center;
}   
h1 {
    text-align:right;
} 
h2 {
    text-align:right;
}
text-decoration

? 规定添加到文本的修饰，属性值：none、underline、overline、line-through

1）underline

? 对文本添加下划线，与HTML的u元素相同。

2）overline

? 对文本添加上划线。

3）line-through

? 对文本添加中划线，与HTML中的s和 strike 元素相同。

4）none

? 关闭原本应用到元素上的所有装饰。

h3 {
    text-decoration:underline;
}
text-indent

? 设置文本首行缩进

p.ident2 {
    text-indent: 2em;
}

? em一个相对值，例如页面的文本大小为17px,则2em就为17px*2

字体

font-family

? 文本字体，该属性设置文本的字体。

? font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。

注意：

? 1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：

body {
    font-family: "arial black";
}

? 2）多个字体系列是用一个逗号分隔指明

/* 靠前的字体先生效 */
p{
    font-family: 微软雅黑,黑体,"agency fb";
}
font-size

? 文本大小

body {
    font-size: 50px;  /*字体大小50px*/
}
#span1 {
    font-size: 25px;  /*字体大小25px*/
}
font-style

? 字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique

? 1）normal：文本正常显示；

? 2）italic：文本斜体显示；

? 3）oblique：文本倾斜显示，oblique是将文字强制倾斜。

? 说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜。

font-weight

? 字体加粗，该属性设置文本的粗细。

? bold：可以将文本设置为粗体。

? 100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

? 100 对应最细的字体变形；

? 900 对应最粗的字体变形；

? 400 等价于 normal；

? 700 等价于 bold。

对齐方式

text-align

? 规定元素中的文本的水平对齐方式。属性值如下：【知识分享】HTML 与 CSS

注意：

? 值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。对最后一行不生效。

display属性

? display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。【知识分享】HTML 与 CSS

浮动

? float的属性值有none、left、right。

1. 只有横向浮动，并没有纵向浮动。

2. 会将元素的display属性变更为block。

3. 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

4. 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

盒子模型

? border、padding、margin三个属性构成了盒子模型。 【知识分享】HTML 与 CSS

border

? 设置所有的边框属性。

? 1）可同时设置边框的宽度、样式、颜色

table, th, td { 
    border: 1px solid black; 
}
table { 
    width:100%; height:50px; 
}

? 2）使用border-width、border-style、border-color单独设置

table,td {
    border-width: 1px;
    border-style: dotted;
    border-color: green;
}

? 3）border-style的属性

【知识分享】HTML 与 CSS

? 4）border-collapse

? 设置是否将表格边框折叠为单一边框。

? 属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

table { 
    border-collapse : collapse; 
}
padding

? 设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

? 如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性： 

td { 
    padding:15px;
}

? 单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

? <font color="red">默认按照上右下左的顺序设定</font>

td .test1 {
    padding: 1.5cm
}       
td .test2 {
    padding: 0.5cm 2.5cm
}
<table border="1">
    <tr>
        <td class="test1">
            这个表格单元的每个边拥有相等的内边距。
        </td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
        这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。
        </td>
    </tr>
</table>

? 注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

margin

? 设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {
    margin: 2px 4px 3px 4px;
}

? 单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{
    margin-top:100px; 
    margin-bottom:100px;
    margin-right:50px; 
    margin-left:50px; 
} 
*{
    margin: auto auto;
} 
*{
    margin: 100px auto;
}

说明：

? auto：自动，可以理解为居中的意思。浏览器自动计算外边距。

? margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。

? 但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态，效果如下： 【知识分享】HTML 与 CSS

? 若要设置为上下左右居中状态，则要计算好自行设置上下的外边距，效果如下： 【知识分享】HTML 与 CSS

? 注意：此时使用margin-top不生效。了解

【知识分享】HTML 与 CSS

上一篇：阿里云虚拟主机配置https


下一篇：权限管理