1.字体复合属性
body{ font:font-style font-weight font-size / line-height font-family ; }
div{font:12px/1.5 '微软雅黑';} // 行高 可以是像素 20px 也可以是倍数 表示当前字体大小的1.5 倍
使用 font 属性时,必须按上面语法格式中的顺序书写,不能更改顺序,并且各属性之间用 空格 隔开
不需要设置的属性可以省略(取默认值),必须保留 font-size 和 font-family 属性,否则 font 不起作用。
2.文本缩进(text-indent)
进行段落首行缩进 单位 px 代表像素
em 相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
3.复合选择器
后代选择器(子孙后代) 用法: .nav a 空格隔开
子代选择器(亲儿子) 用法:.nav > a 大于号连接
并集选择器(相同样式的元素) 用法:.nav,.header 逗号隔开
链接伪类选择器(不同状态的链接) 用法:常用 a{ } 和 a:hover{ }
a:link 未访问的状态
a:visited 已访问过的状态
a:hover 经过时的状态
a:active 点击时的状态
:focus 选择器 (获得光标的表单) input:focus
4. 背景图片位置 background-position
1. 方位名词
如果两个值都是方位名字,则前后顺序无所谓,比如 left,top 和 top,left
2. 参数是精确单位
第一个肯定是 x坐标,第二个一定是 y 坐标
如果只指定一个数值 ,那么该数值一定是 x 坐标 ,另一个默认垂直居中
3. 参数是混合单位
精确单位 和 方位名字 混合使用,第一个值是 x 坐标,第二个值是 y 坐标
5. 背景图像固定 background-attachment
background-attachment 属性设置背景图像是否固定 或者 随着页面的其余部分滚动
scroll:背景图像是随对象内容滚动
fixed:背景图像固定
6. 背景复合写法(没有顺序)
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
7. CSS 优先级
!impormpt > style > id > class > div > *
8. CSS 权重叠加
.nav .pink {
color: pink;
font-size: 24px;
}
.nav li {
color: red;
}
<ul class="nav">
<li class="pink">人生四大悲</li> // 颜色是pink 因为.nav .pink 的权重更高
<li>人生四大悲</li>
<li>人生四大悲</li>
</ul>
9. 表格细线边框
border-collapse:collapse; 相邻边框 合并在一起
10.盒子模型(border)
①.内边距 padding
padding 会影响盒子大小,如果不设置 width 宽度,就不影响 盒子大小。
②.外边距 margin
外边距可以让 块级盒子 水平居中 ,必须满足两个条件:
1.盒子必须指定宽度
2.盒子左右的外边距都设置为 auto
注意:margin:auto;是让块元素水平居中,行内元素 或者 行内块元素水平居中 给其父元素 添加 text-align:center 即可
③. 外边距合并问题
1.相邻块元素垂直外边距的合并
两个相邻 div 的垂直间距,不是 上外边距+下外边距的和 而是取两个值中的最大者
解决方案:尽量只给一个盒子添加 margin 值
2.嵌套块元素垂直外边距的塌陷
对于两个父子关系的块元素,父元素有上外边距 同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
1.为父元素定义上边框(把父子两个块元素隔开)
2.为父元素定义上内边距(把父子两个块元素隔开)
3.为父元素添加 overflow:hidden;属性
11.浮动布局注意点
1.浮动和标准流的父盒子搭配使用。
先用标准流的父元素位置,再把内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动
浮动盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
12.为什么要清除浮动
1.父级没高度
2.子盒子浮动
3.影响下面布局,应该清除浮动
13.清除浮动方法
1. 额外标签法,也称为隔墙法,是W3C推荐做法 缺点:代码结构不严谨
例如:<div style='clear:both;'></div>
2. 父级添加 overflow 属性 缺点:无法显示内容多余的部分
例如:父元素{ overflow:hidden;}
3. 父级添加 after 伪元素
例如:
父元素 : after {
display: block;
content: "";
clear: both;
}
4. 父级添加双伪元素
例如:
父元素:after ,
父元素:before{
display: block;
content: "";
clear: both;
}
5. IE6,7不支持 添加伪元素的方式
父元素{ *zoom:1;}
14.定位(position:static / relative / absolute / fixed ;)
1. static:静态定位 很少使用
2. relative:相对定位 元素在移动位置时,是相对于它原来的位置来说的(自恋型)
特点:
1. 移动位置的时候是参照自己原来的位置移动的
2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
3. 典型应用是给绝对定位当爹
3. absolute:绝对定位 元素在移动时,是相对于它的祖先元素来说的(拼爹型)
特点:
1. 没有祖先元素 或者 祖先元素没有定位,则以浏览器为定位(Document 文档)
2. 祖先元素有定位(相对,绝对,固定定位),则以最近一级的有定位的祖先元素为参考点移动位置
3. 绝对定位 不再占有原先的位置(脱标)
4. fixed:固定定位 元素固定在浏览器可视区的位置,主要使用场景,可以在浏览器页面滚动时,元素的位置不会改变。
特点:
1. 以浏览器的可视窗口为参照点移动元素
2. 跟父元素没有任何关系
3. 不随滚动条滚动
4. 固定定位不占有原先的位置(固定定位也是脱标的,固定定位也可以看做是一种特殊的绝对定位)。
5. sticky:粘性定位 被认为是相对定位和固定定位的混合
特点:
1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
2. 粘性定位 占有原先的位置 (相对定位特点)
3. 必须添加 top ,left,right,bottom 其中一个才有效
4. 跟页面滚动搭配使用,兼容性差,IE不支持。
15. 定位拓展
绝对定位(固定定位)会完全压住盒子(标准流所有的内容)
浮动(float),只会压住它下面的标准流的盒子,但是不会压住下面标准流盒子中的文字(图片)
浮动之所以不会压住文字,因为浮动产生的目的最初就是为了做文字环绕效果的,文字会围绕浮动元素
16.网页布局总结
通过盒子模型,知道大部分 html 标签是一个盒子,通过 CSS浮动、定位 可以让每个盒子排列成网页。
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。
1.标准流
可以让盒子上下排列 或者 左右排列,垂直的块级盒子显示就用标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点就是有层叠的概念,可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局。
17.元素的显示和隐藏
1. display:显示隐藏元素,不保留位置
2. visibility:显示隐藏元素,保留原来的位置
3. overflow:溢出显示隐藏 只是对溢出的部分处理
案例:当鼠标经过 layer时,显示遮罩层(完整说法:当鼠标经过 layer 时,让 layer 里面的 box 显示出来)
<div class="layer">
<div class="box"></div> // 遮罩层
<img src="img/banner.png" alt="" />
</div>
layer:hover .box{
display:block;
}