元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度，高度	容器的100%	容器级可以包含任何标签
行内元素	一行只能放多个行内元素	不可以直接设置宽度，高度	它本身内容的宽度	容纳文本或其他行内元素
行内快元素	一行只能放多个行内块元素	可以设置宽度，高度	它本身内容的宽度

属性	作用
border-width	边框的粗细，单位 px
border-style	边框样式
border-color	边框颜色

填充属性	解析
padding:10px;	所有四个填充都是 10px
padding:10px 5px;	上填充和下填充是 10px，右填充和左填充是 5px
padding:10px 5px 15px;	上填充是 10px，右填充和左填充是 5px，下填充是 15px
padding:10px 5px 15px 20px;	上填充是 10px，右填充是 5px，下填充是 15px，左填充是 20px

CSS笔记(二) - 页面布局盒子模型

文章目录

- 1 元素显示模式
- - 1.1 块元素
  - 1.2 行内元素
  - 1.3 行内块元素
  - 1.4 转换
  - 1.5 总结
- 2. 盒子模型
- - 2.1 页面布局
  - 2.2 盒子模型（Box Model）组成
  - 2.3 边框
  - - 2.3.1 概念
    - 2.3.2 表格的细线边框
    - 2.3.3 边框对盒子模型的影响
  - 2.4 内边距 padding
  - - 2.4.1 概念
    - 2.4.2 内边距和盒子大小的关系
  - 2.4 外边距 margin
  - - 2.4.1 外边距典型应用 - 块级元素水平居中
  - 2.5 外边距合并
  - - 2.5.1 嵌套块元素垂直外边距的塌陷
  - 2.6 清除内外边距
  - 2.7 举例
- 3 浮动 (float)
- - 3.1 传统网络布局的三种方式
  - - 3.1.1 标准流
  - 3.2 对浮动的理解
  - 3.3 浮动特点（重点）
  - - 3.3.1 脱标
    - 3.3.2 浮动元素具有行内块元素的特性
  - 3.4 浮动元素经常和标准流父级搭配使用
  - 3.5 清除浮动
  - - 3.5.1 为什么清除浮动？
    - 3.5.2 清除浮动的本质
    - 3.5.3 清除浮动方法
    - - 3.5.3.1 清除浮动 - 额外标签法
      - 3.5.3.2 清除浮动 - 父级添加overflow
      - 3.5.3.3 清除浮动 - :after伪元素
      - 3.5.3.4 清除浮动 - :双伪元素
- 4 定位
- - 4.1 定位
  - - 4.1.1 定位模式
    - 4.1.2 边偏移
  - 4.2 相对定位 relative
  - 4.3 绝对定位 absolute
  - 4.4 子绝父相的由来
  - 4.5 固定定位 fixed
  - 4.6 定位总结
  - 4.7 定位叠放次序 — z-index
  - 4.8 定位的扩展
  - - 4.8.1 margin：0 aoto失效的情况
    - 4.8.2 绝对定位盒子居中解决方案
  - 4.9 定位的扩展
  - - 4.9.1 定位特殊特性
  - 4.10 固定定位
  - 4.11 粘性定位
  - 4.12 实战 - 轮播图
- 5 参考文档

1 元素显示模式

1.1 块元素

常见的块元素

`~`
`、、`
`、`
`、`
`、`
`、`
等，其中
标签是最典型的块元素。

块元素的特点：
(1) 独占一行。
(2) 高度，宽度、外边距以及内边距都可以控制。
(3) 宽度默认是容器（父级宽度）的 100%
(4) 是一个容器及盒子，里面可以放行内或者块级元素。

1.2 行内元素

常见的 `、、、、、、、、、` 等，其中标签最典型的行内元素。

行内元素的特点：
(1) 相邻行内元素在一行上，一行可以显示多个。
(2) 高、宽直接设置是无效的。
(3) 默认宽度就是它本身内容的宽度。
(4) 行内元素只能容纳文本或则其他行内元素。

注意：

链接里面不能再放链接。

特殊情况里面可以放块级元素，但是要给转换一下块级模式更安全。

1.3 行内块元素

常见的`,,`,他们同时具有块级元素和行内元素的特点。

特点：
(1) 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个(行内元素特点)。
(2) 默认宽度就是它本身内容的宽度(行内元素特点)。
(3) 高度，行高、外边距以及内边距都可以控制 (块级元素特点)。

1.4 转换

转换为块级：`display:block`

转换为行内：`display:inline`

转换为行内块：`display:inline-block`

1.5 总结

元素模式元素排列设置样式默认宽度包含

块级元素一行只能放一个块级元素可以设置宽度，高度容器的100% 容器级可以包含任何标签

行内元素一行只能放多个行内元素不可以直接设置宽度，高度它本身内容的宽度容纳文本或其他行内元素

行内快元素一行只能放多个行内块元素可以设置宽度，高度它本身内容的宽度

2. 盒子模型

概念：页面布局三大核心，盒子模型，浮动和定位。

2.1 页面布局

网页页面布局，主要是三个步骤：
(1) 先准备好相关的网页元素，网页元素基本都是盒子模型Box。
(2) 利用CSS设置好盒子样式，然后拜访在相应位置。
(3) 往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

2.2 盒子模型（Box Model）组成

CSS盒子模型本质上是一个盒子，封装在周围的html元素，它包括：边框，外边距，内边距和实际内容。
类似下面这种：含`margin-top, margin-bottom , margin-left , margin-right , border-top …… padding-top……`等元素。

2.3 边框

2.3.1 概念

border 属性用于指定元素边框的样式、宽度和颜色。可以设置的属性分别（按顺序）：`border-width || border-style || border-color`。

属性作用

border-width 边框的粗细，单位 px

border-style 边框样式

border-color 边框颜色

2.3.2 表格的细线边框

`border-collapse:collapse;`

collapse单词是合并的意思。

`border-collapse:collapse;`表示相邻边框合并在一起。

2.3.3 边框对盒子模型的影响

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

测量盒子大小的时候，不量边框。

如果测量的时候包含了边框，则需要在`width/height`减去边框的宽度。

2.4 内边距 padding

2.4.1 概念

填充属性解析

padding:10px; 所有四个填充都是 10px

padding:10px 5px; 上填充和下填充是 10px，右填充和左填充是 5px

padding:10px 5px 15px; 上填充是 10px，右填充和左填充是 5px，下填充是 15px

padding:10px 5px 15px 20px; 上填充是 10px，右填充是 5px，下填充是 15px，左填充是 20px

2.4.2 内边距和盒子大小的关系

当我们给盒子指定`padding`，会发生如下现象：

内容和边框有了距离，添加了内边距。

`padding` 影响了盒子的实际大小。

也就是说，如果盒子已经有了宽度和高度，此时在指定内边距，会撑大盒子。

解决方案：
如果想要盒子大小和效果图一致，则让`width/height`减去多出来的内边距大小即可。

注意：
如果盒子本身没有指定`width/height`，则测试`padding`不会撑开盒子的大小。

实例：

`<style> div{ width: 300px; height: 300px; background-color: pink; margin-left:10px; } #test1{ /* width: 100%; / padding: 30px; background-color: skyblue; } #test2{ width: 100%; padding: 30px; background-color: skyblue; } style> <body> <div> <p id="test1">没写width: 100%;没有宽度，未撑大了盒子p> div> <div> <p id="test2">写了width: 100%;有宽度了，撑大了盒子p> div> body>`

2.4 外边距 margin

控制盒子与盒子之间的距离，语法略。

2.4.1 外边距典型应用 - 块级元素水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度( `width` )

盒子左右的外边距都设置为 `auto`

语法:
`.className { width:960px; margin:0 auto;}`

常见的三种写法：

`margin-left:auto; margin-right:auto;`

`margin:auto;`

`margin: 0,auto;`

注意：以上方法是让块级元素水平居中，行内元素或者行内快元素水平居中给父元素添加 `text-align: center;` 即可。

2.5 外边距合并

2.5.1 嵌套块元素垂直外边距的塌陷

概念：对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷相对较大的外边距值，而子元素没有实现上外边距效果。

举例：

如果现在我有一个父元素为 `200 200 px` 的 `div` ，里面有一个 `100 * 100 px` 的子级，我的目标效果图是子元素跟父元素的外边距有 `10px` 。

`<style> .father{ height:200px; width:200px; background-color:pink; margin-top: 50px; } .father .son{ height:100px; width:100px; background-color: skyblue; margin-top:10px; } style> <body> <div class="father"> <div class`

你可能感兴趣的:(#,CSS,css,html,css3)

android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android 自定义曲线图
个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化

uni-app实现步骤条夏夏的码农 uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st

大前端-postcss安装使用指南黑夜照亮前行的路 postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把

python转码 Desamond python 开发语言
转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，

UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM 语言模型人工智能自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调

Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单

react native 总结一切顺势而行 react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su

html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号 webpack
引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面

HTML语言剖析混沌破晓
HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签

CDH 启停使用HiveServer2 金刚_30bf
翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模

HTML背景带视频的个人炫酷引导页源码 erthre 源码 php
正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:

vue生命周期涡看你就不是好人呐 vue.js javascript 前端
1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa

C#使用ASP.NET Core Razor Pages构建网站（二）林祖师 C#c#asp.net 开发语言
上一篇文章讲了HTTP协议的基本概念、客户端Web开发技术以及ASP.NETCore框架的关键特点和创建项目方法链接：C#使用ASP.NETCoreRazorPages构建网站（一）接下来继续了解ASP.NETCoreRazorPages构建网站的后续内容了解RazorPagesRazorPages允许开发人员轻松地将HTML标记和C#代码混合在一起，这是使用.cshtml扩展名的原因。默认情况下

webpack快速基础风漫漫雨歇歇 webpack webpack 前端前端框架
文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav

vue-pdf 预览pdf (数据流) reembarkation vue.js pdf javascript
页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat

CSS color-mix() 函数蚂蚁上的大象前端的那些事 CSS css 前端
CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能，允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间，让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数？color-mix()是一个即将推出的CSS颜色函数，它能够根据指定的颜色模型（如RGB

DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动 01空间常见场景解决方案 css html
滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc

【Docker】【nginx】docker安装nginx并映射宿主机配置文件地址小丛的知识窝 nginx docker 运维
dockerrun-d-p80:80-v/root/docker/docker-nginx/nginx.conf:/etc/nginx/nginx.conf-v/root/docker/docker-nginx/html:/usr/share/nginx/html-v/root/docker/docker-nginx/logs:/var/log/nginx--namenginxnginx

Reviewing a fastq_mergepairs report to check for problems 信息搬运代号北极能
信息来源https://www.drive5.com/usearch/manual/merge_report.htmlBelowisanexamplereportproducedbythe-reportoptionoffastq_mergepairs.Thisinformationisalsoshownontheterminal(standarderroroutputstream).Theopti

html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上猫研所 html5 websocket 手机
对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI

JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？智伴科技 javascript html css
下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven

随笔：一件尴尬的小事 Doubt_Fact
今天下午，朋友找我帮忙，想让我帮忙写一个随机点名的程序，我满口答应了下来，不过我不怎么会写窗口应用，就问他可不可以以网页代替，他同意了。我便写了一个html文件，除了中间遇到一个小插曲，一个缺少的英文“,”被漏掉了，到最后一直无法正常显示……在完成后，我到网页上看到了一种把网页制作成程序的方法，只需利用程序nativefier来操作，这个程序最后基于Node.js。我又很快在我的windows机器

【大咖力荐新手必备】软件开发入门，这300篇文章就够了！高校俱乐部软件开发新手必备数据编码 IP
小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助

python flask 表单_python中flask应用（表单处理） weixin_39771260 python flask 表单
本篇文章给大家带来的内容是关于python中flask应用(表单处理)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、为什么使用Flask-WTF？request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。尽管Flask的request对象提供的支持足以处理web表单，但依然有许多任务会变得单调且重复。表单的HTML代码

Java基础知识总结（下） Yonagi833 Java 面经and八股 java 开发语言职场和发展程序人生 spring
本文部分内容节选自JavaGuide,地址:https://javaguide.cn/java/basis/java-basic-questions-03.html基础（上）→基础（中）→基础（下）异常Java异常类层次图概览Exception和Error有什么区别？在Java中，所有的异常都有一个共同的祖先java.lang包中的Throwable类.Throwable类有两个重要的子类:Exc

项目里面引入字体包react 前端小灰灰
项目里面引入字体包：①字体包放在public目录下，②新建一个font.css文件，//font.css@font-face{font-family:AlibabaSans;src:url('./font/AlibabaSans-Black.otf');}③在HTML文件全局引入④然后在less里面就能使用了：例：font-family:AlibabaSans;

CSS-DAY2 i330. 前端 css 前端
CSS-DAY22024/2/4Emmet语法快速生成HTML结构语法如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div如果有父子级关系的标签，可以用>比如ul>li就可以了如果有兄弟关系的标签，用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo或者#twotab键就可以了（默认是div，如需修改其他标签只需在.之前加上标签名即可，如p.color

问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？ zoe_ya 前端 gpt react.js
在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ

react 和vue区别小王学前端️ vue3 react.js vue.js 前端
React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript

【构建工具】PostCSS快速配置古狼_guwolf 前端开发 postcss 前端 javascript
1.安装依赖包npmi-Dpostscsspostcss-clinpmi-Dautoperfixerpostcss-preset-envnpmi-Dstylelintstylelint-config-standardnpmi-Dpostcss-pxtorem//执行命令npxpostcssstyle.css-odist.csspostcss//PostCSS核心包postcss-cli//Post

jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1

mysql 分区查询优化 annan211 java 分区优化 mysql
分区查询优化引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。可以通过查看explain执行计划，是否携带 partitions

MYSQL存储过程中使用游标 chicony Mysql存储过程
DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla

mysql 和 sqlite 区别 Array_06 sqlite
转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq

pinyin4j使用 oloz pinyin4j
首先需要pinyin4j的jar包支持；jar包已上传至附件内方法一:把汉字转换为拼音；例如：编程转换后则为biancheng      /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal

微博发送私信随意而生微博
在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据，让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。

jsp 香水浓 jsp
JSP初始化     容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行     这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。     当JSP网页完成初始化后

在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx 现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使

android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在下面的onItemLongClick 方法中参数 arg2 是选中的序号，但是我不知道如何继续处理下去 1 2 3

jdk-6u26-linux-x64.bin 安装 baalwolf linux
1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs

MongoDB经典面试题集锦 BigBird2012 mongodb
1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。在考虑数据库的成熟

JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScript Promise
Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r

[Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should

【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
隐式转换存在的必要性，在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下： val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {

Android JSON数据的解析与封装小Demo ronin47
转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;    impor

[设计]字体创意设计方法谈 brotherlamp UI ui自学 ui视频 ui教程 ui资料
从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔

单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java 算法面试题
import java.util.LinkedList; /* 单调队列滑动窗口单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就

struts2处理一个form多个submit chiangfai struts2
web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">

shell查找上个月，陷阱及野路子 chenchao051 shell
date -d "-1 month" +%F     以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。     野路子解决：假设当天日期大于15号

mysql导出数据中文乱码问题 daizj mysql 中文乱码导数据
解决mysql导入导出数据乱码问题方法：１、进入mysql，通过如下命令查看数据库编码方式： mysql> show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs

SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHP smarty sae
对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为： 01 $path

《教父》系列台词 dcj3sjt126com
Your love is also your weak point. 你的所爱同时也是你的弱点。 If anything in this life is certain, if history has taught us anything, it is that you can kill anyone. 不顾家的人永远不可能成为一个真正的男人。 &

mongodb安装与使用 dyy_gusi mongo
一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库,     linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置     tar -vxf mongodb-linux-x86_64-ubun

Git排除目录 geeksun git
在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1. 针对单一工程排除文件这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一

Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下以下假设你的脚本文件名为 test。 2) 设置脚本文件的权限 $ sudo chmod 755

第八章流量复制/AB测试/协程 jinnianshilongnian nginx lua coroutine
流量复制在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发

电商系统商品表设计 lkl
DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL

修改phpMyAdmin导入SQL文件的大小限制 pda158 sql mysql
　用phpMyAdmin导入mysql数据库时，我的10M的数据库不能导入，提示mysql数据库最大只能导入2M。　　 phpMyAdmin数据库导入出错：　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.

Tomcat性能调优方案 Sobfist apache jvm tomcat 应用服务器
一、操作系统调优对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。【适用场景】任何项目。二、Java虚拟机调优应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J

SQLServer学习笔记 vipbooks 数据结构 xml
1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

CSS笔记(二) - 页面布局 盒子模型

文章目录

1 元素显示模式

1.1 块元素

~、、

、、

1.2 行内元素

1.3 行内块元素

1.4 转换

1.5 总结

2. 盒子模型

2.1 页面布局

2.2 盒子模型（Box Model）组成

2.3 边框

2.3.1 概念

2.3.2 表格的细线边框

2.3.3 边框对盒子模型的影响

2.4 内边距 padding

2.4.1 概念

2.4.2 内边距和盒子大小的关系

2.4 外边距 margin

2.4.1 外边距典型应用 - 块级元素水平居中

2.5 外边距合并

2.5.1 嵌套块元素垂直外边距的塌陷

你可能感兴趣的:(#,CSS,css,html,css3)

CSS笔记(二) - 页面布局盒子模型