1px背后的知识点汇总整理:各种像素
627 2023-04-03 03:31:01
<head>
是头标签里面的东西不会在网页里显示,它是用来帮助浏览器解析页面。<!-- -->
,不会在网页中显示,只会在源码中显示。<title>
网页的标题,默认显示在浏览器标题栏中,搜索引擎在检索页面时会首先检索title
<body>
标签用来设置网页的主体内容(网页可见的内容)。<font>
标签中的size
属性最大就是7。<meta>
标签用来设置网页的一些元数据,比如网页的字符集,关键字,简介。 <meta>
是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加一个/
,(<meta/>
)。<meta>
标签设置网页的关键字 name=“keywords”
content=“可以设置多个关键字,用逗号隔开”
,<meta>
标签设置网页的描述,name=“description”
content="描述词"
搜索引擎在检索页面时,会同时检索页面中的关键词和描述,到那时这两个值不会影响页面在搜索引擎中的排名。 使用<meta>
标签可以用来做请求的重定向<meta http-equiv="refresh" content="秒数;url=目标路径">
。<h1>
~<h6>
,显示效果从大到小。<h1>
最重要,表示一个网页中的主要内容,<h2>
~<h6>
重要性依次降低,对于搜索引擎检索完<title>
,会立即查看<h1>
中的内容,会影响到页面在搜索引擎中的排名,页面只能写一个<h1>
。<p></p>
,<p>
标签中的文字,默认会独占一行,并且段与段之间会有一个间距。<br>
标签来表示一个换行,<br>
标签是一个自结束标签<br/>
。<hr>
标签是一个自结束标签,生成一条水平线<hr/>
<img>
是一个自结束标签,属性src
:设置一个外部图片的路径 alt
:可以设置在图片不能显示时的描述,搜索引擎可以通过alt属性来识别不同的图片,如果不写alt
属性,则搜索引擎不会对<img>
标签中的图片进行收录。<iframe>
标签来创建一个内联框架。<iframe>
的属性:src
:指向一个外部页面的路径,可以使用相对路径 name
:可以为内联框架指定一个name属性。(在现实开发中不推荐使用内联框架,因为内联框架中的内容不会被搜索引擎检索。)<a>
标签来创建一个超链接。超链接<a>
标签的属性: href
:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址。 target
:可以用来置顶打开链接的位置可选值:(1)_self
:表示在当前窗口中打开(默认值)。(2)_blank
:在新的窗口中打开链接。(3)可以设置一个内联框架的name
属性值,链接将会在指定的内联框架中打开。#
作为占位符。如果将链接地址设置为#
,则点击超链接以后,会自动跳转到当前页面的顶部。<center>
标签中的内容会默认在页面中居中显示。(不推荐使用)id
属性在同一个页面中只能有一个不能重复。href=“mailto:邮件地址”
当点击这个超链接时,会默认打开计算机的默认电子邮件客户端,并且将收件人设置mailto
后的邮件地址。<div>
这个标签没有任何语义,就是一个块元素,不会为里面的元素设置任何的样式,主要是为页面进行布局的,块元素是会独占一行的元素,无论内容有多少,都会独占一整行。类似还有<p>
标签,<h1>
等等。<span>
标签是个内联元素(行内元素),没有任何语义,专门来选中文字,然后为文字设置样式,行内元素指的是只占自身大小的元素,不会占用一整行。类似<a>
,<img>
,<iframe>
。<a>
元素可以包含任意的元素,除了它本身,<p>
元素不可以包含任何其他的块元素。<em>
标签用于表示一段内容中的着重点。<strong>
标签用于表示一个内容的重要性。这两个标签可以单独使用,也可以一起使用。通常em
显示为斜体,而strong
显示为粗体。<em>
和<strong>
这两个标签表示一个强调的内容。em
主要表示语气上的强调。strong
表示一个强调的内容,比em
更强烈。<i>
标签中的内容会以斜体显示。<b>
标签中的内容会以加粗显示。html5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体。就可以使用<b>
和<i>
标签。<small>
标签中的内容会比他的父元素中的文字要小一些,在Html5中使用<small>
标签来表示一些细则一类的内容,比如:合同中小字,网站的版权声明都可以放到<small>
标签中。<cite>
标签,表示参考的内容。 比如:书名,歌名,话剧名。<q>
标签表示一个短的引用(行内引用)<q>
标签引用的内容,浏览器会默认加上引号。<blockquote>
标签表示一个长引用(块级引用)独占一行。<sup>
标签来设置一个上标,<sub>
标签用来表示一个下标。<del>
标签来表示一个删除的内容,<del>
标签中的内容会自动添加删除线。<ins>
标签表示一个插入的内容。<ins>
标签中的内容会自动添加下划线。<pre>
是一个预格式标签,会将代码中的格式保存,不会忽略多个空格,<code>
专门用来表示代码,一般结合使用<pre>
和<code>
来表示一段代码。<input>
标签可以创建一个文本输入框。title
属性可以给任何标签指定,当鼠标移入到元素上时,元素中的title
属性的值将会作为提示文字显示。overflow
可以设置父元素如何处理溢出内容,可选值:visible
(默认值),不会对溢出内容做处理,元素会在父元素意外的位置显示。hidden
:溢出的内容会被修剪,不会显示。scroll
:会为父元素添加滚动条,通过拖动滚动条来查看完整内容,该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条。auto
:会根据需求自动添加滚动条(需要水平就添加水平滚动条,需要垂直就添加垂直滚动条,都不需要就都不加,都需要就都加)doctype
声明,来告诉浏览器网页的版本,不写文档声明会导致有些浏览器进入一个怪异模式,进入怪异模式以后,浏览器加载页面会导致页面无法正常显示。<!doctype html>
是html5的文档声明。一般来说用html5的文档声明,简洁好记,同时也是主流版本,其他版本的文档声明比较长,用的也比较少,这里不一一赘述,感兴趣可以自行查找。<meta charset="UTF-8"/>
<
; > >
; 空格  
;版权符号 ©
; 浏览器 解析到实体时会自动将实体转换为其对应的字符。<ul>
标签来创建一个无序列表 ,使用<li>
标签在<ul>
标签中创建一个一个的列表项,一个<li>
标签就是一个列表项。通过type
属性可以修改无序列表的项目符号 可选值:disc
(默认值)实心的圆点。square
,实心的方块。(<ul>
和<li>
都是块元素)<ol>
标签来代替<ul>
标签,有序列表使用有序的序号作为项目符号。type
属性可以指定序号的类型,可选值 1,默认值,使用阿拉伯数字。 a/A采用小写或者大写作为符号。i/I采用小写或大写的罗马数字作为序号。(<ol>
也是块元素)<dl>
标签来创建一个定义列表,<dl>
标签中有两个子标签,<dt>
标签:被定义的内容。<dd>
标签:对定义内容的描述。同样<dl>
和<ul>
和<ol>
之间都可以互相嵌套。<table>
标签来创建一个表格。在<table>
标签中使用<tr>
标签来表示表格中的一行,有几行就有几个<tr>
标签,在<tr>
标签中需要使用<td>
标签来创建一个单元格,有几个单元格就有几个<td>
标签。<table>
标签中有align
属性,设置成center
表示表格居中。colspan
属性表示横向的合并单元格,rowspan
属性用来设置纵向设置单元格。语法 :colspan(rowspan)=“合并的单元格数”
auto
。块元素在文档流中的高度默认被内容撑开。float
来使元素浮动,从而脱离文档流。可选值:none
(默认值),元素默认在文档流种排列。left
:元素会立即脱离文档流,向页面的左侧浮动。right
:元素会立即脱离文档流,向页面的右侧浮动。当为一个元素设置浮动以后(float
属性是一个非none
的值)元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动,元素浮动以后,会尽量向页面的左上或右上漂浮,直到遇到父元素的边框或者其他浮动元素。如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素。浮动的元素不会超过它上边的兄弟元素,最多最多一边齐。style
属性当中,给谁设置就写在哪里 ,将样式直接编写到style属性中,这种样式称为内联样式,内联样式只对当前的元素中的内容起作用,内联样式不方便复用 ,内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用。style
中每个样式写完了要用分号分开。head
中的style
标签里,将样式表编写的style
标签中,然后通过css选择器选中指定元素。然后可以同时为这些元素一起设置样式,这样可以使样式进一步复用。将样式表编写到style
标签中,也可以使表现和结构进一步分离,是推荐的使用方式。style
中养成写type="text/css"
用来兼容老版本的浏览器。<style>
标签里是css代码,不能出现HTML中的内容,包括HTML的注释。<link>
标签来将外部的css文件引入到当前页面中,这样外部文件中的css样式表会应用到当前页面中。语法:<link rel=“stylesheet” type="text/css" href="外部文件相对路径">
将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过<link>
标签引入,可以利用浏览器的缓存加快用户访问的速度提高了用户体验,所以在开发中最推荐使用的是外部的css文件。color
设置颜色,font-size
设置字体大小。width
:可以用来修改图片的宽度,height
:可以用来修改图片的高度,一般使用px作为单位。当宽度和高度两个属性如果只设置一个,另一个也会同时等比例调整大小。width
和height
的值为auto
时,此时指定padding
不会影响可见框的大小。而是会自动修改宽度,以适应padding
。<style>
标签中,或者是css文件中。/* */
ul{list-style:none;}
。<li>
标签设置背景图片的方式来设置。text-decoration
的默认值是underline
,如果需要去除超链接的下划线则需要将该样式设置为none
。letter-spacing
可以指定字符间距。word-spacing
可以设置单词之间的距离。实际上就是设置词与词之间空格的大小。display
属性可以修改元素的类型,可选值: inline
:可以将一个元素作为内联元素显示。block
:可以将一个元素设置成块元素显示。inline-block
:将一个元素转换为行内块元素。(行内块元素可以使一个元素既有行内元素的特点,又有块元素的特点,即可以设置宽高,又不会独占一行)none
:不显示元素,并且元素不会在页面中继续占有位置。(使用该方式隐藏的元素,不会在页面中显示,并且不再占据页面的位置)。visibility
:可以用来设置元素的隐藏和显示的状态,可选值:visible
(默认值),元素默认会在页面显示。hidden
:元素会隐藏不显示。使用visibility:hidden
隐藏的元素虽然不会在页面中显示,但是它的位置会依然保持。auto
时,padding
会自动调整宽度的大小来适应父元素,确保子元素不会溢出父元素。(会主动往里挤)z-index
属性可以用来设置元素的层级。可以为z-index
指定一个正整数作为值 ,该值将会作为当前元素的层级。层级越高,越优先显示。对于没有开启定位的元素不能使用z-index
。父元素的层级再高,也不会盖住子元素。opacity
可以用来设置元素背景的透明,它需要一个0-1之间的值。0表示完全透明,1表示完全不透明,0.5表示半透明。opacity
属性在IE8及以下的浏览器中不支持,IE8及以下的浏览器需要使用如下属性代替,filter:alpha
(opacity
=透明度),透明度需要一个0-100之间的值,0表示完全透明,100表示完全不透明,50表示半透明。这种方式支持IE6,但是这种效果在IE Tester中无法测试。<body>
标签的最后引入外部的js文件。1.<cursor>
标签可以用来设置鼠标指针的样式。
color
是前景色(字体颜色),font-size
(设置文字大小,浏览器中默认的文字大小为16px)设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的,我们设置的font-size
实际上是设置格的高度,并不是字体的大小,一般情况下文字都要比格要小一些,有时也会比格大,根据字体的不同,显示效果也不同。
font-family
可以指定文字的字体,当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体。该样式可以同时指定多个字体,多个字体之间使用逗号分开,当采用多个字体时,浏览器会优先使用前边的字体,如果前边没有在尝试下一个。
浏览器使用的字体默认就是计算机中的字体,如果计算机中有,则使用,如果没有就不用。在开发中,如果字体太奇怪,用的太少了,尽量不用使用,有可能用户的电脑没有,就不能达到想要的效果。
字体的分类,在网页中将字体分为5大类,可以将字体设置为这些大的分类。当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式,一般会将字体的大分类指定为font-family
中的最后一个字体(一般用serif
和sans-serif
)。serif
(衬线字体),sans-serif
(非衬线字体),monospace
(等宽字体)程序语言一般都是等宽字体,cursive
(草书字体),fantasy
(虚幻字体)
font-style
可以用来设置文字的斜体,可选值:normal
,默认值,文字正常显示 。 italic
文字会以斜体显示。oblique
文字会以倾斜的效果显示。大部分浏览器都不会对倾斜和斜体作区分。也就是说设置italic
和oblique
的效果往往是一样的,一般只会使用italic
。
font-weight
可以用来设置文本加粗的效果,可选值:normal
,默认值,文字正常显示。bold
,文字加粗显示。该样式也可以指定100-900之间的9个值,但是由于用户的计算机往往没有这么多级别的字体,所以不能达到我们想要的效果。也就是200有可能比100粗,300有可能比200粗,但是也可能是一样的。
font-variant
可以用来设置小型大写字母,可选值:normal
,默认值,文字正常显示。small-caps
文本以小型大写字母显示。小型大写字母:将所有的字母都以大写形式显示,但是小写字母的大写,要比大写字母的大小小一些。
在css中还为我们提供了一个样式叫font
,使用该样式可以同时设置字体相关的所有样式。可以将字体的样式的值统一写在font
样式中,不同的值之间使用空格隔开。使用font设置字体样式时,斜体,加粗,小大字母,没有顺序要求,甚至可以不写,如果不写则使用默认值。但是要求文字的大小和字体必须写。而且字体必须是最后一个样式,大小必须是倒数第二个样式。实际上使用简写属性也会有一个比较好的性能。
在chrome浏览器中字体最小支持到12px,1-11都显示为12px。
line-height
来设置行高。行高类似于单线本,线与线之间的距离就是行高,网页中的文字也是写在一个看不见的行中的,而文字会默认在行高中垂直居中显示。行间距=行高-字体大小
。通过设置line-height
可以间接的设置行高,可以接收的值:1.直接接收一个大小,2.可以指定一个百分数,则会相对于字体去计算行高。3.可以直接传一个数值,则行高会设置为字体大小相应的倍数。font
中也可以指定行高,在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值。text-transform
可以用来设置文本的大小写,可选值:none
(默认值),该怎么显示就怎么显示不做任何处理。 capitalize
单词的首字母大写,通过空格来识别单词。uppercase
所有的字母都大写。lowercase
所有的字母都小写。text-decoration
可以用来设置文本的修饰,可选值:none
(默认值),不添加任何修饰,正常显示。underline
为文本添加下划线。overline
为文本添加上划线。line-through
为文本添加删除线。text-align
用于设置文本的对齐方式,可选值:left
(默认值),文本靠左对齐。right
文本靠右对齐。center
文本居中对齐。justify
两端对齐,通过调整文本之间的空格大小来达到一个两端对齐的目的。text-indent
用来设置首行缩进。当给它指定一个正值时,会自动向右侧缩进指定的像素。如果为它指定一个负值,则会向左移动指定的像素。通过这种方式可以将一些不想显示的文字隐藏起来。这个值一般都会使用em
作为单位。resize:none
)<placeholder>
标签来指定提示文字(水印),这个属性在IE8及以下的浏览器中不支持,如果要兼容IE8需要使用js。background-image
来设置背景图片,语法:background-image:url(相对路径)
。如果背景图片大于元素,默认会显示图片的左上角。如果背景图片和元素一样大,则会将背景图片全部显示。相对路径写在哪就相对于哪个文件夹。如果背景图片小于元素大小 ,则会默认将背景图片平铺以充满元素。可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色。一般情况下设置背景图片时都会同时设置一个背景颜色。background-repeat
用于设置背景图片的重复方式,可选值:repeat
(默认值),背景图片会双方向重复(平铺)。no-repeat
,背景图片不会重复,有多大就显示多大。repeat-x
:背景图片沿水平方向重复。repeat-y
:背景图片沿垂直方向重复。background-position
可以调整背景图片在元素中的位置,可选值:该属性可以使用top,right,left,bottom,cente
r中的两个值来指定一个背景图片的位置。也可以直接指定两个偏移量,第一个值是水平偏移量(如果指定的是一个正值,则图片会向右移一指定的像素,如果指定的是一个负值,则图片会向左移指定的像素),第二个值是垂直偏移量(如果指定的是一个正值,则图片会向下移一指定的像素,如果指定的是一个负值,则图片会向上移指定的像素)。background-attachment
用来设置背景图片是否随页面一起滚动。可选值:scroll
默认值,背景图片随着窗口滚动。fixed
:背景图片会固定在某一位置,不随页面滚动。当背景图片的background-attachment
设置为fixed
,背景图片的定位永远相对于浏览器的窗口。不随窗口滚动的图片 ,一般都是设置给body
,而不设置给其他元素。rgb(红色的浓度,绿色的浓度,蓝色的浓度)
;颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有,浓度也可以采用一个百分数来设置,需要一个0%-100%之间的数字。使用百分数最终也会转换为0-255之间的数。rgb
值来表示颜色,使用三组两位的十六进制数字,每组表示一个颜色,第一组表示红色的浓度,第二组表示绿色的浓度,第三组表示一个蓝色的浓度,范围都是00~ff。语法: #红色绿色蓝色
,00表示没有,相当于rgb
中的0,ff表示最大,相当于rgb
中的255 例如红色#ff0000
,绿色#00ff00
,蓝色#0000ff
;像这种两位重复的颜色可以简写 比如#ff0000
可以写成#f00
,#aabbcc
可以写成#abc
px
,像素是在网页中使用的最多的一个单位,一个像素就相当于屏幕中的一个小点,屏幕实际上就是由这些像素点构成的。但是这些像素点是不能直接看见。不同的显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。%
也可以将单位设置为一个百分比的形式,这样浏览器将会根据其父元素的样式来计算该值。使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变,在我们创建一个自适应的页面时,经常使用百分比作为单位。em
和百分比类似,它是相对于当前元素的字体大小来计算的,1em=1font-size
,使用em
时,当字体大小发生改变时,em
也会随之改变,当设置字体相关的样式时,经常会使用em
。标签名{}
id
选择器:通过元素的id
属性值选中唯一的一个元素。语法: #id属性值{}
,对于id选择器来说,不建议使用复合选择器。class
选择器):可以为元素设置class
属性,class
属性和id
属性类似,但是class
属性可以重复,拥有相同class
属性值的元素,我们称为一组元素,通过元素的class
属性值选中一组元素。语法:.class元素值{}
,可以同时为一个元素设置多个class
属性值,多个值之间使用空格隔开。选择器1,选择器2,选择器n{}
*{}
选择器1选择器2选择器n{}
祖先元素 后代元素{}
父元素>子元素{}
,IE6及以下的浏览器不支持子元素选择器。a:link
表示普通的链接(没访问过的链接)a:visited
表示访问过的链接,由于涉及到用户的隐私问题,所以使用visited
伪类只能设置字体颜色。( 浏览器是通过历史记录来判断一个链接是否访问过)a:hover{}
伪类表示鼠标移入的状态。a:active{}
表示的是超链接被点击的状态 hover
和active
也可以为其他元素设置。IE6中,不支持对超链接以外的元素设置hover
和active
。:focus
伪类可以获取焦点<p>
标签中选中的内容使用样式,可以使用::selection
伪类。注意:这个伪类在火狐中需要采用另一种方式编写,::-moz-selection{}
<P>
标签中 第一个字符来设置一个特殊的样式p:first-letter{ color:red;}
例如:为<p>
标签中的第一行设置一个背景颜色为黄色p:first-line{background-color:yellow;}
:before
表示元素最前边的部分。一般before
都需要结合content
这个样式一起使用,通过content
可以向before
或after
的位置添加一些内容。:after
表示元素最后边的部分。用的不是特别多。:not(选择器)
:link,:visited,:hover,:active,
顺序就是如此。否则会被覆盖。background-position
来切换要显示的图片的位置,这种技术叫做图片整合技术(css-Sprite
),整合的图片成为雪碧图。[属性名]
选取含有指定属性的元素。[属性名=“属性值”]
选取含有指定属性值的元素。[属性名^="属性值"]
选取属性值以指定内容开头的元素。[属性名$=“属性值”]
选取属性值以指定内容结尾的元素。[属性名*=“属性值”]
选取属性值以包含指定内容的元素。:first-child
可以选中第一个子元素。 :last-child
可以选中最后一个子元素。 :nth-child
可以选中任意位置的子元素,该选择器后边可以制定一个参数,指定要选中第几个子元素。even
表示偶数位置的子元素,odd
表示奇数位置的子元素。语法 :nth-child()
:first-of-type
:last-of-type
:nth-of-type
和上面的类似,只不过child是在所有的子元素中排列,而type是在当前类型的子元素中排列。前一个+后一个
前一个~后边所有
。<!--[if IE]><![endif]>
,通过这种方式可以专门给IE浏览器设置样式表来解决兼容性问题。*
的样式只有IE7及以下的浏览器认识。* html
,则该选择器只有IE6能够识别。<table>
标签创建表格,<table>
是一个块元素。<table>
和<td>
边框之间默认有一个距离,通过border-spacing
属性可以设置这个距离。border-collapse
可以用来设置表格的边框合并。如果设置了边框合并,则border-spacing
自动失效。<th>
标签来表示表头中的内容,它的用法和<td>
标签一样, 不同的是有默认效果(居中和加粗)<thead>
(表头),<tbody>
(表格主体),<tfoot>
(表格底部),这三个标签的作用,就是来区分表格的不同的部分,他们都是<table>
标签的子标签,都需要直接写到<table>
标签中,<tr>
需要写在这些标签当中,<thead>
中的内容,永远会显示在表格的头部,<tfoot>
中的内容,永远都会显示在表格的底部,<tbody>
标签中的内容,永远都会显示在表格的中部。如果表格中没有写<tbody>
标签,浏览器会自动在表格中添加<tbody>
标签并且将所有的<tr>
标签都放到<tbody>
标签中,所以注意<tr>
标签并不是<table>
标签的子元素,而是<tbody>
标签的子元素,通过table>tr
无法选中需要通过tbody>tr
<td>
标签最多的那行决定,表格是可以嵌套的,可以在<td>
标签中放置一个表格。content
),内边距(padding
),边框(border
),外边距(margin
)。width
来设置盒子内容区的宽度,使用height
来设置盒子内容区的高度。width
和height
只是设置的盒子内容区的大小,而不是盒子的整个大小。border-width
:边框的宽度。border-color
:边框颜色。border-style
:边框属性。border-width
设置边框的宽度,使用border-width
可以分别指定四个边框的宽度,如果在border-width
指定了四个值,则四个值会分别设置给上右下左,按照顺时针的方向设置的。如果指定三个值,则三个值分别设置给上,左右,下。如果指定两个值,则两个值分别设置给上下,左右。如果指定一个值,则四边都是该值。除了border-width
,css中还提供了border-xxx-width
,xxx的值可能是top,right,bottom,left,
专门用来设置指定边的宽度。border-color
设置边框的颜色,使用border-color
可以分别指定四个边框的颜色,如果在border-color
指定了四个值,则四个值会分别设置给上右下左,按照顺时针的方向设置的。如果指定三个值,则三个值分别设置给上,左右,下。如果指定两个值,则两个值分别设置给上下,左右。如果指定一个值,则四边都是该值。除了border-color
,css中还提供了border-xxx-color
,xxx的值可能是top,right,bottom,left
,专门用来设置指定边的颜色。border-style
:设置边框的样式,可选值:none
(默认值),solid
实线,dotted
点状虚线,dashed
虚线,double
双线。style
也可以分别指定四个边的边框样式,规则和width
一致,同时它也提供border-xxx-style
四个样式,来分别设置四个边。none
。border
是边框的间接样式,通过它可以同时设置四个边框的样式,宽度,颜色。而且没有任何顺序要求。border
一指定就是同时指定四个边不能分别指定。border-top,border-right,border-left,border-bottom
可以单独设置四个边的样式,规则和border
一样,只不过它只对一个边生效。padding
):指的是盒子的内容区与盒子边框之间的距离,一共有四个方向的内边距。可以通过:padding-top,padding-right,padding-bottom,padding-left
来设置四个方向的内边距。内边距会影响盒子可见框的大小。元素的背景会延伸到内边距。盒子的大小由内容区,内边距和边框共同决定。盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width.可见框的高度=border-top-width+padding-top+height+padding-bottom+border-bottom-width。
padding
可以同时设置四个边框的样式,规则和border-width
一致。margin-top,margin-right,margin-bottom,margin-left
。由于页面中的元素都是靠左靠上摆放的,所以注意当我们设置上和左外边距时,会导致盒子自身的位置发生改变。而如果是设置右和下外边距时,会导致盒子其他位置发生改变。外边距也可以指定一个负值,如果外边距设置的是负值,则元素会向反方向移动。margin
还可以设置为auto
,auto
一般只设置给水平方向的margin
。如果只指定左外边距或有外边距的margin
为auto
则会将外边距设置为最大值。垂直方向外边距如果设置为auto
,则外边距默认就是0.如果将left
和right
同时设置为auto
,则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto
以使子元素在父元素中水平居中。外边距同样可以使用简写属性margin
,可以同时设置四个方向的外边距,规则和padding
一样。特殊形式(margin:0 auto;居中
)padding
来代替margin
),相邻条件(可以给父元素设置边框,或者设置父元素的内边距)。margin
和padding
,而他的这些默认样式,正常情况下是不需要使用的,所以我们往往在编写样式之前需要将浏览器中的默认的margin
和padding
统统去掉。*{margin:0;padding:0;}
width
和height
,内联元素可以设置水平方向的内边距,内联元素可以设置垂直方向的内边距,但是不会影响页面布局,内联元素可以设置边框,但是垂直的边框不会影响页面布局,内联元素支持水平方向的外边距,内联元素不支持垂直外边距。display:table
可以将一个元素设置为表格显示。可以解决父子元素外边距重叠clearfix
是一个多功能的,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠,.clearfix:before,.clearfix:after{ content:"";display:table;clear:both;}
W3C
的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context
,简称BFC
,该属性可以设置打开或者关闭,默认是关闭的,当开启元素的BFC
以后,元素将具有如下的特性:BFC
的元素不会被浮动元素所覆盖。BFC
的元素可以包含浮动的子元素。BFC
inline-block
(可以解决高度塌陷的问题,但是会导致宽度丢失,不推荐使用这种方式)overflow
设置为一个非visible
的值。(推荐方式,将overflow
设置为hidden
是副作用最小的开启BFC
的方式。解决高度塌陷最简单的方式)BFC
,所以使用这种方式不能兼容IE6,在IE6中虽然没有BFC
,但是具有另一个隐含的属性叫做hasLayout
,该属性的作用和BFC
类似,所以在IE6浏览器可以通过开hasLayout
来解决该问题,开启方式很多,副作用最小的:直接将元素的zoom
设置为1即可zoom
表示放大的意思,后边跟着一个数值,写几就将元素放大几倍。zoom
:1表示不放大元素,但是通过该样式可以开启hasLayout
。zoom
这个样式,只在IE中支持,其他浏览器都不支持。hasLayout
。<from>
标签创建一个表单。<form>
标签中必须制定一个action
属性,该属性指向的是一个服务器的地址,当我们提交表单时将会提交到action
属性对应的地址。使用<form>
标签创建的仅仅是一个空白的表单,我们还需要向<form>
标签中添加不同的表单项。<input>
标签来创建一个文本框,它的type
属性是text
。(内联元素) 如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name
属性。name
表示提交内容的名字。用户填写的信息会附在url
地址的后边以查询字符串的形式发送给服务器,格式:url地址?查询字符串
(属性名=属性值&属性名=属性值)在文本框中也可以指定value属性值,该值会将作为文本框的默认值显示。<input>
标签创建一个提交按钮,它的type
是submit
。在提交按钮中可以通过value
属性来指定按钮上的文字。<input>
标签创建一个密码框,它的type
是password
。<input>
标签来创建一个单选按钮,它的type
属性使用radio
,单选按钮通过name
属性进行分组,name
属性相同是一组按钮,像需要用户选择,但是不需要用户直接填写内容的表单项,还必须指定一个value
属性,这样被选中的表单项的value
属性值将会最终提交给服务器。<input>
标签创建,它的type
属性使用checkbox
。<select>
标签来创建一个下拉列表,在下拉列表中使用<option>
标签来创建一个一个列表项,下拉列表的name
属性需要指定给<select>
标签,而value
属性需要指定给<option>
标签,可以通过在<option>
标签中添加selected=“selected”
来将选项设置为默认选中。当为<select>
标签添加一个multiple="multiple"
,则下拉列表变为一个多选的下拉列表。在<select>
标签中可以使用optgroup
属性对选项进行分组,同一个optgroup
的选项是一组。可以通过label
属性来指定分组的名字。checked=“checked”
属性。<textarea>
标签创建一个多行文本框(文本域)<input>
标签创建一个重置按钮,它的type
是reset
,点击重置按钮后表单中内容会恢复为默认值。<input type=button>
可以创建单纯的按钮,这个按钮没有任何功能,只能被点击。除了使用<input>
也可以使用<button>
标签来创建。这种方式和使用<input>
类似,只不过由于它是成对出现的标签,使用起来更加的灵活。<label>
标签。该标签可以指定一个for
属性,该属性的值需要指定一个表单项的id
值。<fieldset>
标签来为表单项进行分组,可以将表单项中的同一组放到一个<fieldset>
标签中,在<fieldset>
标签中可以使用<legend>
子标签,来指定组名。clear
属性来完成,clear
可以用来清除其他浮动元素对当前元素的影响。可选值:none
(默认值),不清除浮动。left
,清除左侧浮动对当前元素的影响。right
,清除右侧浮动元素对当前元素的影响。both
,清除两侧浮动元素对当前元素的影响(清除对它影响最大的一侧)。清除浮动以后,元素会回到其它元素浮动之前的位置。position
属性来设置元素的定位,可选值static
:(默认值)元素没有开启定位。relative
:开启元素的相对定位。absolute
:开启元素的绝对定位。fixed
:开启元素的固定定位(绝对定位的一种)。当开启了元素的定位(position
属性值是一个非static
的值)时,可以通过left,right,top,bottom
四个属性来设置元素的偏移量。left
:元素相对其定位位置的左侧偏移量。right
:元素相对于其定位位置的右侧偏移量。top
:元素相对于其定位位置的上边的偏移量。bottom
:元素相对于其定位位置下边的偏移量。position
属性设置为relative
时,则开启了元素的相对定位。当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化。相对定位是相对于元素在文档流中原来的位置移动。相对定位的元素不会脱离文档流。相对定位会使元素提升一个层级。通常偏移量只需要两个就可以对一个元素进行定位,一般选择水平方向的偏移量和垂直方向的偏移量来为元素进行定位。相对定位不会改变元素的性质,块还是快,内联还是内联。position
属性值设置为absolute
时,则开启了元素的绝对定位。绝对定位的特点:position
属性设置fixed
时,则开启了元素的固定定位。固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样。不同的是:固定定位永远都会相对于浏览器窗口定位 。固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动。IE6不支持固定定位。!important
,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示,甚至超过内联样式。 但是在开发中不建议使用。JPEG(JPG)
支持的颜色比较多,图片可以压缩,但不支持透明,一般使用JPEG
来保存照片等颜色丰富的图片。GIF
支持的颜色少,只支持简单的透明,支持动态图,图片颜色单一或者是动态图时可以使用gif
。PNG
支持的颜色多,并且支持复杂的透明,可以用来显示颜色复杂的透明的图片。DD_belatedPNG.fix('标签名')
;display:inline
。对于一个浮动元素来说设置没有任何意义,但是该属性可以解决IE6的双倍边距问题。<frameset>
标签来创建一个框架集,注意<frameset>
标签不能和<body>
标签出现在同一个页面中,所以要使用框架集,页面中就不可以使用<body>
标签。在<frameset>
标签中使用<frame>
子标签来指定要引入的页面。引入几个页面就写几个<frame>
标签。属性:rows
:指定框架集中所有的框架,一行一行的排列。cols
,指定框架集中的所有的页面,一列一列的排列,这两个属性<frameset>
标签必须选择一个,并且需要在属性中指定每一部分所占的大小。<frameset>
标签中也可以嵌套<frameset>
标签。<frameset>
标签和<iframe>
标签一样,它里面的内容都不会被搜索引擎所检索,所以如果搜索引擎检索到的页面是一个框架页的话,它不是去判断里边的内容的使用框架集则意味着页面中不能有自己的内容,只能引入其他的页面,而我们每单独加在一个页面,浏览器阿都需要重新发送一次请求,引入几个页面就需要发送几次请求,用户的体验比较差,如果非得用,建议使用<frameset>
标签而不使用<iframe>
标签。id
,class
和文件的命名规范,命名时尽量使用英文,如果不会可以使用拼音,但是不要英文和拼音混用。命名格式,驼峰命名法,首字母小写,每个单词的开头字母大写,例子:aaaBbbCcc ,helloWorld,也可以所有的字母都小写,单词之间使用_或-链接,aaa_bbb_ccc , aaa-bbb-ccc。