喵了个咪蛋儿
喵了个咪蛋儿

web前端学习笔记05-CSS内边距、外边距、盒子模型、页面布局

一、CSS内边距（内补白、内补丁）

【内边距设置常用属性】

关键字 释义
padding 检索或设置对象四边的内边距，参数个数1或2(上下/左右)或4(上/右/下/左)
padding-top 检索或设置对象顶部的内边距， top顶，bottom低，left左，right右

    && padding会改变元素的大小


二、CSS外边距（外补白、外补丁）

【外边距设置常用属性】

关键字 释义
margin 检索或设置对象四边的外边距，参数个数1或2(上下/左右)或4(上/右/下/左)
margin-top 检索或设置对象顶部的外边距， top顶，bottom低，left左，right右

    && 利用margin让元素水平居中： margin: 0 auto;
    && 利用margin合并边框：外边距值设为负的边框宽度

/*上面一个元素*/
border: 5px solid green;
/*下面一个元素*/
margin-top: -5px;

三、盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中的盒子来比喻，辅助进行元素样式设置。把元素看作盒子，则对应样式分别为，盒子的边框-border、盒子内的内容与边框之间的间距-padding、盒子与盒子之间的间距-margin。

    【 盒子的实际尺寸】

盒子宽度= width + padding左右 + border左右
盒子高度= height + padding上下 + border上下
元素占位大小(宽) = width + padding左右 + border左右 + margin左右
元素占位大小(高) = height + padding上下 + border上下 + margin上下
&& 解决padding和border改变盒子大小：即设置内边距但元素大小不变 box-sizing: border-box;

四、页面布局——块元素、内联元素和内联块元素

4.1 块元素

块元素，也称为行元素，布局中常用的标签有：div、p、ul、li、h1-h6、dl、dt、dd等，它们在布局中的行为：

  • 支持全部的样式
  • 宽度默认为父级宽度的100%
  • 盒子占据一行，即使设置了宽度

4.2 内联元素

内联元素，也称为行内元素，布局中常用的标签有：a、span、em、b、strong、i 等，它们在布局中的行为：

  • 支持部分样式，不支持宽、高、margin上下
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式

4.3 内联块元素

内联块元素，也称行内块元素，是新增元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但仍归类于内联元素，它们在布局中的行为：

  • 支持全部样式
  • 如果没有设置宽高，则宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式

    【 三种元素比较】

块元素 行内元素 行内块元素
常用标签 div p ul li h1-h6 dl dt dd a span em b strong i img input类似
是否支持全部样式 是 否 是
宽高 宽度默认为父元素的100% 不支持，宽高由内容决定 支持，默认为内容的宽高
是否独占一行 是 否 否
margin 支持 仅支持margin左右 支持
padding 支持 支持 支持

4.4 三种元素之间的转换

display属性用来设置元素的类型及隐藏。
    【 display常见属性值】

属性值 释义
none 元素隐藏且不占位置
block 元素以块元素显示
inline 元素以内联元素显示（不常用）
inline-block 元素以内联块元素显示（html5中基本不用）

本节代码示例


<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/c05.css"/>
		<title>CSS内边距、外边距、盒子模型、页面布局title>
	head>
	<body>
		
		<div class="item1">div>
		<div class="item2">div>		
		<div class="box1">晚上好div><br/>
		<div class="box2">BOX2BOXdiv><br/>
		<div class="box3">BOX3BOXdiv><br/>
		<div class="box4">BOX4BOXdiv><br/>
		
		
		<div class="layout1">div>
		上面是一个块级元素，<span class="mm_span">它独占一行。span>内联元素不独占一行 <br/>
		<br/><br/><br/>
		当记忆的风吹来时让思绪的花在指尖淡淡飘香 <br/>
		
		当记忆的风吹来时
		让思绪的花在指尖淡淡飘香
		
		<br/><br/>
		
		<div class="layout2"><b>HELLOb>div>
		
		<br/><br/>
		当记忆的风吹来时，<input type="text" /> ，让思绪的花在指尖淡淡飘香 
		
		<br/><br/>
		
		<div class="c1 change1">111div>
		<div class="c2 change1">222div>
		<div class="c3 change1">333div>
		
		轻握一份懂得，
		<span class="change2">在似水的流年中，span>
		<span class="change2">轻倚一袭心湖的斑斓，span>
		<span class="change2">让真情点亮夜的星光，span>
		<span class="change2">在纯净的音乐里，span>
		<span class="change2">倾听心灵的纤尘不染。span>
			
		
		<div class="hide k1">k1div>
		<div class="hide k2">k2div>
		<div class="k3"><span>我显示了span>div>
		
	body>
html>


div{
	/*width: 100px;*/
	/*height: 100px;*/
	/*background-color: peachpuff;*/
	/*border: 5px solid green;*/
	
	/*内边距*/
	/*padding-top: 30px;*/
	/*padding-left: 30px;*/
	/*padding: 10px 20px;*/
	/*padding: 10px 20px 10px 20px;*/
}
.item1{
	width: 100px;
	height: 100px;
	background-color: plum;
	/*外边距*/
	/*margin-bottom: 50px;*/
	/*margin-left: 5px;*/
	/*元素水平居中*/
	/*margin: 0 auto;*/
	margin-top: -5px;
}
.item2{
	width: 100px;
	height: 100px;
	background-color: paleturquoise;
	/*margin: 10px 20px;*/
	/*margin: 10px 10px 10px 10px;*/
	margin-top: -5px;
}
.box1{
	width: 200px;
	height: 200px;
	background-color: orange;
	border: 10px solid green;
	padding: 20px;
}
.box2,.box3,.box4{
	width: 150px;
	height: 150px;
	color: white;
	background-color: brown;
	
	
}
.box3{
	padding: 10px;
	/*改变内边距但不改变盒子大小*/
	box-sizing: border-box;
}
.box4{
	padding: 10px;
	border: 10px solid dodgerblue;
	box-sizing: border-box;
}

/*页面布局*/
.layout1{
	/*块级元素——默认宽度是父级元素的100% ，独占一行（即使设置了宽度），支持所有样式*/
	width: 100px;
	height: 100px;
	background: palevioletred;
	margin: 20px;
	[padding: 20px;]
}
.mm_span{
	/*内联元素不独占一行，只支持部分样式，代码换行盒子会产生间距*/
	/*内联元素不支持宽度和高度设置，宽高由内容决定*/
	/*height: 100px;*/
	background: lightgreen;
	/*内联元素只支持margin左右，不支持margin上下*/
	margin: 50px;
	/*内联元素支持padding设置*/
	padding: 30px;
}
.layout2{
	width: 200px;
	height: 100px;
	background: lightskyblue;
	text-align: center;
	line-height: 100px;
}

input{
	/*行内块元素——不独占一行，盒子并在一行，支持所有样式*/
	/*若宽高不设置，则宽高由内容决定*/
	width: 200px;
	height: 100px;
	margin: 30px;
	padding: 30px;
}

/*元素类型转换*/
.change1{
	width: 100px;
	height: 100px;
	color: white;
	
	/*块元素转换为内联元素*/
	/*display: inline;*/
	
	/*块元素转换为内联块元素*/
	/*display: inline-block;*/		
}
.c1{	
	background: red;
}
.c2{
	background: green;
}
.c3{
	background: blue;
}
.change2{
	width: 100px;
	height: 100px;
	background: pink;
	/*内联元素转换为块元素*/
	/*display: block;*/
	/*内联元素转换为内联块元素*/
	display: inline-block;
}
.hide{
	width: 200px;
	height: 100px;
	background: yellowgreen;
	/*元素隐藏 且隐藏的元素不占位置*/
	display: none;
}
.k2{
	display: block;
}
.k3{
	width: 200px;
	height: 100px;
	background: bisque;
}
.k3 span{
	display: none;
}
/*当鼠标移入k3时显示文字*/
.k3:hover span{
	color: red;
	font-size: 30px;
	text-align: center;
	line-height: 100px;
	display: block;
}

你可能感兴趣的:(web前端学习)

  • WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站 html5网页设计 web前端期末大作业期末网页设计作业前端网页设计与制作html静态网页html期末大作业
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • 【网页设计】web前端期末大作业html+css web学生网页设计 web前端cssdreamweaverhtmlhtml5期末作业
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • web前端学习教程：JS的作用域链 Eric_V
    我们都知道js是一个基于对象的语言，系统内置各种对象。而window作为一个天然存在的全局对象，它承担了所有全局资源的存储。我们使用的任何全局变量，都是window下的。也就是说，在js中，实际上没有任何对象、方法是可以独立的，它们必须依赖于某个对象才可以被访问或执行。就像alert()，它的完整写法是window.alert()parseInt(),完整写法是window.parseInt()所
  • 2019web前端学习路线，教你认识HTML 强哥科技兴
    近两年来，前端开发工程师越来越火了，薪资待遇也快接近后端开发工程师了。2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后的金三银四能靠实力找到一份满意的工作！有的小伙伴很迷茫，想学前端，却没有方向！今天来给大家讲讲，在2019年，我们学习前端开发，如何才能高效学会前端开发？HTML基础学习目标1、本专业介绍、HTML相关概念，
  • 面试官当面撕程序员简历：大专生我们不收！ 秋风_bdfd
    每个人都有过求职的经历，这个过程也是很痛苦的，因为求职不可能会让你一帆风顺的，经常会使你碰壁。即便是被拒绝了之后，想想自己的哪些方面的不足，在下一次面试的时候做好准备，也没什么抱怨的。但是总有一些面试官的做法却让人感到愤怒。这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎
  • Web前端学习笔记 jusw123456 前端学习javascript
    文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、
  • 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签 lmonkey_01
    一、html5概述html5是超文本标记语言（html）的第五次重大修改，可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5，css3的新特性，以及新增的JavaScript接口。本节的主要内容是讲解html5中新增加的布局标签和媒体标签。二、html5布局标签在此前我们学习的内容中，网页布局一直都是使用div作为容器，html5新标准中，为了让容器元素有语义
  • Web前端学习-day03-JavaScript 王敏晓 前端javascriptjava
    溢出设置overflowvisible显示(默认)hidden隐藏scroll滚动显示行内元素垂直对其方式vertical-aligntop上对齐middle中间对齐bottom下对齐baseline基线对齐显示层级z-index当元素脱离文档流出现层叠显示时undefined可以通过z-index设置显示层级z-index的值越大显示约靠前此样式只能添加给非静态定位的元素undefined静态定
  • 适合初学者的WEB前端学习路线 千_锋小小千
    在当下来说web前端开发工程师可谓是高薪水的职业了。所以现在学习web前端开发的技术人员也是日益增多了，但是在学习web前端开发中盲目的去学习而没有一个完整的思路和学习路线也是不行的。那么想学好web前端，该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?在此为大家整理完整的适合零基础学员的web前端学习路线分享给大家：1.HTML5介绍内容包括：(互联网发展趋势、H5语言的优势
  • 2020年小白要知道的Web前端学习路线 web前端学习指南
    今天小编要跟大家分享的文章是关于2020年小白要知道的Web前端学习路线。准备在2020年学习Web前端技术的小伙伴们来和小编一起看看本篇文章，希望能够对大家有所帮助！第一阶段：●HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、●JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器
  • 【融职培训】Web前端学习 第7章 Vue基础教程2 创建Vue项目 lmonkey_01
    一、使用vue/cli创建Vue项目在第七章我们已经介绍了如何使用npm命令全局安装node包，本节我们需要安装一个名为@vue/cli的包来创建我们的vue项目，安装代码如下所示：npminstall-g@vue/cli安装完成之后，在命令行可以使用Vue命令命令创建一个vue项目，具体命令如下所示vuecreatehello安装过程需要连接国外服务器下载项目模板和依赖包，如果网速过慢可以在配套
  • 谁说程序员都是秃子?给你个眼神自己体会！ 秋风_bdfd
    在网络上，各种黑程序员的段子铺天满地；最最最让我受不了的就是秃顶！我们程序员是需要加班，需要动脑想逻辑。但是，我要申明一点：我不是秃头！谣传：男程序员都是秃头，女程序员满脸痘痘在我们身边有着这样一群人，每天起得比鸡早，睡得比狗晚，吃得比猪差，干得比驴多。没错，就是我们程序员。这里还是要推荐下小编的web前端学习裙:6879，58461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自
  • html常用标签大全 八重樱勿忘
    html中标签有很多，每一种标签都有着不同的用处，下面这篇文章给大家总结html常用的标签，每一种标签都会跟随一个例子，话不多说，让我们来看看具体内容。我的学习交流群web前端学习交流群字体标签，用于展示效果中修饰文字样式文字size:控制字体大小.最小1~最大7。如果设置范围不在1~7之间，设置无效color：控制字体颜色.使用英文设置（例如：red,blue…）face：控制字体类型。只能设置
  • web前端 html+css+javascript游戏网页设计实例 (网页制作课作业) IT黑马程序员 学生网页设计作业期末作业web前端学生网页作业网页模版htmldw网页设计
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • 【融职培训】Web前端学习 第3章 JavaScript基础教程4 条件语句 lmonkey_01
    一、概述语句执行流程有三种：顺序执行、条件执行、循环执行。条件语句表示的就是按照条件判断执行哪些代码（或不执行哪些代码）。例如：我们登录一个软件，输入用户名和密码的时候，输入正确则登录成功，输入错误，会弹出相关提示，这就是一个典型的分支语句（在实际开发中，这个功能或设计多个分支语句）。二、if语句if语句是最基本的条件控制语句，它让JavaScript程序可以选择执行顺序，我们可以通过一个布尔值来
  • 【融职培训】Web前端学习 第2章 网页重构9 css定位 lmonkey_01
    一、定位的基本概念在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:绝对定位相对定位固定定位二、css定位详解我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、rig
  • web前端学习（二）：React是最优秀的web框架，基于JS专注于视图层 起航吧！少年 web前端学习前端框架reactjavascript
    React是用于构建用户界面的JavaScript库,只关注于视图，主要表现为将数据渲染为HTML视图。一、React基础学习npx普通安装创建一个项目npxcreate-react-appreact-app创建一个react-app项目yarnstart启动项目(默认3000端口)http://localhost:3000/高级安装--使用脚手架npmi-gcreate-react-appcre
  • 史上最全web前端学习资料总结 强哥科技兴
    HTML+CSS入门：HTML30分钟入门：http://deerchao.net/tutorials/html/html.htmw3school：http://www.w3school.com.cn/html/index.asp菜鸟教程：http://www.runoob.com/html/html-tutorial.html绿叶学习网：http://www.lvyestudy.com/html
  • web前端学习之TypeScript（持续更新中...） 书剑走江湖 typescript前端
    web前端学习之TypeScriptTypeScript简介什么是TypeScript?TypeScriptVSJavaScript深度对比安装TypeScriptHelloTypeScript基础原始数据类型任意值TypeScript简介什么是TypeScript?TypeScript是一种有微软开发的自由和开源的编程语言，是JavaScript的超集。TypeScript拓展了JavaScri
  • 修BUG？不存在的！我是上班的，不是卖身的！ 秋风_bdfd
    作为一名程序员，加班就是家常便饭，不要加班的程序员都不是好程序员。你以为每天6点下班回家是休息时间吗？不！连上公司VPN继续写代码。你以为周末是可以休息放松的吗？不！一到周末就由新的需求，然后继续加班写代码。（ps：正常的不是996吗？[捂脸]）这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料
  • 程序员的一段代码！网友：你有没有艺术细胞？ 秋风_bdfd
    最近小编看到一条帖子，楼主将发了一段代码，结果引来大批网友的吐槽：网友表示：工具包有自带的，你还写，主要还写的很烂。还有网友表示：代码没问题，就是太啰嗦了，不优雅而已。不过也有网友表示这段代码质量差，编写这段代码的人眼界低，方法命名都错了。这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基
  • 程序员与用户之间的那些事，两个字：真实！ 秋风_bdfd
    在外行来看，程序员都是拥有超能力的人，他们用一段段的字母+数字将这个时代带上了高潮。但是在程序员眼里都认为自己很普通，与常人一样，他们都认为自己能够做到的事，其他人也能做到。（ps：我本来就是普通人好吧，我能做到的为什么别人不能做到？）这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入
  • 【融职培训】Web前端学习 第2章 网页重构15 flex布局 lmonkey_01
    一、flex布局概述此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。二、flex容器将一个元素设置如下属性1.box{2display:flex;3}此容器会变成一个flex容器（flexcontainer），
  • Web前端学习：BAT前端面试送命题—JS三座大山 Web前端小辰
    Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。给你学习路线，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd前言本篇文章比较适合3年以上的前端工作者，JS三座大山
  • Web前端学习有哪些优势，HTML5与前端什么关系？ Web前端小辰
    HTML5与Web前端什么关系，Web前端有哪些优势？Web前端就业怎么样?现在学习前端就业前景好吗?越来越多人了解Web前端，也有很多年轻人想进入到Web前端的行列，但是现在Web前端还值得大家去选择学习吗?对于很多同学疑虑的问题，下面就给大家解答一下，其实现在学习前端的话就业是没有问题的，为啥这么说?Web前端这一技术是从美工演变而来的，其名称具有很明显的时代特征。而且现在越来越多的IT企业对
  • 爱创课堂分享web前端学习路线自学如何找到工作 爱创乐育知识速递 javascriptcssvue.jshtmlhtml5
    爱创课堂分享web前端学习路线自学如何找到工作，自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件，如果基础好，自律性强那么将会容易很多，还有就是自学最难克服的并不是知识点，而是自己的学习环境是否真的能让自己静心学习。就学历和专业而言我们可以来分析成功率，本科生计算机相关专业的那么他的自学成功率就会很高，因为本身基础好，我国高考制度已经充分证明来他的实力，所以这样的人才学习能力
  • 零基础小白怎么入门前端，Web前端都学些什么 Web前端小辰
    零基础小白怎么入门前端？Web前端都学些什么？对于刚刚准备想进入Web前端行业的人来说，可能只知道Web前端开发前景好，薪资高，但是很多人都不知道要从事Web前端要学会哪些技术。那么下面就把Web前端学习路线告诉大家，让更多想进入Web前端行业的人了解更清楚一些。以下是的学习路线，学习内容包括7大学习阶段：第一阶段：前端页面重构内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、Web
  • web前端学习笔记之Node.js 偷到月亮了吗. 学习笔记node.jsjavascript
    文章目录01浏览器中的JavaScript运行环境02什么是Node.js03安装Node.js04使用Node运行JS代码05fs模块文件操作05.1什么是fs模块05.2读取指定文件内容fs.readFile()05.3写入文件内容fs.writeFile()05.4fs-整理成绩案例05.5fs-路径动态拼接问题05.6fs-使用注意事项06path模块路径操作06.1path模块是什么06
  • web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作 STU网页优选 web课程与设计前端网页设计web前端期末大作业html期末大作业
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • 想象中的程序员生活与现实版程序员！ 秋风_bdfd
    程序员，一个颇为神秘的群体，今天小编就整理了别人眼中的程序员和真实程序员之间的差别，话不多说，直接上货。外形：想象的程序员：要么是一身黑衣，充满霸气颜值，智商都爆表，现实中的程序员是这样的：工作别人眼中的程序员：这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进阶中
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他