padding

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 一、查找元素 1、直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling //

今天我们来谈一谈CSS中盒模型和怪异和模型的区别 首先，在探讨这两者的区别前，我们要现搞清楚，什么是盒模型 HTML文档元素都会以一个盒子的形态来展示他的宽高，每个盒子都可以看成是由从内到外的四个部分构成，包括内容区（content）、填充(padding)、边框(border)和空白边(margin)。 其中元素的宽度width=content的宽度，border是这个元素的边框，padding是内边距（元素到边框的距离），margin是外边距（盒子之间的距离） 在样式中写的宽高，就是content的宽高 width = content_width 正常盒模型的宽度= content_width + 左右padding + 左右border + 左右margin 正常盒模型的高度= content_height + 上下padding + 上下border + 上下margin 而怪异盒模型，在样式中写的宽高，还包括了padding和border的值 即 width = content_width + 左右 padding + 左右border 为了能够更好的理解盒模型和怪异和模型的区别，我们再举两个栗子~ 盒模型~~栗子 写一个div，并给这个div宽100px，高100px，一个粉色的背景色 在浏览器中调试可见，该div的大小为 100*100

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。如图： 代码演示： 如图这个盒子宽widht:500px,高height：200px,外边距padding：100px，边框border：5px, 外间距margin：100px;所以这个盒子的大小为710px*410px 因为盒子本身的大小是这样计算的： width: width + padding-left + padding-right + border-left + border-right height: height + padding-top + padding-bottom + border-top + border-bottom 通过盒模型我们更容易理解 标准盒模型： 何为padding内边距？ 1,、padding内边距是在盒子里面，在盒子与内容之间，控制子元素在父元素里面的位置关系。 2、padding会把盒子撑大，如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉） 注意

css盒模型 一、盒模型是css布局的基础，css盒模型本身可以看做一个盒子，盒子里面装着需要写的内容，也就是html元素，它包括：内容区content、补白（填充）padding、边框border、边界（外边距）margin。他的通俗模型跟我们生活中的快递盒相似，如下图： 二、Padding Padding用来控制父元素和子元素的位置关系，也就是内容区和外面盒子的位置关系，内容区跟外面盒子上面距离12像素，可以用padding-top:12px;同样道理，上下左右都可以这样写，当然加了padding值以后，等于加了填充物，撑大了盒子的大小，需要根据实际情况减去padding值，此外padding不可写负值。 三、Margin Margin用来控制同辈元素之间的位置关系，也就是盒子和盒子之间的距离，比如盒子1和盒子2需要让他们距离20像素，可以给盒子1加上margin-right：20px，或者给盒子2加上margin-left：20px。Margin可以写负值。 四、在html里面实现的效果 .box1{width:300px ;height:300px ;background-color: #ee7f6e;} .box2{width:300px ;height:300px ;background-color: #6eb6ee;margin-top: 40px;} .box1

1、什么是盒模型？ 其实CSS盒模型是在CSS技术所使用的一种思维模型。 首先知道在网页中，一个元素占有空间的大小由哪几个部分构成，包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。 由里向外content->padding->border->margin 。4个部分一起构成了css中元素的盒模型。换言之，内容就是盒子里面装的东西；而填充就是怕盒子里的东西损坏而添加的抗震材料；边框就是指盒子本身了；至于边界则说明盒子之间的距离。如图1-1所示： 图1-1盒模型 2、盒模型的两种模式 两种模式分别为：标准模式和怪异模式。如图所示2-1和2-2所示： 图2-1标准模式 图2-2怪异模式 不同点：标准模式会被设置的 padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被 padding所撑开。（以下采用标准模式） 3、如何设置盒模型的属性？ 例子如图3-1显示： 图3-1例子 运行结构如图3-2： 图3-2运行结果（选中状况下，颜色有误差） 1）内边距padding a、单一方向上设置 padding-left:10px; padding-right: 10px; padding

本篇文章将介页面布局中的自适应布局，常见的自适应布局有以下2种：左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案 说明 ：左列固定右列自适应，也可以为右列固定左列自适应，常见于中台管理界面、移动端Web的列表展示等等。 <div class="container"> <div class="left">固定宽度</div> <div class="right">自适应</div> </div> 1.1 子元素 float:left 说明 ：左边的固定列设置为 float:left，右边的自适应列设置为 float:none。 CSS ： * { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; } 1.2 子元素 width:calc() 说明 ：自适应列的width根据calc()自动计算，如：父容器width -

本章介绍的是和css布局相关的标准盒模型基础。盒模型是css布局的基石，通过使用盒模型，可以很快的构建起网页的结构，本章向您介绍盒子的构成及其属性。 标准盒子模型的构成及其属性 从内部到外围的结构： a.内容（content）：包含图片、文本、视频、小盒子… b.内填充（padding）/补白：边框到内容之间的部分 c.盒子的边框（border） d.外边距（margin）：盒子与盒子之间的间距 盒模型具体的css属性：padding、border、margin padding的用法： 1.padding是内容与盒子之间的距离。 2.padding是处于盒子内部的。 3.padding的作用:主要控制子元素在盒子内部的位置关系。 4.padding添加在父元素上。 5.padding会把盒子撑大！！ 注：若要保持盒子原有大小，要在宽高的原来基础上减去padding值， 若盒子没有固定的宽/高(宽或者高由内容撑开），可以不减padding值。 6.单一方向上设定padding值：padding-left/right/top/bottom:属性值; 7.padding的复合设置方法：padding：属性值;（值与值之间用空格隔开） 属性值： 1个值：四周都添加padding值； 2个值：第一个值为添加上下padding值，第二个值为添加左右padding值； 3个值

css盒模型 对于很多web前端的初学者来说，经常会模糊CSS盒模型里元素的应用，那么我们应该如何来记忆和使用它呢？ 首先我们要知道什么是和模型： 概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。 盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区） 我们用一张图来表示下： 在这种图中，我们可以清晰的分辨出盒模型各个元素类型所能够控制的区域。 1.内容区域content:也就是我们要编辑显示的地方，把它定义成一个块状元素，可以包含一段文字、一张图片等等。 2.填充区域padding: 用来控制元素和内容之间的位置关系的。（用来控制父元素和子元素之间的位置关系；） Padding的使用方法： 方法一 ： padding-top:30px; 上填充 padding-right:30px; 右填充 padding-bottom:30px; 下填充 padding-left:30px; 左填充 方法二 ： padding： 1 2 3 4 1、上 2、右 3、下 4、左 padding： 1 2 3 1、上 2、左和右 3、下 padding： 1 2 1、上和下 2、左和右

浅谈盒子模型 对于刚进入前端开发学习来说，盒子模型应该是大多数人为之头痛的一个知识点。它是前端搭建结构必不可少的，所有的页面都会有它的身影。下面就谈谈我对盒子模型的认识。 首先我们来了解一下盒子模型构成： 1、内容（content） 2、边框（border） 3、外边距（margin） 4、内边距（padding） 接下来，我们来具体了解这几个构成: 一: 内容（content）： 内容区主要是盒子要显示的东西，比如文本，图片，视频等; 二: 边框（border） 边框是盒子的边界，它包裹着内容区和内边距。边框的宽度，颜色，边框类型都可以通过css属性来进行调节,属性为border：属性值1 属性值2 …;。 边框可以分别设置四个方向 属性分别为 : border-left（左） border-right（右） border-top（上） border-bottom（下） 三:内边距（padding） padding是存在于内容和边框之间的区域，它的作用就是让内容和边框产生距离（如下图） 加padding前（上图）后（下图）对比 padding的用法 padding： ； 和边框一样，padding也可以对四个方向分别进行设置 属性分别为 padding-left（左）padding-right（右）padding-top（上）padding-bottom（下）

博客园美化主题推荐之Bili 一、前言 本博客美化主题作者为： GShang ，本文仅在教导如何快速把该美化主题应用到自己的博客中，详细部署内容见 博客园主题——Bili2.0来啦 。 二、博客预览 以下为该美化主题的简单预览： 三、部署美化主题 3.1.准备工作 如果没有开通博客园页面js权限的，先要在博客设置页面申请权限，之后才能开始部署美化主题。（只要礼貌点，客服很快就会批准的😀）。 获取js权限之后进入博客设置界面： 在这里可以添加自定义的样式代码。 3.2.页面定制 CSS 代码 在 "页面定制 CSS 代码" 框中输入以下样式代码： /* 导入符号字体 */ @import url(https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css) screen and (min-width:0px); @import url(https://at.alicdn.com/t/font_438759_kmvtb0te1nd.css) screen and (min-width:0px); textarea[title=js]{ display: none; } /* 此处可自定义修改 */ /* 设置全局变量 */ @media screen and (min-width:0px) { :root { /