自学HTML+CSS的总结
块和内联
- 块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
- 一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
- a元素可以包含任意元素，除了他本身
- p元素不可以包含任何块元素
选择器分组(并集选择器)
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1,选择器2,选择器N{}
- 实例：
#p1 , .p2 , h1{
background-color: yellow;
}
复合选择器（交集选择器）
- 作用：可以选中同时满足多个选择器的元素
- 语法：选择器1选择器2选择器N{}
span.p3{ background-color: yellow; }
后代元素选择器
- 作用：选中指定元素的指定后代元素
- 语法：祖先元素 后代元素{}
#d1 span{ color: greenyellow; }
子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素
- IE6及以下的浏览器不支持子元素选择器
div > span{
background-color: yellow;
}
伪类选择器
- 浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
- :hover和:active也可以为其他元素设置
- IE6中，不支持对超链接以外的元素设置:hover和:active
a:visited{
color: red;
}
- 文本框获取焦点以后，修改背景颜色为黄色
input:focus{
background-color: yellow;
}
- 为p标签中选中的内容使用样式，可以使用::selection伪类
- 注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
- 兼容火狐的
p::-moz-selection{
background-color: orange;
}
- 兼容大部分浏览器的
p::selection{
background-color: orange;
}
伪元素
- 使用伪元素来表示元素中的一些特殊的位置
- 为p中第一个字符来设置一个特殊的样式
p:first-letter {
color: red;
font-size: 20px;
}
- 为p中的第一行设置一个背景颜色为黄色
p:first-line {
background-color: yellow;
}
- :before表示元素最前边的部分
- 一般before都需要结合content这个样式一起使用，
- 通过content可以向before或after的位置添加一些内容
- :after表示元素的最后边的部分
p:before{
content: "我会出现在整个段落的最前边";
color: red;
}
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素
- 语法：
[属性名] 选取含有指定属性的元素
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“属性值”] 选取属性值以指定内容开头的元素
[属性名$=“属性值”] 选取属性值以指定内容结尾的元素
[属性名*=“属性值”] 选取属性值以包含指定内容的元素
p[title]{
background-color: yellow;
}
p[title="hello"]{
background-color: yellow;
}
p[title^="ab"]{
background-color: yellow;
}
p[title$="c"]{
background-color: yellow;
}
p[title*="c"]{
background-color: yellow;
}
子元素选择器
- :first-child 可以选中第一个子元素
- :last-child 可以选中最后一个子元素
- :nth-child 可以选中任意位置的子元素
- 该选择器后边可以指定一个参数，指定要选中第几个子元素
- even 表示偶数位置的子元素
- odd 表示奇数位置的子元素 - :first-of-type、:last-of-type、 :nth-of-type和:first-child这些非常的类似，
- 只不过child，是在所有的子元素中排列
- 而type是在当前类型的子元素中排列
body > p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(odd){
background-color: yellow;
}
p:first-of-type{
background-color: yellow;
}
兄弟元素选择器
- 后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{
background-color: yellow;
}
- 选中后边的所有兄弟元素
语法：前一个 - 后边所有
span - p{
background-color: yellow;
}
否定伪类
- 作用：可以从已选中的元素中剔除出某些元素
- 语法：:not(选择器)
p:not(.hello){
background-color: yellow;
}
样式的继承
- 并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
选择器优先级
- 选择器优先级计算不会超过他的最大的数量级
- 并集选择器的优先级是单独计算
div , p , #p1 , .hello{}
- a的伪类一共有四个：:link、 :visited、 :hover、:active这四个选择器的优先级是一样的
文本标签
- em和strong：这两个标签都表示一个强调的内容
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示 - i标签中的内容会以斜体显示
- b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b和i标签 - small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small - 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容
比如：书名 歌名 话剧名 电影名 。。。 - q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号 - blockquote标签表示一个长引用（块级引用）
- 使用sup标签来设置一个上标
- sub标签用来表示一个下标
- 使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线 - ins表示一个插入的内容
ins中的的内容，会自动添加下划线 - 需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
列表
- 默认的项目符号我们一般都不使用！！
- 如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
- ul和li都是块元素
定义列表
- 定义列表用来对一些词汇或内容进行定义
- 使用dl来创建一个定义列表
- dl中有两个子标签
dt ： 被定义的内容
dd ： 对定义内容的描述
字体的样式
- 设置文字的大小,浏览器中一般默认的文字大小都是16px
- 我们设置的font-size实际上是设置格的高度，并不是字体的大小
字体的分类
- serif（衬线字体）
- sans-serif（非衬线字体）
- monospace （等宽字体）
- cursive （草书字体）
- fantasy （虚幻字体）
- 可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式
- 一般会将字体的大分类，指定为font-family中的最后一个字体
字体的其他样式
- font-variant可以用来设置小型大写字母
font-variant: small-caps ;
- font
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写
如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式 - 实际上使用简写属性也会有一个比较好的性能
font: small-caps bold italic 60px "微软雅黑";
行间距
- 行间距 = 行高 - 字体大小
文本的样式
- text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写 - text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线 - letter-spacing可以指定字符间距
- word-spacing可以设置单词之间的距离
- text-indent用来设置首行缩进
这个值一般都会使用em作为单位
外边距
- 垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
内联元素的盒子
- 内联元素不能设置width和height
- 内联元素可以设置垂直方向内边距，但是不会影响页面的布局
- 垂直的边框不会影响到页面的布局
- 内联元素不支持垂直外边距
- 水平方向的相邻外边距不会重叠，而是求和
display
- inline-block：将一个元素转换为行内块元素
- 可以使一个元素既有行内元素的特点又有块元素的特点
- 既可以设置宽高，又不会独占一行
- none: 不显示元素，并且元素不会在页面中继续占有位置
- **visibility:hidden;**隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
overflow
- 子元素默认是存在于父元素的内容区中，
- 理论上讲子元素的最大可以等于父元素内容区大小
- 如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，
- 超出父元素的内容，我们称为溢出的内容
- 父元素默认是将溢出内容，在父元素外边显示，
- 通过overflow可以设置父元素如何处理溢出内容：
可选值：
visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
hidden, 溢出的内容，会被修剪，不会显示
scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
auto，会根据需求自动添加滚动条，
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
文档流
- 文档流处在网页的最底层，它表示的是一个页面中的位置，
- 我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开 - 当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
浮动
- 内联元素脱离文档流以后会变成块元素
解决高度坍塌问题
-
解决高度塌陷方案一：开启元素的BFC
BFC的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.将元素的overflow设置为一个非visible的值 -
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
-
在IE6及以下的浏览器直接将元素的zoom设置为1即可
-
在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
-
解决高度塌陷方案二：
-
可以直接在高度塌陷的父元素的最后，添加一个空白的div
-
由于这个div并没有浮动，所以他是可以撑开父元素的高度的
-
然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
-
基本没有副作用
-
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
- 解决高度塌陷方案三：after伪类
- 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
- 这样做和添加一个div的原理一样，可以达到一个相同的效果
- 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
- 在IE6中不支持after伪类,
- 所以在IE6中还需要使用hasLayout来处理
清除浮动
- 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
相对定位
- 当元素的position属性设置为relative时，则开启了元素的相对定位
- 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
- 2.相对定位是相对于元素在文档流中原来的位置进行定位
- 3.相对定位的元素不会脱离文档流
- 4.相对定位会使元素提升一个层级
- 5.相对定位不会改变元素的性质，块还是块，内联还是内联
绝对定位
- 当position属性值设置为absolute时，则开启了元素的绝对定位
- 1.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
- 2.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 - 3.开启绝对定位，会使元素脱离文档流
- 4.绝对定位会使元素提升一个层级
- 5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
固定定位
- 当元素的position属性设置fixed时，则开启了元素的固定定位
- 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
- 不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 - IE6不支持固定定位
opacity
- opacity属性在IE8及以下的浏览器中不支持
- IE8及以下的浏览器需要使用如下属性代替
- alpha(opacity=透明度)
- 透明度，需要一个0-100（完全透明-完全不透明）之间的值
- filter: alpha(opacity=50);
背景
- background-attachment用来设置背景图片是否随页面一起滚动
- scroll，默认值，背景图片随着窗口滚动
- fixed，背景图片会固定在某一位置，不随页面滚动
- 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
- 当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口
表格
- rowspan用来设置纵向的合并单元格
- colspan横向的合并单元格
- table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
- border-spacing:0px;
- border-collapse可以用来设置表格的边框合并
- 如果设置了边框合并，则border-spacing自动失效
- border-collapse: collapse;
- 如果表格中没有写tbody，浏览器会自动在表格中添加tbody
- 并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
- 通过table > tr 无法选中行 需要通过tbody > tr
完善的clearfix
- 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
- 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
表单
-
在html中还为我们提供了一个标签（label标签），专门用来选中表单中的提示文字
-
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
-
在表单中可以使用fieldset来为表单项进行分组
-
在fieldset可以使用legend子标签，来指定组名
-
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示 -
使用input创建一个密码框，它的type属性值是password
-
使用input来创建一个单选按钮，它的type属性使用radio
单选按钮通过name属性进行分组，name属性相同是一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性 -
使用input创建一个多选框，它的type属性使用checkbox
-
使用select来创建一个下拉列表
-
下拉列表的name属性需要指定给select，而value属性需要指定给option
-
可以通过在option中添加selected="selected"来将选项设置为默认选中
-
当为select添加一个multiple=“multiple”，则下拉列表变为一个多选的下拉列表
-
在select中可以使用optgroup对选项进行分组
-
可以通过label属性来指定分组的名字
-
使用textarea创建一个文本域
-
提交按钮可以将表单中的信息提交给服务器
-
使用input创建一个提交按钮,它的type属性值是submit
-
在提交按钮中可以通过value属性来指定按钮上的文字
-
可以创建一个重置按钮，
-
点击重置按钮以后表单中内容将会恢复为默认值
-
使用input type=button可以用来创建一个单纯的按钮，
-
这个按钮没有任何功能，只能被点击
-
除了使用input，也可以使用button标签来创建按钮
-
这种方式和使用input类似，只不过由于它是成对出现的标签
-
使用起来更加的灵活
框架集
图片
IE6的双倍边距bug
- 对于一个浮动元素来说设置display:inline没有任何意义
- 但是该属性可以解决IE6的双倍边距问题