巧克力很苦的小博客

form（形状）：定义表单的意思form元素也是一个包含框他包含了所有的表单域元素enctype是（包装类型）的简称该属性将设置表单中用户输出的数据发送到服务器时，浏览器使用编码类型application/x-www-form-urlencoded：将表单中的数据编码为名/值对的形式通过URL发给服务器multipart/form-data：将表格中的数据编码为一条消息，每个表...

textarea（文本区域）：定义输入区也就是所谓的多行文本框当需要用户输入大量数据时使用textarea元素最佳选择cols属性：定义文本区的宽度rows属性：定义文本区的高度wrap属性：定义用户输入内容大小文本域宽度时的显示方式soft：当在表格提交时，textarea中的文本不换行。默认值hard：当在表单中提交时，textarea中的文本换行。当时用hard时必须规定c...

列表1，ul：无序列表（有很多列表信息是不分顺序的 在CSS状态下能够很好的显示）ol：有序列表（不过涉及到新闻、买卖条目等信息时可以考虑用有序列表进项结构化这样可以能够体现信息的时间顺序）li：列表项目2，type：自定义属性disc：实心圆点（默认值）circle：空心圆点square：实心方块...

H5新增含义语义化的标签理解HTML语义化什么是HTML语义化？基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构； ...

1、字体属性font-weight 属性设置文本的粗细。normal 默认值。定义标准的字体。bold 定义粗体字体。bolder 定义更粗的字体。lighter 定义更细的字体。100-900定义由粗到细的字体。400 等同于 normal，而 700 等同于 bold。font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系...

浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。究其原因有两个：第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往需要很长的时间才能完成，到时候它的功能已经被人们遗忘了。第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑，这就是我的切入点。我假设你们都知道什么事CSS定位，不过还是先简单回顾一下比较好：在3年前，有四种 CSS 定位： static...

一、CSS mask遮罩的过往和现状CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。不过那个时候，遮罩只能作为实验性的属性，做一些特效使用。毕竟那个年代还是IE浏览器的时代，属性虽好，但价值有限。但是如今情况却大有变化，除了IE和Edge浏览器不支持，Firefox，Chrome以...

一、变量是个好东西在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。CSS变量var兼容性截图Chrome/Firefox/Safari浏览器都是绿油油的，兼容...

css单位中分为相对长度单位、绝对长度单位。今天我们主要讲解rem、em、px这些常用单位的区别和用法。px（绝对长度单位）px特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素...

flex-basis属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */}这定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如2...

order属性order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0。.item { order: <integer>; /* default is 0 */}默认情况下，Flex项目按源顺序排列。但是，该order属性控制它们在Flex容器中的显示顺序。案例 .flex{ display: flex; ...

align-content容器属性align-content当横轴上有额外的空间时，属性会在flex容器内对齐flex容器的线，类似于justify-content在主轴内对齐各个项的方式。.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch;...

align-items容器属性align-items属性定义项目在交叉轴上如何对齐。.container { align-items: stretch | flex-start | flex-end | center | baseline;}这定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为justify-content横轴的版本（垂直于主轴）。它可能取5个值。具体的...

justify-content容器属性justify-content属性定义了项目在主轴上的对齐方式。.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;}这定义了沿主轴的对齐。当线路上的所有弹性项目都不灵活，或者灵活但已...

flex-flow容器属性flex-flow属性含义及用法：flex-flow 属性是 flex-direction 和 flex-wrap属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式flex-direction 属性：规定灵活项目的方向flex-wrap 属性：规定灵活项目是否拆行或拆列注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用...

flex-wrap容器属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。.container{ flex-wrap: nowrap | wrap | wrap-reverse;}它可能取三个值。（1）nowrap（默认）：不换...

flex-direction容器属性flex-direction属性决定主轴的方向（即项目的排列方向）。.container { flex-direction: row | row-reverse | column | column-reverse;}这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。Flexbox（除了可选包装）是单向布局概念。将flex项目视为主要布...

了解Flex布局布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局背景在Flexb...

Filter主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度 值为0-1之间的小数sepia 褐色　　　　...

一、效过图展示：已经是比较久之前学习的文字效果了。但是还是很实用很有趣的。利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果，因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。二、介绍CSS3的 text-shadow属性text-shadow属性可以给页面上的文字添加阴影效果，基本语法...

CSS3 --添加阴影（盒子阴影的使用）CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用）CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用：1、盒子阴影box-shadowbox-shadow属性向box添加一个或多个阴影。语法：box-shadow: of...

上一章我们详细讲解的linear-gradient线性渐变，来现在我们来讲解radial-gradient径向渐变CSS3径向渐变radio-gradient1、语法径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下：background: radial-gradient(center, shape, siz...

使用linear-gradienCSS渐变使用CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。浏览器支持两种类型的渐变...

css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。css有一系列的伪元素，如:before，:aft...

CSS教程：Z-index属性大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，...

一、基本概念1、基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿2、内容区内容区是指底线和顶线包裹的区域（行内元素display:inline;可以通过background-color属性显示出来）实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。3、行距、行高行高（line-hei...

元素是文档结构的基础，在css中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而<strong>和<p>也不一样。在文档类型定义（dtd）中对不同的元素规定了不同的类型，这也是dtd对文档之所以重要的原因之一。1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。a) 替换元素...

CSS3属性transform属性详解在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一、旋转rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：trans...

三维立体效果我觉得是CSS3中最有意思的地方，不得不佩服那些开发者大神们，让我们能够通过几行CSS代码就能得到酷炫的视觉体验。浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系，这需要我们把浏览器界面想象成一个立体的场景。注意要想象这是网上流传很广的浏览器坐标系图片，从左到右的方向是浏览器x轴的正方向，从上到下的方向是浏览器y轴的正方向，而z轴正方向是面对于我们的，了解这个很重要，...

HTML video 标签定义和用法 标签定义视频，比如电影片段或其他视频流。属性HTML新增属性autoplay 属性如果出现该属性，则视频在就绪后马上播放。autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放。controls 属性如果出现该属性，则向用户显示控件，比如播放按钮。controls 属性规定浏览器应该为视频提供播放控件。...

CSS过渡使用CSS3过渡，我们可以通过改变CSS属性来创建动画。无需使用Flash动画或JavaScript下表列出了所有过渡属性：transition - 用于设置四个转换属性的简写属性transition-delay - 指定过渡效果何时开始transition-duration - 指定完成转换所需的秒数或毫秒数transition-property - 指定转换所用的CSS...

在a标签里面有四种链接方式1、内部链接2、外部链接3、空连接4、描点链接接下来让我详细解答1、内部链接<a href="text.html">内部链接</a>内部链接在同一级的文件夹上：加上文件名和后缀即可2、外部链接<a href="http://www.biadu.com">跳转至百度</a>外部链接跳转到网址一定要加上...

margin塌陷问题当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。1、垂直并列首先设置两个DIV,并为其制定宽高和背景色方便观看 <style> /*CSS部分*/ *{ margin: 0; padding: 0; } .box1{ ...

浏览器支持所有主流浏览器都支持 overflow 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。定义和用法overflow 属性规定当内容溢出元素框时发生的事情。说明这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也...

placeholder的样式设置在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果，这时就可以用以下代码来对placeholder进行样式设置了。::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */:-moz-placeholder{} /* Firefox版本4-18 */...

1、自定义 input[type=“radio”]的样式对于表单，input[type=“radio”] 的样式总是不那么友好，在不同的浏览器中表现不一。对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择...

本文涉及到input里面的（name）和（id）、（value）(placeholder)（size）（maxlength）还有label（for）input里面name值用途1： 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。用途...

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳， 供大家参考。1、将图片转换为块级对像即设置img为：display：block；在本例中添加一组CSS代...

float浮动属性定义和用法float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。...

什么是表单HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成：1） form元素：用来创建表单，并通过 action、method和enctype三个属性，来设置表单的提交路径、提交方式、编码类型。主要属性1）actio...