盒子好比快递小哥的一个快递包裹。把这个包裹延着x轴切开，如下图所示：盒子的内容就是你网购的商品，盒子的填充就是包裹里面一些泡沫或者报纸保护运输的物品的安全，边框就是包裹的盒子，盒子的外边距是快递小哥来放置快递的时候，快递与快递的距离。对应到css中如上图所示。content只需确定 width 和 height 就能确定其大小。但是对span元素不适用。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style typ...
一、图片格式&Hack（尽量不要使用） IE6对图片png-24的透明效果不支持，IE6中背景会发灰，可以使用png-8来代替。但是使用png-8代替之后清晰度会有所下降。 使用js来解决该问题，但是需要引入一个外部的js文件。 有些代码只需要在指定浏览器中（主要指IE）执行，可以使用CSS Hack 来解决。 条件Hack，如<!-- [if IE]> 语句 <![endif]--> 只对IE浏览器有效，其他的浏览器会把它当成注释。 IE10以下的支持这种模式。 ...
position 规定元素的定位类型。参考链接：https://www.cnblogs.com/guolao/p/9048308.html static 默认值，正常布局，此时的top、right、bottom、left 属性无效。 absolute 绝对定位，相对于static 定位以外 的第一个父元素进行定位。 relative 相对定位，相对于static正常布局 进行定位。 fixed固定定位，相对于window固定，滚动浏览器窗口并不会使其移动，会脱离normal flow。原文：https://www.cnblogs.com/wuyuchu...
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。内联式css样式，直接写在现有的HTML标签中.嵌入式css样式，写在当前的文件中.外部式css样式，写在单独的一个文件中css 样式由选择符和声明组成，而声明又由属性和值组成在英文大括号“｛｝”中的的就是声明，属性...
css基础系列教程:背景属性作者：www.divcss.com我们把上一节的作业的答案给大家公布一下：1、 h1 .p1{}：表示h1标签下的所有class为p1的选择符；2、 #content h1{}表示id为content下的所有h1标签；3、 h1 .p1，#content h1并列关系，对class为p1的和ID为#content下的H1作用同一个效果；4、 h1#content h2{} 表示h1下id为content标签下的h2标签，请注意这个地方不是包含没有空格而是紧接着写的。必须是属于H1里面ID为#content下...
Css的四种引入方式1.行内式<p style="background: green">这是一个p标签</p> 2.内嵌式<head><meta charset="UTF-8"><title>Title</title><style>p{background: green;}</style></head> 3.外链式<link type="text/css" rel="stylesheet" href="demo.css"> 4.导入式<style>@import "demo.css"; </style> Css 选择器1.基础选择器选择器描述例子*匹配任何元素*{}E匹配所有E标签的元素 p{}.class匹配所有class属性中包含info的元素.info...
1 CSS盒模型 在以前，程序员们是通过表格来对一个网页进行排版，也就是通过大小不一的表格和表格嵌套来定位排版网页的内容。后来，CSS出现之后，在网页布局中，为了能够使页面中的各个部分合理的进行组织，开发人员们总结出了一套完整的、行之有效的原则和规范，也就是“盒模型”。它是通过使用CSS来定义大小不一的盒子和盒子嵌套来编排网页。 因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。 页面中的所有元素...
1、行内元素（内联元素 inlineElement）特点：不占据一行，无法设置宽高及行高，其宽度随着内容增加，高度随字体大小而改变，margin只对左右起作用，上下无效。常见有：a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调2、...
### html5新增标签> 作用：让结构一目了然 |标签|描述| |--|--| |header|头部区域| |footer|尾部区域| |nav|导航区域| |aside|侧边栏| |section|区分大模块等同div| |video|视频| |audio|音频| |articel|文章| |figure|配图| |figcaption|配图说明| |main|主体区域| ```<video src="dongbei.mp4" controls autoplay loop></video><audio src="horse.ogg" controls loop autoplay></audio> src="" 标签属性，视频、音频路径/地址...
定义：层叠样式表 (Cascading Style Sheets)主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等，设置文本和背景属性的能力，为任何元素创建边框及距离语言特点：易于修改、使用，将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。...
HTML提供了<mark>标签可以让你的文本高亮，这样看起来更加醒目。<mark>标签内的文本会呈现特殊的样式，它和<em>，<strong>一样也是一个带有语义的标签。 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title></head><body> <h1>使用mark标签高亮文本</h1> <p>web前端开发需要学习<mark>HTML</mark>、<mark>CSS</mark>和<mark>JS</mark>。</p></body></ht...
无序列表有时我们的工作繁忙，杂事很多，怕忘记，就会把事情一件件列出来，防止忘记。它们的排列顺序对于我们来说并不重要，可以随意调换，我们将它称为无序列表，HTML里用<ul>标签来表示无序列表，列表里的项目则用<li>标签来表示：<ul><li></li><li></li>... </ul> 看一段实例代码：对于的浏览器显示结果是这样的：更多内容学习，请前往http://www.mayacoder.com/lesson/index 原文：http://www.cnblogs.com/malimalihong/p/5672...
之前没有开通好博客，笔记都记录在有道云，今天全部转过来！！！ 1、当同一个html元素不止一个样式定义时，内联样式（在html元素内部）拥有最高的优先权；其他如内部样式表（位于标签内部），外部样式，浏览器缺省设置次之； 2、css规则由两个主要部分构成：选择器以及一条或多条声明 例如：h1{color:red;font-size:16px} h1为选择器，{}内的为声明 3、...
本章给大家带来css网页布局必知的基础小知识（总结），让大家可以了解关于css网页布局的一些知识点。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、盒子模型的第一层到第五层： border、padding+content、background-image、background-color、margin2、清除浮动。对受到浮动影响的标签作以下操作： 1、clear: both; 2、clear: right; clear: left; 3、设置宽度width: 100%(或者固定宽度)+o...
*特殊符号：·⊙①⊕◎Θ⊙*○¤㊣㈱＠の*□*☆** ▲△▼▽⊿ ▂ ▃ ▄ ▆ * * ▉ ▊▋▌▍▎▏* 回 □ **≡ ↑↓→←↘↙♀♂┇┅‖$ @ * & # ※ 卍 卐 ∞Ψ §∮ № ⌒ ＊ *标点符号： ．。，、；：？！ˉˇ¨`~ 々～‖∶＂＇｀｜·… — ～ - 〃 ‘'“”〝〞〔〕〈〉《》「」『』〖〗【】（）［］｛｝︻︼﹄﹃ *数学符号： ＋－×÷﹢﹣±／＝ ∥∠ ≌ ∽ ≦ ≧ ≒﹤﹥ ≈ ≡ ≠ ＝ ≤ ≥ ＜ ＞ ≮ ≯ ∷ ∶ ∫ ∮ ∝ ∞ ∧ ∨ ∑ ∏...