暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / html+css基础知识总结

html+css基础知识总结

原创 OBS 2023-09-28
244

一、前端认知

1. 前端是做什么的？
前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。
2. 开发流程

开发流程

具体的开发路程请见 百度脑图－便捷的思维工具

3. 前端开发的核心语言

  • HTML——结构
  • CSS——样式
  • JS——行为

二、HTML

HTML（Hypertext Markup Language）翻译过来就是 超文本标记语言。

超文本即超越文本，可以显示 文字 图片 视频 音频，最重要的是可以包含超链接。

标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。

当我们将英语单词放入到标记当中，这时候我们可以称之为 标签（单标签、双标签）。

HTML的基本结构


<!DOCTYPE html>
<!-- 文档头（类型）声明 不是标签，代表的是 HTML 5 的标准-->
<html>
<!-- 根元素所有的标签都要放在根元素中-->
<head>
<!-- 头部里面包含的绝大部分内容都是不可见的，里面的内容主要用于辅助页面的展 定义tittle 关键字 描述 编码等 -->
   
    <!--网页的标题 -->
    <title>html+css基础知识总结</title>

    <!--针对搜索引擎和解析格式的属性->
    <meta charset="utf-8"/>

    <!--定义网页的关键字-->
    <meta name="keywords" content="关键词1,关键词2,关键词3" />

    <!--定义网页的关键字-->
    <meta name="description" content="html+css基础知识总结" />
   
</head>
<body>
<!--  里面包含的绝大部分在页面中都是可见的，  主要用于搭建 HTML 结构 -->
</body>

</html>

head 中的元素

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

三、CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

1. CSS 的引入方式

  • 内联样式表
    <div style="width:100px;height:100px;background-color:red;"></div>

    内联样式表
  • 内部样式表
    写在<head></head>内部
    <head>
    <style type="text/css">
      div{
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
</head>

    内部样式表
  • 外部样式表
    单独写在一个文件中，通过 link 进行引入
    rel：当前引入文件和文件本身的关系
    type：当前引入文件的编码格式
    href：用于书写引入外部样式所处位置
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

    外部样式表

2. CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。

CSS 选择器分为三种

  1. 标签名选择器div{width:100px;...}
    会直接选择某一类标签，会针对这一类标签全部生效。
    优先级：1
  2. 类选择器.div{width:100px;...}
    使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
    优先级：10
  3. ID 选择器#div{width:100px;...}
    使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
    优先级为：100

3. 引入方式的优先级
内联>内部 和 外部；
内部 和 外部 谁生效

  • 如果选择器优先级相同的话，谁后引入谁生效。
  • 如果选择器优先级不同，选择器优先级高的生效。

四、盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。先说说我们在网页：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。



CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；。如下图所示。



盒模型



1. content（盒子模型中的内容）
下面通过一个 Demo 一起来学习 盒模型

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


Demo


通过上面的这一段代码，我们可以在页面中看到一个宽高分别为100px的红色块。从这里可以看出，盒模型中的content不仅可以设置宽高（内联元素除外）还可以加背景。（在浏览器中按F12即可打开如上图的开发者工具）

1.1. background 的使用

  1. background-color 设置背景颜色
    属性值即是颜色值有五种写法

    1. 英文 如 red,yellow,blue,cyan...
    2. 十六进制 如 #ffffff...
    3. 十六进制简写 如 #fff...
    4. rgb 如 rgb(255,0,255)...
    5. rgba 如 rgba(255,255,255,0.5)...

  2. background-image 设置背景图片
    background-image=url("图片路径");

  3. background-position 设置背景定位
    background-position 有两个属性值，第一个一般为横向偏移量，第二个一般为纵向偏移量。如果只设置一个数值，另一个数值默认是 center。
    属性值可以用：left、right、top、bottom、center 以及 像素。

  4. backfround-repeat 设置背景的重复方式

    1. 默认值为 repeat 会将背景铺满整个盒模型。
    2. repeat-x 背景横向平铺。
    3. repeat-y 背景纵向平铺。
    4. no-repeat 不重复。

  5. background 的复合写法
    书写顺序为： 颜色、图片、定位、重复方式。

  6. background-attachment 设置背景图片是否随页面滚动
    background-attachment 的默认值为 scroll 即背景图片随着页面的滚动而滚动。也可以填写 fixed 即背景图片不会随着页面滚动，但是会造成偏移量，一般不使用。
    接下来稍微修改一下 Demo，看一下例子。


    <style>
 div{
     width: 70%;
     height: 1000px;
     background: red url("http://cdn-qn0.jianshu.io/assets/apple-touch-icons/
                 228-0765f118055a1d942fc286fb55f37773.png")center top no-repeat;
     background-attachment: fixed;
 }
</style>

    Demo.gif


    可以看到简书的背景图是固定不动的，将background-attachment: fixed;注释掉即可观察到偏移量了。

2. padding（盒子模型中的内边距）
还是用一个栗子来看看内边距到底是什么。

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


Demo


当我的鼠标移到 div 标签上是，显示出来 div 的宽高是 300 x 300 。

这是因为我给 div 设置了 width: 100px; height: 100px;所以 div 的宽高为 100 x 100，中间那块就是 100 x 100。

另外我给 div 设置了 padding: 100px;所以 div 的上右下左四个方向都有了 100px 的内边距，为图中外面一圈所示的，因为内边距是在盒子内部的，所以内边距会把我们的盒子撑大。

所以 div 的宽为：padding-left + width+ padding-right = 100 + 100 + 100。同理 div 的高为：padding-top + height + padding-bottom = 100 + 100 + 100。

从上面的式子中可以知道 padding 是分 上右下左 的，我们也可以给每一个边设置不同的宽度。例如 上右下左 分别为 10px 20px 30px 40px 就可以这样写。

<style>
  div{
     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 30px;
     padding-left: 40px;
  }
</style>

但是这样写还是太过于麻烦了，还有一种更加简洁的写法。


<style>
  div{
    padding: 10px 20px 30px 40px;
  }
</style>

这种写法同样能够实现 上右下左 分别为 10px 20px 30px 40px 的内边距。
当然，padding 的属性值可以填写 1 ~ 4 个不等，不同个数的属性值所控制的方向如下图所示。


padding 属性值所对应的边

3. border（盒子模型中的边框）
在原来的基础上给 div 加上 border

  <style>
    div{
      border: 5px solid blue;
    }
  </style>


border


可以看到 border 也是算在盒模型之内的，border 同样会影响盒模型的大小。我用的是 border 的复合写法，其中包括 边框的宽度 、边框的样式、边框的颜色，我们也可以拆开来写。属性的写法见下图。

border


4. margin（盒子模型中的外边距）
margin 和 padding 比较相似，但是 margin 是在盒子之外的，用来控制盒子与盒子之间的位置。margin 可以设置负数。

margin 有两种特殊情况

  • 如果两个元素是兄弟关系时，第一个元素的 margin-bottom 与 第二个元素的 margin-top 产生叠压


    <!DOCTYPE html>
<html>
<head>
  <title>盒模型</title>
  <meta charset="utf-8"/>
  <style>
      div{
          width: 100px;
          height: 100px;

          margin: 100px;
      }
      .div_1{
          background: red;
      }
      .div_2{
          background: blue;
      }
  </style>
</head>
<body>
  <div class="div_1"></div>
  <div class="div_2"></div>
</body>
</html>


    margin 的叠压


    从代码上来看，红色块与蓝色块的距离应该是 红色块的 margin-bottom，加上蓝色块的 margin-top，但实际上是取盒子之间最大的 margin 值。但是 margin-right 与 margin-left 就不是这样的情况。

  • 如果两个元素是父子关系，子级第一个元素的 margin-top 会传递给父级


    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒模型</title>
  <style>
      .div_1{
          width: 300px;
          height: 300px;
          background: cyan;
      }
      .div_2{
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
</head>
<body>
  <div class="div_1">
      <div class="div_2"></div>
  </div>
</body>
</html>

    然后给 div_2 设置 margin-top: 50px;


    margin-top 的传递.png


    这明明不是我想要的效果，那怎么才能够解决这个问题呢？下面一起来看一下解决办法。

    1. 给父级设置 border
    2. 给父级设置 padding
    3. 给父级设置 overflow:"hidden";

    办法已经告诉你们了，具体的还得你们自己去试。

    接下来看一下盒模型的实际大小的计算
    横向：border-left + padding-left + width + padding-right + border-right
    纵向：border-top + padding-top + height + padding-bottom + border-bottom

    五 javascript


    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
    在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
    [1]

    为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript

组成部分

ECMAScript

，描述了该语

javascript组成

言的语法和基本

对象

。

文档对象模型

（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（

BOM

），描述与浏览器进行交互的

方法

和

接口

。


基本特点


JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

[3]


  1. 是一种解释性脚本语言（代码不进行预编译）。
  2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
  3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
  4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

[5]



日常用途

  1. 嵌入动态文本于HTML页面。
  2. 对浏览器事件做出响应。
  3. 读写HTML元素。
  4. 在数据被提交到服务器之前验证数据。
  5. 检测访客的浏览器信息。
  6. 控制cookies，包括创建和修改等。
  7. 基于Node.js技术进行服务器端编程。

javascript实现原生ajax的几种方法介绍

项目中不需要加载jquery这种庞大的js插件要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法
自从javascript有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法。
实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下
var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
（1）下面使用上面创建的xmlHttp实现最简单的ajax get请求：
 function doGet(url) {
        // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
        createxmlHttpRequest();
        xmlHttp.open("GET", url);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function () {
            if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
                alert('success');
            } else {
                alert('fail');
            }
        }
    }
（2）使用上面创建的xmlHttp实现最简单的ajax post请求：
function doPost(url, data) {
        // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
        createxmlHttpRequest();
        xmlHttp.open("POST", url);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(data);
        xmlHttp.onreadystatechange = function () {
            if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
                alert('success');
            } else {
                alert('fail');
            }
        }
    }
一、前端认知
1. 前端是做什么的？
前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。
2. 开发流程

开发流程
具体的开发路程请见 百度脑图－便捷的思维工具
3. 前端开发的核心语言
  • HTML——结构
  • CSS——样式
  • JS——行为
二、HTML
HTML（Hypertext Markup Language）翻译过来就是 超文本标记语言。
超文本即超越文本，可以显示 文字 图片 视频 音频，最重要的是可以包含超链接。
标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。
当我们将英语单词放入到标记当中，这时候我们可以称之为 标签（单标签、双标签）。
HTML的基本结构

<!DOCTYPE html>
<!-- 文档头（类型）声明 不是标签，代表的是 HTML 5 的标准-->
<html>
<!-- 根元素所有的标签都要放在根元素中-->
<head>
<!-- 头部里面包含的绝大部分内容都是不可见的，里面的内容主要用于辅助页面的展 定义tittle 关键字 描述 编码等 -->
   
    <!--网页的标题 -->
    <title>html+css基础知识总结</title>

    <!--针对搜索引擎和解析格式的属性->
    <meta charset="utf-8"/>

    <!--定义网页的关键字-->
    <meta name="keywords" content="关键词1,关键词2,关键词3" />

    <!--定义网页的关键字-->
    <meta name="description" content="html+css基础知识总结" />
   
</head>
<body>
<!--  里面包含的绝大部分在页面中都是可见的，  主要用于搭建 HTML 结构 -->
</body>

</html>

head 中的元素
描述
<head>
定义了文档的信息
<title>
定义了文档的标题
<base>
定义了页面链接标签的默认链接地址
<link>
定义了一个文档和外部资源之间的关系
<meta>
定义了HTML文档中的元数据
<script>
定义了客户端的脚本文件
<style>
定义了HTML文档的样式文件
<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
三、CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
1. CSS 的引入方式
  • 内联样式表
    <div style="width:100px;height:100px;background-color:red;"></div>


    内联样式表
  • 内部样式表
    写在<head></head>内部
    <head>
    <style type="text/css">
      div{
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
</head>


    内部样式表
  • 外部样式表
    单独写在一个文件中，通过 link 进行引入
    rel：当前引入文件和文件本身的关系
    type：当前引入文件的编码格式
    href：用于书写引入外部样式所处位置
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>


    外部样式表
2. CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。
CSS 选择器分为三种
  1. 标签名选择器div{width:100px;...}
    会直接选择某一类标签，会针对这一类标签全部生效。
    优先级：1
  2. 类选择器.div{width:100px;...}
    使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
    优先级：10
  3. ID 选择器#div{width:100px;...}
    使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
    优先级为：100
3. 引入方式的优先级
内联>内部 和 外部；
内部 和 外部 谁生效
  • 如果选择器优先级相同的话，谁后引入谁生效。
  • 如果选择器优先级不同，选择器优先级高的生效。
四、盒模型
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。先说说我们在网页：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。


CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；。如下图所示。

盒模型

1. content（盒子模型中的内容）
下面通过一个 Demo 一起来学习 盒模型
<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


Demo

通过上面的这一段代码，我们可以在页面中看到一个宽高分别为100px的红色块。从这里可以看出，盒模型中的content不仅可以设置宽高（内联元素除外）还可以加背景。（在浏览器中按F12即可打开如上图的开发者工具）
1.1. background 的使用
  1. background-color 设置背景颜色
    属性值即是颜色值有五种写法
    1. 英文 如 red,yellow,blue,cyan...
    2. 十六进制 如 #ffffff...
    3. 十六进制简写 如 #fff...
    4. rgb 如 rgb(255,0,255)...
    5. rgba 如 rgba(255,255,255,0.5)...
  2. background-image 设置背景图片
    background-image=url("图片路径");
  3. background-position 设置背景定位
    background-position 有两个属性值，第一个一般为横向偏移量，第二个一般为纵向偏移量。如果只设置一个数值，另一个数值默认是 center。
    属性值可以用：left、right、top、bottom、center 以及 像素。
  4. backfround-repeat 设置背景的重复方式
    1. 默认值为 repeat 会将背景铺满整个盒模型。
    2. repeat-x 背景横向平铺。
    3. repeat-y 背景纵向平铺。
    4. no-repeat 不重复。
  5. background 的复合写法
    书写顺序为： 颜色、图片、定位、重复方式。
  6. background-attachment 设置背景图片是否随页面滚动
    background-attachment 的默认值为 scroll 即背景图片随着页面的滚动而滚动。也可以填写 fixed 即背景图片不会随着页面滚动，但是会造成偏移量，一般不使用。
    接下来稍微修改一下 Demo，看一下例子。

    <style>
 div{
     width: 70%;
     height: 1000px;
     background: red url("http://cdn-qn0.jianshu.io/assets/apple-touch-icons/
                 228-0765f118055a1d942fc286fb55f37773.png")center top no-repeat;
     background-attachment: fixed;
 }
</style>


    Demo.gif

    可以看到简书的背景图是固定不动的，将background-attachment: fixed;注释掉即可观察到偏移量了。
2. padding（盒子模型中的内边距）
还是用一个栗子来看看内边距到底是什么。
<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


Demo

当我的鼠标移到 div 标签上是，显示出来 div 的宽高是 300 x 300 。
这是因为我给 div 设置了 width: 100px; height: 100px;所以 div 的宽高为 100 x 100，中间那块就是 100 x 100。
另外我给 div 设置了 padding: 100px;所以 div 的上右下左四个方向都有了 100px 的内边距，为图中外面一圈所示的，因为内边距是在盒子内部的，所以内边距会把我们的盒子撑大。
所以 div 的宽为：padding-left + width+ padding-right = 100 + 100 + 100。同理 div 的高为：padding-top + height + padding-bottom = 100 + 100 + 100。
从上面的式子中可以知道 padding 是分 上右下左 的，我们也可以给每一个边设置不同的宽度。例如 上右下左 分别为 10px 20px 30px 40px 就可以这样写。
<style>
  div{
     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 30px;
     padding-left: 40px;
  }
</style>

但是这样写还是太过于麻烦了，还有一种更加简洁的写法。

<style>
  div{
    padding: 10px 20px 30px 40px;
  }
</style>

这种写法同样能够实现 上右下左 分别为 10px 20px 30px 40px 的内边距。
当然，padding 的属性值可以填写 1 ~ 4 个不等，不同个数的属性值所控制的方向如下图所示。

padding 属性值所对应的边
3. border（盒子模型中的边框）
在原来的基础上给 div 加上 border
  <style>
    div{
      border: 5px solid blue;
    }
  </style>


border

可以看到 border 也是算在盒模型之内的，border 同样会影响盒模型的大小。我用的是 border 的复合写法，其中包括 边框的宽度 、边框的样式、边框的颜色，我们也可以拆开来写。属性的写法见下图。
border

4. margin（盒子模型中的外边距）
margin 和 padding 比较相似，但是 margin 是在盒子之外的，用来控制盒子与盒子之间的位置。margin 可以设置负数。
margin 有两种特殊情况
  • 如果两个元素是兄弟关系时，第一个元素的 margin-bottom 与 第二个元素的 margin-top 产生叠压

    <!DOCTYPE html>
<html>
<head>
  <title>盒模型</title>
  <meta charset="utf-8"/>
  <style>
      div{
          width: 100px;
          height: 100px;

          margin: 100px;
      }
      .div_1{
          background: red;
      }
      .div_2{
          background: blue;
      }
  </style>
</head>
<body>
  <div class="div_1"></div>
  <div class="div_2"></div>
</body>
</html>


    margin 的叠压

    从代码上来看，红色块与蓝色块的距离应该是 红色块的 margin-bottom，加上蓝色块的 margin-top，但实际上是取盒子之间最大的 margin 值。但是 margin-right 与 margin-left 就不是这样的情况。
  • 如果两个元素是父子关系，子级第一个元素的 margin-top 会传递给父级

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒模型</title>
  <style>
      .div_1{
          width: 300px;
          height: 300px;
          background: cyan;
      }
      .div_2{
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
</head>
<body>
  <div class="div_1">
      <div class="div_2"></div>
  </div>
</body>
</html>

    然后给 div_2 设置 margin-top: 50px;

    margin-top 的传递.png

    这明明不是我想要的效果，那怎么才能够解决这个问题呢？下面一起来看一下解决办法。
    1. 给父级设置 border
    2. 给父级设置 padding
    3. 给父级设置 overflow:"hidden";
    办法已经告诉你们了，具体的还得你们自己去试。
    接下来看一下盒模型的实际大小的计算
    横向：border-left + padding-left + width + padding-right + border-right
    纵向：border-top + padding-top + height + padding-bottom + border-bottom
    五 javascript

    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
    在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
    [1]

    为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript
组成部分
ECMAScript
，描述了该语
javascript组成
言的语法和基本
对象
。
文档对象模型
（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（
BOM
），描述与浏览器进行交互的
方法
和
接口
。

基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
[3]

  1. 是一种解释性脚本语言（代码不进行预编译）。
  2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
  3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
  4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
[5]


日常用途
  1. 嵌入动态文本于HTML页面。
  2. 对浏览器事件做出响应。
  3. 读写HTML元素。
  4. 在数据被提交到服务器之前验证数据。
  5. 检测访客的浏览器信息。
  6. 控制cookies，包括创建和修改等。
  7. 基于Node.js技术进行服务器端编程。
javascript实现原生ajax的几种方法介绍
项目中不需要加载jquery这种庞大的js插件要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法
自从javascript有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法。
实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下
var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
} 

（1）下面使用上面创建的xmlHttp实现最简单的ajax get请求：
 function doGet(url) {
        // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
        createxmlHttpRequest();
        xmlHttp.open("GET", url);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function () {
            if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
                alert('success');
            } else {
                alert('fail');
            }
        }
    }

（2）使用上面创建的xmlHttp实现最简单的ajax post请求：
function doPost(url, data) {
        // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
        createxmlHttpRequest();
        xmlHttp.open("POST", url);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(data);
        xmlHttp.onreadystatechange = function () {
            if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
                alert('success');
            } else {
                alert('fail');
            }
        }
    }
paddingmargincss前端开发css选择器
「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容，转载时必须标注文章的来源（墨天轮），文章链接，文章作者等基本信息，否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容，欢迎发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论