html注意事项
span行内元素：不会独自占一行，宽度是内容的大小
div块级元素：独自占一行，宽度100%
注意事项：div宽度，高度，行高顶部及底部边距可以设置
span不可以设置
css字体样式
字体属性font
1.字体font-famliy
- 字体大小font-size
- em：相对于父对象内文本的字体尺寸.
- px：相对于显示器屏幕分辨率而言，pc上通用.
- rem：相对于标签内文本的字体尺寸，移动设备上通用.
- 粗细font-weight
- bold：加粗
- bolder：效果和bold一样
100-500正常600-900加粗
- 字体样式font-style
- italic：斜体
- 行高line-height
- 颜色：color(#.../red)
- 大小写：text-transform
- upperrcase：全部变为大写
- lowercase：全部变为小写
- caplitalize：文本第一个字母大写
- 修饰线：text-decoration
- underrline：下划线
- blink：闪烁
- 贯穿线：line-through
- overrline：上划线
- 字体复合属性
连着写顺序不能变
font：italic bold 50px(大小)/80px(行高) "微软雅黑"
最精简形式：font：12px/24px 宋体，否则不会生效
文本属性text
- 字母间距：letter-space
- 单词间距：word-space
- 水平对齐(只能对文字对齐)：text-align
- 垂直对齐(只对表格的单元格有效，对盒子模型无效，盒子模型的垂直居中可以通过设置行高和高一样来实现)：vertical-align
- 文本缩进：text-ident：2em(一个em就是一个汉字的大小)
- 是否自动换行：white-space
- nowrap：不换行
- 文本溢出标识：text-overflow
- clip：溢出部分隐藏(经常与6和overrflow：hidden连着使用)
背景background
- 颜色：background-color
- 背景图片：background-image
background-image：url("../image/aa.jpg") - background-position：背景图起始位置
- 水平方向left center right
- 垂直方向top center bottom
- background-size:背景尺寸
- width
- height
- 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的底部。
属性值
- none
- left
- right
清除浮动（避免了浮动之后别的内容会挤到上面的情况）
- left
- right
- both
1.在最后一个有浮动属性的地方清除，清除一次即可
2.在父容器上面使用overflow：hidden
超出overflow
- 属性
- visible默认
- auto：自动（超出出现滚动条）
- hideen：超出的隐藏
- scroll：不管超出是否始终有滚动条
常用auto和hidden
overflow妙用：父元素高度靠子元素撑起，所有子元素浮动起来后脱离了文档流，父div高度塌陷，用overflow使浏览器重新计算父div的高度
显示与隐藏display
- none
- block
- inline
- inline-block（一般转换的时候用这个都）
网友评论