1 浮动属性

浮动属性的使用:控制元素在浏览器中的位置

属性:float 使..漂浮/使...浮动

属性值:left right none(默认值表示不浮动)

- 浮动属性只能控制元素在水平方向上移动

- 浮动属性会使当前的元素脱离文档流(网页布局) 初始位置不存在后面的元素就会补上初始的网页布局就会被破坏

- 浮动属性的停止条件

- 设置浮动属性的元素不会跑出当前的父级盒子碰到父级元素的边框就会停止浮动

- 碰到前面一个含有浮动属性的元素也会停止浮动

- 当子级元素的宽度大于父级元素的宽度时候最后一个浮动元素会慢慢的往下移动直至找到足够的空间

2 文本大小

css属性值

- 常规属性值 width:100px

- 法定属性值 background-color:red

字体大小的设置

属性:font-size

属性值:

- 设置字体大小的时候需要写数值和单位(html属性值单位是可以省略的)

- 当字体font-size:0 可以不加单位(处理兼容问题)

- 浏览器中默认的字体大小是16px

- 市场上浏览器特别多之间存在差异为了减少差异带来的问题规定12px是浏览器显示的最小值

- 建议设置字体为偶数

- 除了常见的px单位还有以下

- pt 磅硬件设备(了解)

- em 相对单位相对的是父级元素(首航缩进) 1em = 16px

- rem 相对单位相对的根元素html(移动端布局中)

ui提供设计图的时候都会标明字体大小: 蓝湖、pxcook

量取设计图上的字体大小:量取字体的高度即可

文本颜色的设置

属性: color

属性值

- 法定的属性值: 英文单词 red、green、blue...

- 十六进制:

- 以#开头有六位字符(0123456789abcdef) 忽略大小写

- # 00 00 00 三原色

- 当六位字符是一样的时候可以简写为三位 #000000 => #000

- 取字体颜色: ps 吸管工具

- rgb(red,green,blue) 0~255之间

- rgba(red,green,blue,alpha) 透明度 0~1

拓展: 透明的使用

- rgba() 某个元素

- opacity 0~1 所有元素