CSS属性之浮动&文本&列表&边框

一、浮动

显然标准流已经无法满足需求，这就要用到浮动。标准文档流，在页面中独占一行，自上而下排列，也就是传说中的流。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。无论多么复杂的布局，其基本出发点均是:“如何在一行显示多个div元素”。

1.float: left/right/none（无浮动）;

2.浮动的目的:就是让竖着的元素进行横向排列，也就是能让元素和元素并排显示

3.浮动的显示规则:浮动对象会向左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。

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

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

6.浮动属性的停止条件

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

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

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

8.清除浮动语法:

    clear : none | left | right | both

    none:默认值。允许两边都可以有浮动对象

    left:不允许左边有浮动对象

    right : 不允许右边有浮动对象

    both : 不允许有浮动对象

    注:只针对自身标签起作用

二、文本属性

1:文本大小:font-size

 说明:

 (1）属性值为数值型时，必须给属性值加单位，属性值为0时除外(html属性值单位是可以省略的)

 (2)浏览器中默认的字体大小是16px

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

 (4)建议设置字体为偶数

 (5) 除了常见的px单位 还有以下

    1) pt:磅 硬件设备(9pt=12px;)

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

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

 4）使用绝对大小关键字

    xx-small =9px

    x-small =11px

    small =13px

    medium =16px

    large =19px

    x-large =23px

    xx-large =27px

2.文本颜色 color    

 (1)法定的属性值: red、green、blue...

 (2)用十六进制表示颜色值:

    0 1 2 3 4 5 6 7 8 9

    0 1 2 3 4 5 6 7 8 9 A B C D E F

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

  2) # 00 00 00 三原色

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

  4) 取字体颜色: ps中吸管工具

（3）rgb(red,green,blue) 0~255之间

（4）rgba(red,green,blue,alpha) 透明度 0~1

拓展: 透明的使用

  rgba() 某个元素通明

  opacity 0~1 所有元素透明

3.文本类型 font-family

  （1）在浏览器中中文汉字默认的字体类型是微软雅黑

  （2）属性值可以是中文 也可以是英文

  （3）中文:属性可以不加引号 规范是需要加引号的

  （4）英文:有多个英文单词需要加引号,只有一个英文单词可以不加引号

4.加粗属性 font-weight

（1） 常规属性值  100~900之间的整百数 100~500表示正常字体 600~900表示加粗字体

（2） 法定属性值  bold 加粗的 bolder 更粗的

（3） 重点:normal 正常的 不想用加粗标签的效果 只想要标签而已

5.倾斜属性 font-style

（1）italic 倾斜的

（2）oblique 更倾斜的

（3）normal 正常的

6.文本行高属性 line-height

   原理:基线对齐

（1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

（2）当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；

（3）当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下（IE6及以下版本存在浏览器兼容问题）

7.文字属性简写:font:12px/24px "宋体";

 （1）font属性的简写:字号，行高，字体

   font-size:12px; line-height:24px; font-family:”宋体”；

 （2）font属性的简写:

   说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

   顺序: font-style font-weight font-size / line-height font-family

   注意:

 （3）简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。

 （4）顺序不能改变，这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight，font-style，他们会使用缺省值（默认值）。

 （5）font-weight和font-style可以互换位置 没有需求可以不写

 （6）font-size和line-height是固定的 不可以互换位置

 （7）font-family必须得写 默认为微软雅黑

8.水平方向属性 text-align

     属性值:left right center justify 两端对齐  

9、文本修饰 text-decoration:

   none:没有修饰

   underline:添加下划线

   overline:添加上划线

   line-through:添加删除线

10:首行缩进

   1）text-indent可以取负值；

   2）text-indent属性只对第一行起作用。

11、字间距、词间距

   字间距{letter-spacing:value;}控制英文字母或汉字的字距。

   词间距{word-spacing:value;}控制英文单词词距。

三、列表属性

1.改变列表的符号样式 list-style-type

  (1)默认值 disc 实心圆

  (2)circle 空心圆

  (3)square 实心方块

  (4)none 无 清除列表的默认符号 列表的符号是有兼容问题的 在某些低版本中符号是显示不出来的

2.使用图片作为列表的符号 list-style-image

   url(所使用图片的路径及全称)

3.设置默认符号的位置 list-style-position 定位

   inside

   outside 默认值

4.重点: list-style:none

四、边框属性

1、border:边框宽度 边框风格 边框颜色;

   border:5px solid #ff0000

   边框:border,网页中很多修饰性线条都是由边框来实现的。

   边框宽度:border-width:数值+单位

   边框颜色:border-color:

   边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，

2、前端方向默认是顺时针的 top、right、bottom、left

  (1)改变某一个方向上的边框颜色 border-方向值-color

  (2)改变某一个方向上的所有样式 border-方向值

  (3)某些标签自带边框需要 清除边框 border-方向值:none

    border-bottom:边框宽度 边框风格 边框颜色;底边框

    border-left:边框宽度 边框风格 边框颜色;左边框

    border-right:边框宽度 边框风格 边框颜色;右边框

    border-top:边框宽度 边框风格 边框颜色;上边框

3、案例:制作三角形