Css基础

html注意事项

span行内元素：不会独自占一行，宽度是内容的大小
div块级元素：独自占一行，宽度100%
注意事项：div宽度，高度，行高顶部及底部边距可以设置
span不可以设置

css字体样式

字体属性font

1.字体font-famliy

2. 字体大小font-size

• em：相对于父对象内文本的字体尺寸.
• px：相对于显示器屏幕分辨率而言，pc上通用.
• rem：相对于标签内文本的字体尺寸，移动设备上通用.

3. 粗细font-weight

• bold：加粗
• bolder：效果和bold一样
  100-500正常600-900加粗

4. 字体样式font-style

• italic：斜体

5. 行高line-height
6. 颜色：color(#.../red)
7. 大小写：text-transform

• upperrcase：全部变为大写
• lowercase：全部变为小写
• caplitalize：文本第一个字母大写

8. 修饰线：text-decoration

• underrline：下划线
• blink：闪烁
• 贯穿线：line-through
• overrline：上划线

9. 字体复合属性
   连着写顺序不能变
   font：italic bold 50px(大小)/80px(行高) "微软雅黑"
   最精简形式：font：12px/24px 宋体，否则不会生效

文本属性text

1. 字母间距：letter-space
2. 单词间距：word-space
3. 水平对齐(只能对文字对齐)：text-align
4. 垂直对齐(只对表格的单元格有效，对盒子模型无效，盒子模型的垂直居中可以通过设置行高和高一样来实现)：vertical-align
5. 文本缩进：text-ident：2em(一个em就是一个汉字的大小)
6. 是否自动换行：white-space

• nowrap：不换行

7. 文本溢出标识：text-overflow

• clip：溢出部分隐藏(经常与6和overrflow：hidden连着使用)

背景background

1. 颜色：background-color
2. 背景图片：background-image
   background-image：url("../image/aa.jpg")
3. background-position：背景图起始位置

• 水平方向left center right
• 垂直方向top center bottom

4. background-size:背景尺寸

• width
• height

5. background-attachment

• scroll：默认，背景图片会滚动
• fixed：页面滚动时，背景图片锁定

盒子模型

组成

• 内容：文字和图片，还可以是其他盒子
• 边框(border)：就是盒子的边线
• 填充(padding)：内容距离边框的间距(内边距)
• 边界(margin)：盒子与盒子之间的距离，可以是兄弟关系也可以是父子关系
  边界，边框，填充都有四个方向的的属性，可以单定义.

盒子的尺寸

宽：width
高：height
最大高度/宽度：max-height/width
最小高度/宽度：min-height/width

鼠标形状(cursor)

• 手型：pointer
• I型：text
• 等待：wait
• 帮助：help

盒子的标准模式和怪异模式

与边框边界有关系

• 标准模式：elementWidth=boxWidth+paddingLR+borderLR（高度同理）
• 怪异模式：元素的宽度=盒子的宽度.和边框和填充没关系

列表

• 有序列表
  <ol>
  <li>内容</li>
  </ol>
• 无序
  <ul>
  <li>内容</li>
  </ul>
• 自定义列表
• 列表类型：
  1.list-style-type：none
  2.：list-style-image(列表项前面的图标 )：url()
  3.2的方法不能解决图标的位置问题，在项目中用背景图片解决

浮动

概念

是css样式中的定位属性，用于设置标签对象的浮动布局，只要设置了浮动，就将盒子脱离了文本流，浮动就是解决盒子模型的布局问题，可以用于布局的元素应该是块级元素（如果是行内要将行内转换成块级才能布局）
1）没有设置浮动的元素会填充浮动元素留下来的空间
2）浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面
3）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围
4)浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。

属性值

1. none
2. left
3. right

清除浮动（避免了浮动之后别的内容会挤到上面的情况）

1. left
2. right
3. both
   1.在最后一个有浮动属性的地方清除，清除一次即可
   2.在父容器上面使用overflow：hidden

超出overflow

1. 属性

• visible默认
• auto：自动（超出出现滚动条）
• hideen：超出的隐藏
• scroll：不管超出是否始终有滚动条
  常用auto和hidden

overflow妙用：父元素高度靠子元素撑起，所有子元素浮动起来后脱离了文档流，父div高度塌陷，用overflow使浏览器重新计算父div的高度

显示与隐藏display

1. none
2. block
3. inline
4. inline-block（一般转换的时候用这个都）