前端基础之HTML

于 2019-06-05 18:30:12 发布
阅读量279 收藏 2
点赞数
分类专栏： 前端核心基础 文章标签： HTML +_CSS核心基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37802511/article/details/90912298
版权
本文介绍了HTML和CSS的基础知识，包括HTML的标签、元素、属性，CSS的选择器、样式和布局。讲解了如何通过HTML构建网页结构，利用CSS进行样式控制，如文本格式、颜色、字体和盒子模型。此外，还探讨了浏览器兼容性、编码问题和文档流等概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

WEB介绍----前端常识

1.WEB：world wide web --> 广域网 —>万维网 —> 建立在internate上的一个网络服务
2.前端技术：
​ 项目：前端+后台
​ 前端技术：HTML +CSS +javascript
​ 后台技术：Java，.net ,PHP …

3.划分
​ 初级前端的技术：HTML+CSS+JavaScript
​ 中级前端的技术：HTML5+CSS3+JavaScript+移动端
​ 高级前端的技术：Node，js,Vue.js，REct…各种框架

4.定义

​ web : world wide web --> 广域网 —>万维网

​ HTML :Hyper Text Markup Language(超文本标记语言)

​ CSS ： Cascading Style Sheet s(层叠样式表)

​ JavaScript ：简称JS，一种脚本语言，动态类

​ xml : 用来存储数据

5.开发软件
​ Hbulider
​ VS Code
​ Sublime
​ WebStorm

6.五大浏览器
​ CHrome、Firefox、IE（11,10,9,8,7,6）、 Opera、 Safari

7.常见的浏览器内核4个
​ Tradent Blink Gecko Webkit
​ 内核不同，网页的展示效果也就不同

8.内核中种引擎
​ 渲染引擎：获取页面，整理，计算，最终把效果展示给用户
​ JS引擎：获取js解析，实现动态交互的效果
9.浏览器对应的内核
​ 谷歌和Opera ：Blink----V8引擎 ------谷歌浏览器以前用的也是webkit内核
​ IE：Trident
​ Safari :Webkit
​ Firefox : Gecko

B/S 技术 -------浏览器/服务器 -----浏览器联网可以
C/S技术 --------客户端/服务器 -----qq属于客户发端—需要发送服务器
PC端的软件

组织介绍

  • W3C 万维网联盟 world wide web Consortium
    • 专门定义网页相关的标准而成立的
    • 定义了网页中的HTML,CSS,DOM,HTTP,XML等标准。
  • WHATWG 网页超文本应用技术工作小组
    • 是以推动网络HTML5标准为目的而成立的组织
    • 在2004年由Opera/Mozilla基金会和苹果这些浏览器厂商组成。

W3C 标准学习的内容

  • 根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。
    • 结构—HTML ,用于描述页面结构
    • 表现----CSS ，用于控制页面样式
    • 行为----Javascript ，用于响应用户操作

HTML 和CSS介绍

HTML

  • 定义：HTML （Hypertext Markuup Language）超文本标记语言。
  • 负责网页三要素之中的结构
    <!DOCTYPE html> H5的规范 
html:xt 过渡版本
html:
! + tab
标签
  • HTML中的标记指的就是标签
  • HTML使用标记来描述网页
  • 结构：<标签名> 标签内容</标签名>
元素
  • 可以将一个完整的标签视为元素
  • Html标签 === 元素 ----节点(包含文本，标签等)
属性
  • 通过属性为HTML元素提供附加信息
  • 属性名：属性值对应。
  • 属性需要设置在开始标签或者自结束标签中。
  • 属性总是以名称/值对的形式出现
常见属性

id : id属性作为标签的唯一表示，在同一个网页中不能出现相同的id属性值。
class: class属性用来为标签 分组，拥有相同class属性的标签被认为就是一组，可以出现相同class属性，也可以为一个元素指定多个cass。
title:title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

注释
  • HTML注释中的内容不会在网页中显示
  • 格式：<!-- 注释的内容 -->
  • 注释不能嵌套！！！
  • 合理使用注释可以磅数开发人员理解网页的代码。
doctype
  • 文档类型
    <!DOCTYPE html>  文档类型
	<html>  根标签
        <head> 头部标签
            <meta charset='utf-8'> 配置标签 
            <title> 标题标签
            <meta name='keyworlds' content=''>
            <meta name='description' content=''>
        <body> 主体标签
html4
  • 过渡版
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • 严格版
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
  • 框架集
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
xhtml1.0
  • 过渡版
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 严格版
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 框架集
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
html5
<!DOCTYPE html>  H5的文档声明
怪异模式
  • 为了兼容一些旧的页面，浏览器中设置了两种解析模式：
  • 标准模式（Standards Mode）
  • 怪异模式（Quirks Mode）
  • 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出
    现。
  • 避免的最好方式就是在页面中编写正确的doctype。
编码问题
  • 在计算机的内部，文件都是以二进制编码保存的。
  • 所谓的二进制编码就是指1和0，也就是我们的所有内容都需要转换为1和0。
  • 中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码，这一过程
    称为编码。
  • 计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码
字符集

  • 字符集规定了如何将文本转换为二进制编码。

  • 常见的字符集：ASKII、ISO8859-1、GBK、GB2312(中文编码)、UTF-8（国际编码）。

  • 解决乱码问题

    • 这里为了页面有更好的使用性，我们一般使用utf-8。

  • 告诉浏览器使用什么字符集去解析文件。在html5中只需要使用meta标签即可完成
    这个任务：编码设置 charset

    <meta charset="utf-8" />
<meta>
  • <meta>标签可以提供页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
  • <meta> 标签位于文档的头部，不包含任何内容
  • <meta>标签的属性定义了与文档相关联的名称/值对
  • <meta>的用法
    设置页面的字符集： <meta charset="utf-8">
设置网页的描述：<meta name="description" content="">
设置网页的关键字：<meta name="keywords" content="">
请求的重定向 ：<meta http-equiv="refresh" content="5;url=地址"/>
常用标签

  • <html>

    • 作用：告诉浏览器文档中包含的信息是用HTML编写的
    • 用法：
    • 所有内容多要写到html标签中
    • 一个页面中html标签只能有一个。
    • html标签中有两个子标签 head 和 body

  • head

    • 作用: head标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
    • 用法：
    • head标签作为html标签的子元素出现
    • 一个网页中只能有一个head

  • <title>

    • 作用：
    • title 标签表示网页的镖旗，一般会在网页的标题栏上显示
    • title 标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到，最醒目的内容。
    • 用法：
    • 建议将title标签贴着head标签编写，这样搜索引擎可以快速检索到标题标签。
    • 网站中多个页面的title也不应该重复，这样不利于搜索引擎检索

  • <body>

    • 作用：body标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
    • 用法：body标签作为html的子标签使用。

  • <h1>~<h6>

    • 作用：
    • h1~h6都是网页中的标题标签，用来表示网页
      中的一个标题，不同的是，从h1~h6重要性越
      来越低。
    • 标题标签相当于正文的标题，通常认为重要性
      仅次于页面的title。
    • 一般标题标签我们只会使用到h3，h3以后的标
      题标签对于搜索引擎就没有什么意义了。
    • 一个页面中只会使用一个h1标签

  • <p>

    • 作用：
    • 标签表示网页中的一个段落。
    • 一般浏览器会在段落的前和后各加上一个换行， 也就是段落会在页面中自成一行。

  • <br/>

    • 作用:
    • 标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行。

  • hr/

    • 作用： hr标签是水平线标签，使用hr标签可以在 页面中打印一条水平线，水平线可以将页面分 成上下两个部分

  • <img/>

    • 作用：< img />标签是图片标签，可以用来向页面中引入一张外部的图片。
    • 属性：
    • src 指向一个外部的图片的路径。
    • alt 图片的描述

  • <a>

    • 作用：标签是超链接标签，通过a标签，可以快
      速跳转到其他页面。
    • 属性：
    • href 指向一个链接地址
    • target 设置打开目标页面的位置，
      • 可选值：_blank新窗口、_self当前窗口。
实体（转义字符）
  • 实体：在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。为了可以使用这些预留字符，我们必须在html中使用字符实体。
  • 语法： &实体名；
  • 实体字符
    &lt; 	小于号<
&gt; 	大于号>
&nbsp; 	空格
&amp;	和符号&
&copy;	版权©
&quot;	引号''
&reg;	注册商标 R
&trade;	商标™

CSS

  • 定义 ：层叠样式表 (Cascading Style Sheets)
    • css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
    • 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
    • 而css就可以分别为网页的各个层次设置样式。
  • 基本语法：
    • CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。
    • 语法：选择器 {样式名:样式值；样式名:样式值 ; }
      p {color:red ; font-size:12px;}
行内样式
  • 直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。
    <p style="color:red;font-size:30px"></p>
  • 这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用。
内部样式表
  • 可以直接将样式写到<style>标签中
    <style>
	p{color:red; font-size: 30px;}
</style>
  • 这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。
  • 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。
外部样式表
  • 可以将所有的样式保存到一个外部的css文件中，然后通过标签将样式表引入到文件中。
    <link rel="stylesheet" type="text/css"
href="style.css">
  • 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。

CSS选择器

选择器

  • 标签选择器 语法： 标签名{css代码}

  • id选择器 语法：#id名{css代码} #id{}

  • 类选择器 语法：.类名{css代码} .className{}

  • 复合选择器 语法 : 选择器1选择器2{}

    • 可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
    • 例如div.box1会选中页面中具有box1这个class的div元素。

  • 群组选择器 语法：选择器1,选择器2,选择器3 {}

    • 可以同时使用多个选择器，多个选择器将被同时应用指定的样式。
    • 比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

  • 通用选择器 语法：*{}

  • 后代选择器 语法：祖先元素 后代元素 后代元素{}

    格式：div p span a{ css样式代码 }
    优先级是多个选择器的优先级相加的和 且 优先级不会高于最高选择器上一级的优先级。

  • 伪类选择器

    • 有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

      a:link 正常链接
      a:visited 访问过的链接 （只能定义字体颜色）
      a:hover 鼠标滑过的链接
      a:active 正在点击的链接

  • 其他

    :focus 获取焦点
    :before 指定元素前
    :after 指定元素后
    ::selection 选中的元素

  • 给段落定义样式

    • :first-letter 首字母
    • first-line 首行

  • 属性选择器

    • 属性选择器可以挑选带有特殊属性的标签。
    • 语法:

      [属性名]
      [属性名=“属性值”]
      [属性名~=“属性值”]
      [属性名|=“属性值”]
      [属性名^=“属性值”]
      [属性名$=“属性值”]
      [属性名*=“属性值”]

  • 子元素选择器

    • 子元素选择器可以给另一个元素的子元素
      设置样式。
    • 语法：父元素 > 子元素{}

  • 其他子元素选择器

    :first-child 选择第一个子标签
    :last-child 选择最后一个子标签
    :nth-child 选择指定位置的子元素
    :first-of-type
    :last-of-type
    :nth-of-type 选择指定类型的子元素

  • 兄弟选择器

    • 语法:

      兄弟元素 + 兄弟元素{} 查找后边一个兄弟元素
      兄弟元素 ~ 兄弟元素{} 查找后边所有的兄弟元素

  • 否定伪类

    • 否定伪类可以帮助我们选择不是其他东西的某件东西。
    • 语法: :not(选择器){}
      比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。

  • 继承：继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。

    h1-h6标签字体大小，不继承。 1em=1倍常规字体大小
    a标签的颜色不继承
    所有有默认值的标签皆不继承，需要单独设置。

选择器优先级 和 权重
  • ！important 最高级（最好不要使用，后期维护麻烦）
  • 内联样式 1000
  • id选择器 100
  • 类属性、伪类选择器 10
  • 标签/元素选择器 1
  • 通配符选择器 0
  • 继承 没有优先级

并集选择器是单独计算的
多个选择器同时使用，将选择器的的权重相加，再比较优先级
注意： 如果选择器的优先级 一样则后写的样式会覆盖前面的样式！！！

文本标签

  • <em> 表示一段内容中的着重点

  • <strong> 表示一个内容的重要性

    这两个标签可以单独使用，也可以一起使用。

    <p>
	<strong>警告：任何情况下不要接近僵尸。</strong>
	他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
</p>

    通常em显示为斜体，而strong显示为粗体

  • <i>标签会使文字变成斜体。

  • <b>标签会使文字变成粗体。

    这两个标签和em和strong类似，但是这两
    个标签没有语义。所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。

  • <small>

    • small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。
    • 浏览器在显示small标签时会显示一个比父元素小的字号。
    <p><small>&copy;2016 尚硅谷. 保留所有权利.</small></p>

  • <cite>

    使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。

    <p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

  • <blockquote>用于长引用

  • <q>用于短引用。

    blockquote和q表示标记引用的文本。
    在两个标签中还可以使用cite属性来表示引用的地址。

    孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>

  • <sup>和<sub>用于定义上标和下标。

    上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2。

  • <ins>表示插入的内容，显示时通常会加上下划线。

  • <del>表示删除的内容，显示时通常会加上删除线。

  • <code >如果你的内容包含代码示例或文件名，就可以使用code元素。

  • <pre>元素表示的是预格式化文本，可以使用pre包住code来表示一段代码

    <pre>
    <code>
        function fun(){
       		alert("hello");
        }
    </code>
</pre>

列表（三个可以相互嵌套）

有序列表

  • 使用ol和li来创建一个有序列表

    type='1 / a / A / i / I ’ 可以指定序号类型（数字，大小写字母，大小写罗马数字）。需要123，abc,ABC,i ii iii,I II III 方式
    ul[type=‘A’]>li{有序列表}*3 tab键后快速创建有序列表

    <ol type="a">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
无序列表

  • 使用ul和li来创建一个无序列表

    type='circle / square / disc ’ 空心圆/实心方块 /实心圆（默认） 一般项目中不使用 ；
    如果项目中需要，则可以通过css为li设置背景图的方式来实现。
    ul[type=‘circle’]>li{空心圆}*3 tab键后快速创建无序列表

    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
定义列表

  • 使用dl、dd、dt来创建一个定义列表（对一些词汇或者内容进行定义）。

    dl dt(被定义的文字) dd 对被定义文字的 描述
    dl中可以写多套dt dd

    <dl>
    <dt>定义项1</dt>
    	<dd>定义描述1</dd>
    <dt>定义项2</dt>
    	<dd>定义描述2</dd>
    <dt>定义项3</dt>
    	<dd>定义描述3</dd>
</dl>

文本格式化

单位

  • px

    如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。

  • 百分比
    也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。

  • em
    em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

颜色

  • 在CSS中可以直接使用颜色的关键字来代表一种颜色。

    17中颜色：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

    还有147种svg颜色，这里就不一一列举了，但是明显这些颜色并不足以描绘我们世界中所有的颜色。

  • 十六进制颜色

    用的最多的颜色是十六进制符号。一个颜色值，比如:#6600FF实际上包含了三组十六进制的数字。

    上边的例子中

    >前两位，66代表红色的浓度，
>
>中间两位，00代表绿色的浓度，
>
>最后两位，FF代表了蓝色的浓度。

    最后的颜色是由这些指定浓度的红绿蓝混合而成的。

    如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将 #6600FF缩短为#60F。

  • RGB值

    也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值，也可以使用0%100%的百分比数。

    • RGB(100%,0%,0%)
    • RGB(0,255,0)
    • 第一个数表示红色的浓度，
    • 第二个数表示绿色浓度，
    • 第三个数表示蓝色的浓度。

  • RGBA

    RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。

    • 0表示完全透明，
    • 1表示完全不透明。
    • RGBA(255,100,5,0.5)
文字

  • 文字大小font-size文字大小

    • 可选值

      <absolute-size> |<relative-size> |<length> |<percentage>
      <absolute-size>= xx-small | x-small | small | medium | large | x-large | xx-large
      <relative-size>= smaller | larger

  • 文字粗细 font-weight 用来指定文本的粗体。

    可选值

    • normal(400) 非粗体
    • bold(700) 加粗
    • bolder 比继承的更重的值
    • lighter 比继承的更轻的值

  • 字体 font-family 字体

    • 可选值

      <family-name>： 字体名称。按优先顺序排列。以逗号隔开。
      如果字体名称包含空格或中文，则应使用引号括起
      <generic-family>： 字体序列名称。

    • 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。
    p{font-family:Arial}
    • 通过font-family可以同时指定多个字体
    指定了多种字体，浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推.
这里面sans-serif并不是指的具体某一个字体。而是一类字体。

  • 字体分类

    • serif（衬线字体）
    • sans-serif（非衬线字体）
    • monospace （等宽字体）
    • cursive （草书字体）
    • fantasy （虚幻字体）

    以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

  • 斜体和粗体

    • font-style 用来指定文本的斜体

      可选值 normal | italic |oblique

      normal 非斜体

      italic : 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique

      oblique:人为的使文字倾斜，而不是去选取字体中的斜体字

  • font-variant 小型大写字母

    • 可选值：
      • normal 正常字母
      • small-caps 小型大写字母

    font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
    font-variant:small-caps

  • 字体的复合写法

    • font可以一次性同时设置多个字体的样式。
    • 语法：font:加粗 斜体 小型大写 大小/行高 字体这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后
    例如：
font: italic bold 30px "微软雅黑";

  • 行间距line-height

    • 可选值

      normal(允许内容顶开或溢出指定的容器边界)
      <length>|<percentage>|<number>

    • line-height用于设置行高，行高越大则行间距越大。

    • 行间距 = line-height – font-size

大写化
  • text-transform样式用于将元素中的字母全都变成大小。
    • 大写：text-transform:uppercase
    • 小写：text-tansform:lowercase
    • 首字母大写：text-transform:capitalize
    • 正常：text-transform:none
文本的修饰
  • text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
    可选值：
    >underline
>overline
>line-through
>none
字母间距和单词间距
  • letter-spacing 用来设置字符之间的间距。
  • word-spacing用来设置单词之间的间距。

    这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本

  • text-align

    可选值

    left 左对齐

    right 右对齐

    center 居中对齐

    justify 两端对齐

首行缩进
  • text-indent用来设置首行缩进。
    • 该样式需要指定一个长度，并且只对第一行生效

盒子模型

在网页中，一切皆盒子。

  • 盒子模型 的组成部分
    • 内容区(content)
    • 内边距(padding)
    • 边框(border)
    • 外边距(margin)
      盒子模型
>内容区：指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
>如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
>通过width和height两个属性可以设置内容区的大小。
>width和height属性只适用于块元素

内边距：
顾名思义，内边距指的就是元素内容区与边框以内的空间。
默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
• 例如：padding:10px 20px 30px 40px 这样会设置元素的上、右、下、左四个方向的内边距。

padding:10px 20px 30px;分别指定上、左右、下四个方向的内边距
padding:10px 20px;分别指定上下、左右四个方向的内边距padding:10px;同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom分别用来指定四个方向的内边距。

边框
• 可以在元素周围创建边框，边框是元素可见框的最外部。
• 可以使用border属性来设置盒子的边框：border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
• 也可以使用border-top/left/right/bottom分别指定上右下左
四个方向的边框。
• 和padding一样，默认width和height并包括边框的宽度。

边框的样式
  • 可选值

none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹边）
outset（凸边）

外边距
• 外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。
• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

display
  • 行内元素不能设置width、height、margin-top和margin-bottom。
  • 我们可以通过修改display来修改元素的性质。

    • 可选值：

      block：设置元素为块元素
      inline：设置元素为行内元素
      inline-block：设置元素为行内块元素
      none：隐藏元素（元素将在页面中完全消失）

visibility

  • visibility属性主要用于元素是否可见。和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。

    • 可选值：

      visible：可见的
      hidden：隐藏的

overflow

  • 当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。

  • 可以通过overflow来控制内容溢出的情况。

    • 可选值：

      visible：默认值
      scroll：添加滚动条
      auto：根据需要添加滚动条
      hidden：隐藏超出盒子的内容

文档流
  • 文档流指的是文档中可现实的对象在排列时所占用的位置。
  • 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
  • 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。
  • 这样一来每一个块元素都会另起一行

浮动

  • 浮动：指的是使元素脱离原来的文本流，在父元素中浮动起来。 浮动使用float属性。

    • 可选值：

      none：不浮动
      left：向左浮动
      right：向右浮动

    • 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。

    • 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

    • 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。

    • 浮动会使元素完全脱离文本流，不再在文档中在占用位置。

    • 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。

    • 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。

    • 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。

清除浮动

  • clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。

    • 可选值：

      left：忽略左侧浮动
      right：忽略右侧浮动
      both：忽略全部浮动
      none：不忽略浮动，默认值

定位

  • position属性可以控制Web浏览器如何以及在何处显示特定的元素。可以使用position属性把一个元素放置到网页中的任何位置。
    • 可选值：

      static 默认值，
      relative 相对定位
      absolute 绝对定位
      fixed 固定定位

相对定位 relative
  • 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。
  • 当将position属性设置为relative时，则开启了元素的相对定位。
  • 当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位
  • 特点
    • 如果不设置元素的偏移量，元素位置不会发生改变。
    • 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
    • 相对定位不会改变元素原来的特性。
    • 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。
绝对定位 absolute
  • 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
  • 当将position属性设置为absolute时，则开启了元素的绝对定位。
  • 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
  • 特性
    • 绝对定位会使元素完全脱离文本流。
    • 绝对定位的块元素的宽度会被其内容撑开。
    • 绝对定位会使行内元素变成块元素。
    • 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。
固定定位 fixed
  • 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
  • 当将position属性设置为fixed时，则开启了元素的固定定位。
  • 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
  • 固定定位的其他特性和绝对定位类似。

z-index

  • 当元素开启定位以后就可以设置z-index这个属性。
  • 这个属性可以提升定位元素所在的层级。
  • z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。

设置元素的背景

bacoground-color

  • background-color属性用来为元素设置背景颜色。
  • 需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。
  • 如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。

background-image

  • background-image可以为元素指定背景图片。
  • 和background-color类似，这不过这里使用的是一个图片作为背景。
  • 需要一个url地址作为参数，url地址需要指向一个外部图片的路径
    background-image: url(1.jpg)

background-repeat

  • background-repeat用于控制背景图片的重复方式。

  • 如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。

  • 可选值：

    repeat：默认值，图片左右上下平铺
    no-repeat：只显示图片一次，不会平铺
    repeat-x：沿x轴水平平铺一张图片
    repeat-y：沿y轴水平平铺一张图片

background-position

  • background-position用来精确控制背景图片在元素中的位置。

  • 可以通过三种方式来确定图片在水平方向和垂直方向的起点。

    关键字：top right bottom left center
    百分比
    数值

background-attachment

  • background-attachment用来设置背景图片是否随页面滚动。

  • 可选值：

    scroll：随页面滚动
    fixed：不随页面滚动

复合写法

  • background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。

    background: green url(1.jpg) no-repeat center center fixed;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值