哈喽沃德程序猿
哈喽沃德程序猿

普歌-赤道团队:盒子模型的相关阐述及重要知识点总结

文章目录

  • 前端css盒子模型的相关阐述及知识点总结
  • 一、首先要看透网页布局的本质是什么？
  • 二、盒子模型
    • 1.盒子模型(Box Model)组成
    • 2.盒子边框(border)
    • 3.表格的细线边框
    • 4.边框影响盒子的实际大小
    • 5.盒子的内边距
    • 6.盒子的外边距(margin)
    • 7.外边距合并
    • 8.清除内外边距
    • 9.圆角边框
    • 10.盒子阴影

前端css盒子模型的相关阐述及知识点总结

本文主要介绍盒子模型知识点总结

一、首先要看透网页布局的本质是什么？

网页布局的过程

  1. 先准备好相关的网页元素，网页元素基本都是盒子box
  2. 利用css设置好样式，然后摆放到相应的位置
  3. 给盒子里面装内容
    网页布局的核心本质：就是利用css摆盒子

二、盒子模型

1.盒子模型(Box Model)组成

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距和实际内容
普歌-赤道团队:盒子模型的相关阐述及重要知识点总结_第1张图片

盒子模型边框代码如下（示例）：

    div {
            width: 200px;
            height: 200px;
            /*border-width: 5px;
            /*border-width: 为边框粗细，一般都用px作为单位;*/
            /*border-style: solid;*/
            /*border-style: dashed;*/
            /*border-style: solid为边框样式，solid为实线 dashed为虚,线dotted为点线;*/
            /*border-style: dotted;
            border-color: pink;*/
            border: 1px solid red;
            border-top: 1px solid blue;

        }
    </style>
</head>

<body>
    <div></div>

2.盒子边框(border)

CSS 边框属性允许你指定一个元素边框的样式和颜色。
盒子边框的语法：
border : border-width || border-style || border-color
边框样式 border-style 可以设置如下值：
1.none：没有边框即忽略所有边框的宽度（默认值）
2. solid：边框为单实线(最为常用的) dashed：边框为虚线
3. dotted：边框为点线
普歌-赤道团队:盒子模型的相关阐述及重要知识点总结_第2张图片

普歌-赤道团队:盒子模型的相关阐述及重要知识点总结_第3张图片
边框简写：
border: 1px solid red; (没有顺序)
边框的分开写法：
border-top: 1px solid red; (只设定上边框， 其余同理)

3.表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框.
表格细线边框的语法：
border-collapse:collapse;
1.collapse 意为合并 2.border-collapse: collapse; 表示相邻边框合并在一起

4.边框影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

  1. 测量盒子大小的时候,不量边框.
  2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
    代码如下（示例）：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框影响盒子的实际大小</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

5.盒子的内边距

普歌-赤道团队:盒子模型的相关阐述及重要知识点总结_第4张图片
注意：
当我们给盒子指定 padding 值之后，发生了 2 件事情：

  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。即如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
  3. 解决办法：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
    盒子内边距即符合写法代码如下（示例）：
    <title>盒子内边距及复合写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*padding-left: 20px;
            padding-top: 20px;*/
            padding: 5px;
        }
    </style>
</head>

<body>
    <div>
        据中国天气网气象分析师王伟跃介绍，1951年以来，北京常年平均首个高温日一般出现在6月10日，
        今年相较常年平均高温日提前了18天，来得稍微有点偏早，但并不算是排在前几位的。
        北京高温日最早出现在1986年的5月7日，当天最高温达35.7℃，
        是自1951年以来高温来得最早的；最晚出现在1991年7月25日，到7月才迎来35℃以上的高温天气，可谓是姗姗来迟。
    </div>
</body>

6.盒子的外边距(margin)

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
普歌-赤道团队:盒子模型的相关阐述及重要知识点总结_第5张图片
外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须指定了宽度（width）。
  2. 盒子左右的外边距都设置为 auto 。 .header{ width:960px; margin:0 auto;}
    常见的写法，以下三种都可以：
    margin-left: auto; margin-right: auto;
    margin: auto;
    margin: 0 auto;
    注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center就行.
    盒子外边距代码如下（示例）：
 <title>盒子外边距</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        /*.one {
            margin-bottom: 20px;
        }*/
        .two {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>

7.外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:

  1. 相邻块元素垂直外边距的合并
  2. 嵌套块元素垂直外边距的塌陷
  3. 注意：
    使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。 1. 相邻块元素垂直外边距的合并
    当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有
    上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的
    较大者这种现象被称为相邻块元素垂直外边距的合并。
  4. 解决办法：
    尽量只给一个盒子添加 margin 值.
  5. 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
  6. 解决方案：
    ① 可以为父元素定义上边框。
    ② 可以为父元素定义上内边距。
    ③ 可以为父元素添加 overflow:hidden

8.清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
清除盒子内外边距代码如下（示例）：

语法：
* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }
 <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除内外边距</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        span {
            background-color: pink;
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>abcd</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</body>

</html>
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

9.圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角
语法：border-radius:length;

  1. 参数值可以为数值或百分比的形式
  2. 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
  3. 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
  4. 分开写：border-top-left-radius、
    border-top-right-radius、
    border-bottom-right-radius
    border-bottom-left-radius
    圆角边框代码如下（示例）：
  <title>圆角边框</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

10.盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

圆角边框代码如下（示例）：

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

普歌-赤道团队:盒子模型的相关阐述及重要知识点总结_第6张图片
注意：

  1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
  2. 盒子阴影不占用空间，不会影响其他盒子排列。
本文仅仅总结介绍了盒子模型的全部知识点，希望各位前端攻城狮给作者多提一些建议，文中有错误或者不当之处，评论区里请留言，作者定会及时改正！谢谢！ 最后祝大家2021年，牛年大吉，牛运亨通！

你可能感兴趣的:(笔记,html,css,css3,html5)

  • 04.文本标签 龙哥带你学编程 #html前端
    一、文本简介1、页面组成元素1）以淘宝购物官网为例，分析网页：在淘宝购物官网的首页上，我们可以看到它是由超链接，文字，图片等元素构成。2）页面组成元素①一个静态页面绝大部分由以下四种元素组成：文本图片超链接音频和视频②思考：符合以下特点的网页是静态还是动态页面？带有音频和视频带有flash动画带有css动画带有JavaScript特效不是。动态页面和静态页面区别在于：是否用到了后端技术，以及是否与
  • ruoyi 小程序使用笔记 万变不离其宗_8 笔记小程序笔记
    1.上传图片页面jsimportuploadfrom'@/utils/upload.js'methods:{upload(){constconfig={filePath:this.$refs.imageUploadRetire.files[0].path,url:'/api/common/file/upload'}upload(config).then(res=>{this.form.retire
  • Python 网络爬虫：从入门到实践 一ge科研小菜菜 编程语言Pythonpython
    个人主页：一ge科研小菜鸡-CSDN博客期待您的关注网络爬虫是一种自动化的程序，用于从互联网上抓取数据。Python以其强大的库和简单的语法，是开发网络爬虫的绝佳选择。本文将详细介绍Python网络爬虫的基本原理、开发工具、常用框架以及实践案例。一、网络爬虫的基本原理网络爬虫的工作流程通常包括以下步骤：发送请求：向目标网站发送HTTP请求，获取网页内容。解析内容：提取需要的数据，可以是HTML标签
  • H5动态生日祝福源码 cas215asd 源码html5
    源码名称：动态生日祝福源码源码介绍：一款H5动态生日祝福源码，源码带有文字敲入效果与蛋糕生成特效。需求环境：H5下载地址：https://www.changyouzuhao.cn/14540.html
  • 《今日AI-人工智能-编程日报》-源自2025年3月19日 小亦编辑部 每日AI-人工智能-编程日报人工智能
    1.豆包AI编程功能迎来三项重磅升级豆包平台今日宣布其AI编程功能迎来三项重要升级，包括：HTML实时预览：支持用户在编写HTML代码时实时查看网页效果，显著提升前端开发效率，尤其适用于小游戏和网页制作。Python代码直接运行与一键修复：用户可直接运行Python代码，并在出错时一键修复，极大降低了编程门槛，提升了开发效率。生成完整项目：新增生成完整项目的功能，帮助用户快速创建应用程序，缩短开发
  • html 中加载pdf,在HTML中嵌入PDF的推荐方法？ 梧桐应恨夜来霜 html中加载pdf
    GeorgeMahar..9我们的问题是,出于法律原因,我们不允许在硬盘上临时存储PDF.此外,在浏览器中将PDF显示为"预览"时,不应重新加载整个页面.首先我们尝试了PDF.jS.它适用于Firefox和Chrome浏览器中的Base64.但是,我们的PDF格式慢得令人无法接受.IE/Edge根本不起作用.因此,我们在HTML对象标记中使用Base64字符串进行了尝试.这再次对IE/Edge不起
  • 【css酷炫效果】css酷炫效果100篇合集 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现立体纸张折叠动效缘创作背景动画效果合集【css酷炫效果】实现鱼群游动动态效果【css酷炫效果】纯CSS实现无限旋转加载动画【css酷炫效果】纯CSS实现悬浮放大卡片【css酷炫效果】纯CSS创建流体渐变背景动画【css酷炫效果】纯CSS实现3D翻转卡片动画【css酷炫效果】纯CSS实现文字逐字显现打字效果【css酷炫效果】纯CSS实现霓虹文字呼吸灯效果【css酷炫效果
  • JavaScript HTML DOM 节点列表 宇哥资料 JavaScriptjavascripthtml开发语言
    NodeList对象是一个从文档中获取的节点列表(集合)。NodeList对象类似HTMLCollection对象。一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是NodeList对象，而不是HTMLCollection对象。所有浏览器的childNodes属性返回的是NodeList对象。大部分浏览器的querySelectorAll()返回NodeLis
  • （教程）如何在HTML网页里嵌入PDF文件？ IDRSolutions_CN pdf图像处理htmlhtml5团队开发
    开发者可以使用不同的标签在HTML中嵌入PDF文件，常见的有、和。它们都能在网页应用中显示PDF，但哪种方式更好？有没有比这更好的方式来在浏览器中显示PDF？方法1：使用标签如果不需要回退内容，可以使用标签。缺点：不常用，因为如果浏览器不支持PDF，显示会是一片空白。YourbrowserdoesnotsupportPDFfiles.Downloadthefileinstead方法2：使用标签标签
  • 【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的 RESTful API 设计：从上手到骨折 Foyo Designer springspringbootrestfulSpringMVCAsyncCrossOrigin
    点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、开篇整活儿咱今儿个唠唠Spr
  • JAVA毕业设计BS架构考研交流学习平台设计与实现计算机源码+lw文档+系统+调试部署+数据库 瑞致网络 java开发语言jvm
    JAVA毕业设计BS架构考研交流学习平台设计与实现计算机源码+lw文档+系统+调试部署+数据库JAVA毕业设计BS架构考研交流学习平台设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：
  • 5-1 使用ECharts将MySQL数据库中的数据可视化 上课的牛马 实训大数据
    方法一：使用PythonFlask框架搭建API对于技术小白来说，使用ECharts将MySQL数据库中的数据可视化需要分步骤完成。以下是详细的实现流程：一、技术架构‌后端服务‌：使用PythonFlask框架搭建API（简单易学，适合新手）数据库连接‌：通过Python的pymysql库连接MySQL前端可视化‌：HTML+JavaScript+ECharts数据流向‌：MySQL数据库→Pyt
  • 计算机毕业设计JavaBS景区票务管理系统设计与实现(源码+系统+mysql数据库+lw文档） 毅铭科技 数据库
    计算机毕业设计JavaBS景区票务管理系统设计与实现(源码+系统+mysql数据库+lw文档）计算机毕业设计JavaBS景区票务管理系统设计与实现(源码+系统+mysql数据库+lw文档）本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：
  • 金融、教育等行业如何高效利用wangEditor实现word文档网页化编辑？ 2501_90699850 金融wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 网页编辑器能否满足Word公式与图片的直接复制粘贴？ 2501_90699800 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 亿级分布式系统架构演进实战（五）- 横向扩展（缓存策略设计） power-辰南 java技术架构师成长专栏多级缓存策略springcloud分布式系统缓存一致性高并发缓存问题解决方案
    亿级分布式系统架构演进实战（一）-总体概要亿级分布式系统架构演进实战（二）-横向扩展（服务无状态化）亿级分布式系统架构演进实战（三）-横向扩展（数据库读写分离）亿级分布式系统架构演进实战（四）-横向扩展（负载均衡与弹性伸缩）核心目标降低数据库读压力，提升响应速度一、多级缓存架构客户端CDN/浏览器缓存本地应用缓存分布式缓存数据库缓冲池1.1客户端缓存缓存数据类型：•静态资源（JS/CSS/图片）•
  • 数据分析面临的三大挑战该如何解决 銨靜菂等芐紶 数据挖掘大数据数据分析
    转载自品略图书馆http://www.pinlue.com/article/2020/09/0712/2611202048648.html有效的分析已成为决定性因素，很明显，掌握它的人会蓬勃发展。但是，实现这一目标的过程并非没有障碍。最常见的数据分析挑战是什么？公司如何自信地应对它们？下面就来介绍一下。1、浏览预算限制数据分析领导者需要在当下采取行动，但同时也需要考虑未来。平衡这些需求要求他们在制
  • GS-SLAM论文阅读笔记-MGSO zenpluck GS论文阅读论文阅读笔记
    前言MGSO首字母缩略词是直接稀疏里程计(DSO)，我们建立的光度SLAM系统和高斯飞溅(GS)的混合。这应该是第一个前端用DSO的高斯SLAM，不知道这个系统的组合能不能打得过ORB-SLAM3，以及对DSO会做出怎么样的改进以适应高斯地图，接下来就看一下吧！GishelloG^s_ihelloGishello我是红色文章目录前言1.背景介绍2.关键内容2.1SLAMmodule2.2Dense
  • HTML5响应式使用css媒体查询 前段技术人 html5css媒体
    HTML负责搭建页面结构，CSS负责样式设计，并且通过媒体查询实现了较好的响应式效果，能够适应不同屏幕尺寸下面就是写了一个详细的实例。CSS部分*{margin:0;padding:0;box-sizing:border-box;}*是通配选择器，会选中页面上的所有元素。margin:0;将所有元素的外边距设置为0。padding:0;将所有元素的内边距设置为0。box-sizing:border
  • Python Textract库：文本提取 程序员喵哥 python开发语言
    更多Python学习内容：ipengtao.comTextract是一个强大的Python库，用于从各种文件格式中提取文本。无论是PDF、Word文档、Excel电子表格、HTML页面还是图像，Textract都能有效地提取其中的文本内容。Textract通过集成多种开源工具和库，实现了对多种文件格式的支持，使得文本提取变得简单而高效。本文将详细介绍Textract库的安装、主要功能、基本操作、高
  • 家用笔记本换装centos7当服务器全流程 吕域 服务器windows电脑centos
    目录1、安装centos7系统硬件准备软件和镜像准备制作启动盘2、网络连接和ssh远程登陆centos7连接网络ssh远程登陆3、笔记本闭盖不休眠（7*24小时可用）4、定时开关机（省电、保护电脑）5、配置开发环境（此处以python为例，非必要项，示需求安装）1、安装centos7系统硬件准备老旧淘汰笔记本一台（新笔记本不合算，舍不得）一个大于8G的U盘网线一根（后续联网用）软件和镜像准备软件U
  • html 5中哪个标签用于定义标题列表项,No.5 HTML常用标签 李诗旸 html5中哪个标签用于定义标题列表项
    一、标题标签为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即至。我是一级标题我是二级标题我是三级标题我是四级标题我是五级标题我是六级标题单词head的缩写，意为头部、标题。标签语义：作为标题使用，并且依据重要性递减。特点：加了标题的文字会变的加粗，字号也会依次变大。一个标题独占一行。二、段落标签在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示
  • CentOS 7.x 快速搭建ARK服务器 Aorsion Linuxarkserverarkservercentos方舟服务器搭建Linux方舟开服教程方舟多人联机
    本人菜鸟一枚，最近喜欢上了ark，也找到了2个基友，但是在别的服玩的不是很开心（非人民币玩家，你们懂），刚好有台闲置的拯救者14笔记本，i7-4720HQ、16G内存、128G三星970pro，1T机械，索性拿来装个Centos7.6搭个服自己玩,就多点电费的事，下面把自己折腾一天的开服经历做个笔记留给和我一样的童鞋，喜欢开服工具的请绕道友情提醒：ARK需要大量内存，建议使用至少具有6GBRAM以
  • 什么是 HTML 实体和转义 西门吹雪在编程 前端开发html前端
    在网页前端的源代码中，你可能会看到"这种字符串。这种字符串实际上是HTML实体之一，用于表示双引号字符（"）。HTML实体是一种用于在HTML文档中表示某些特殊字符的方法，因为这些字符在HTML中有特定的用途或可能会与HTML标签语法冲突。HTML实体的背景和用途在HTML中，一些字符有特定的意义。例如，用于标记HTML标签的开始和结束。如果你想在网页中显示这些字符而不是把它们解释为HT
  • HTML中的零宽字符 Jinuss 前端html前端
    概述零宽字符是一组在文本中没有可见宽度的字符，它们通常用于处理文本的布局、分隔和合成。下面是一些常见的零宽字符及其详细介绍：详细介绍零宽空格(ZeroWidthSpace,ZWSP)Unicode码位:U+200BHTML实体:或用途:用于防止文字自动换行。用于在文本中插入不可见的间隔，以控制排版或进行文本分析。零宽非连字符(ZeroWidthNon-Joiner,ZWNJ)Unicode码位:U
  • html实体字符 Qhumaing HTML学习html前端
    HTML实体字符HTML实体字符（HTMLEntities）是在HTML中用来表示那些在HTML文档中直接使用可能会引起问题的特殊字符的一种方法。这些特殊字符包括但不限于尖括号、与号、引号等，它们在HTML中有特定的用途（如标签界定符、属性值分隔符等），如果直接使用，浏览器可能会误解它们。以下是常见的HTML实体字符及其用途：<-小于号（）&-与号（&）"-双引号（"）&a
  • docker-compose笔记 Re_Virtual dockerdocker笔记容器
    docker目前docker官网已经无法登录，但是还可以从清华镜像站（https://mirrors.tuna.tsinghua.edu.cn/docker-ce/）下载。使用方法可以参考早期文章《docker笔记》docker-compose可以从Github下载不同版本的二进制文件，例如docker-compose-linux-x86_64。下载完成后，将二进制文件复制入路径，例如/usr/l
  • 如何在 HTML 中创建一个有序列表和无序列表，它们的语义有何不同？ 前端大白话 大白话前端八股前端html
    大白话如何在HTML中创建一个有序列表和无序列表，它们的语义有何不同？1.HTML中有序列表和无序列表的基本概念在HTML里，列表是一种用来组织信息的方式。有序列表就是带有编号的列表，它可以让内容按照一定的顺序呈现；无序列表则是用符号（像圆点、方块等）来标记每一项内容，重点在于展示并列的信息，不强调顺序。2.创建无序列表无序列表使用标签来创建，每一项内容用标签包裹。下面是具体的代码示例，代码里有详
  • 怎样修改下面HTML中存在的错误？ 2301_79698214 htmljavascript前端
    functiongetTime(){vardate=newDate();vartime=date.toLocaleDateString();vartime1=date.toLocaleTimeString();vartime2=time+''+time1span.innerHTML=time2;}window.setInterval("getTime()",1000)window.alert("这
  • linux自律 第 40 天 嵌入式大大白 数据库
    在学习了sqlite3数据库的增删改查之后，我开始做了一个基于web服务端的商品查询系统，将商品的图片，名称，id，详细描述和关键词等都放入了该数据库中，利用该数据库和html构建的网页来完成该项目。该项目首先需要设计出登录系统，登录需要密码和账号，所以需要注册，我打算在注册的时候使用数据库，将注册的信息放在数据库中。然后使用账号密码登录的时候，输入的账号密码在请求报文中，以post的形式发出来，
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "[email protected]"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他