css属性

浮动属性

浮动:悬浮飘起来的意思

正常情况下,每个标签都是在页面中占位置的,如果给一个盒子添加了浮动,意思就是让该盒子悬空飘起来,所以此时浮动之后的盒子是不占空间,空出来的空间别的盒子是可以占据的

语法:
    float:none; 默认值 不浮动
    float:left; 向左浮动
    float:right; 向右浮动

使用场景:
1:想要多个竖着排列的盒子同时变成横着排列的时候 (需要同时浮动)
如果同时添加的是左浮动,是从左往右
如果同时添加的是右浮动,是从右往左
2:本身横着排列的标签想要支持宽高的等一些css属性的时候用

浮动引起的问题**
因为浮动是悬空不占位的,所以添加了浮动的盒子会空出一块空间,别人会占据,这样会影响页面布局的
解决方法:给浮动的盒子外面包一个父元素,且设置高度撑开或者给父元素添加overflow:hidden;

特点:

1.浮动元素会脱离文档流,不占页面原有空间,后面元素会上去补位置
2.浮动元素只会在当前元素本行位置左右浮动显示
3.如果元素都浮动 则横向排列
4.空间不够时 会折行

文本属性

除去文本垂直之间的缝隙–>line-height:1

1.文本大小:font-size
        取值:数值+px
2.文本字体:font-family
        取值:隶属,楷书,等常见字体
		多个字体同时设置,浏览器先解析第1个,如果系统有个那么就显示,如果没有解析第2个
3.文本颜色:color
4.文本加粗:font-weight
  两种类型: 
      1)数值型:取值为100-900 正白的数值
            特殊值:100=细体 400=正常字体 700=加粗字体 900=更粗字体
      2)关键词类型:lighter=细体 normal=正常字体 bold=加粗 bolder=更粗字体
5.文本倾斜:font-style
      取值:italic=倾斜 oblique=斜体 normal=普通字体
6.文本修饰线:text-decoration
      取值:underline=修饰线的位置  dashed=修饰线的样式  red=修饰线的颜色
      单一属性:
	text-decoration-line:修饰线的位置
       			line-through; 删除线
       			overline; 上划线
       			underline; 下划线
       			none;  默认无修饰线
     text-decoration-style:修饰线样式
 				dashed; 虚线 
      			wavy; 波浪线
      			dotted; 点状线
      			double; 双线
		text-decoration-color:修饰线颜色
          颜色取值与文本颜色取值一致
7.文本首行缩进:text-indent:32px;
      取值:数值+px;数值+em
   em是一个相对单位,默认是1em=16px 这个比例可以修改的,如果自己有文字大小
   就相对于自己的文字大小,如果没有找父亲的文字大小,如果都有那么找最近的文字大小
8.文本对齐方式:text-align
      取值:left(文本水平靠左对齐)/right(文本水平靠右对齐)/center/justify(两端对齐,多行文本)
      text-align-last:justify;(单行文本使用)//设置最后一行2端对齐 CSS3新增加的

行高属性

行高的使用场景:
1:单行文本垂直居中,当行高的值=高度的值的时候,可以实现单行文本垂直居中
2:拉开多行文本之间的距离

行高可以是底线到底线之间的垂直距离,而这段距离可以拆解成 行距+文字大小=行高 该表达式可以拆解成 2个半行距+文字大小,也就是说在行高的范围内文本是垂直居中的

行距+文字大小=行高
    已知行高是100 文字大小是80 行距=20
    已知行内式(行高)160  文字大小是60 半行距=50px

拓展:

line-height:2;这里如果不带单位,表示的是倍数,是文字大小的倍数
假设文字大小是20px 那么line-height:2;也就是40px

line-height:200%;这里如果带单位是%,表示的是倍数,是文字大小的倍数
假设文字大小是20px 那么line-height:200%;也就是40px

/* 文本水平居中 */
	text-align: center;
/* 单行文本垂直居中 可以让line-height的数值=height的数值*/
	line-height: 100px;

背景属性

切记 背景不会影响容器的大小, 也不会把容器撑开, 并不会影响文本的显示, 背景始终位于文本的底部显示

1.背景颜色
属性:background-color:
	background-color:rgba(23,34,45,0.5)
	rgba()代表了让前面的颜色便透明
红色（r）0 到 255 间的整数，代表颜色中的红色成分
绿色（g）0 到 255 间的整数，代表颜色中的绿色成分
蓝色（b）0 到 255 间的整数，代表颜色中的蓝色成分
    透明度（a）取值 0~1 之间， 代表透明度
    a代表的时alpha 通道的颜色;控制颜色的透明度
    取值:0 - 1 之间的小数, 包括0, 包括1; 0代表透明; 1代表不透明;
    	取值保留一位小数; 小数点前面的0可以省略;

2.背景图片
属性:background-image:
取值:url
	?特点1:背景图的可视范围是盒子大小决定的
     盒子大小=背景图的大小,可以看到一张完整的背景图
     盒子大小>背景图的大小,可以看到很多张平铺的背景图
     盒子大小<背景图的大小,可以看到部分背景图
     
    ?特点2:背景图默认是平铺
可以设置背景图的平铺方式,用新属性 background-repeat:
    ?特点3:背景图是不占位的
    ?特点4:背景图默认的起点在盒子的左上角可以修改背景图的位置,用新属性background-position

3.背景平铺(背景重复)
属性:background-repeat
 取值:repeat===平铺
      no-repeat===不平铺
      repeat-x===水平平铺
      repeat-y===垂直平铺
        只要插入背景图片默认就是平铺,取消平铺之后,图片默认显示再容器的左上角

4.背景位置
        取消平铺之后,背景图片默认再左上角 需要调整背景图片的位置
属性:background-position
取值:x y; x代表水平方向,y代表垂直方向
关键词:  水平方向:left/right/center
垂直方向:top/bottom/center
  (使用关键词时,可以只写一个.默认另外一个是居中,顺序不用管)
   如果取值为关键词的时候, 则不分水平垂直方向;
   如果取值为数值:(单位:px %  和关键词三者可以混用)
第一个值代表的是水平方向; 
第二个值代表的是垂直方向;
(使用数值时,也可以只写一个.默认另外一个是居中,顺序不能换  可以写正数  也可写负数)
    用%单位,其结果是盒子大小的%-背景图大小的%的差

 5.图片大小
属性:background-size
取值:x y; x代表水平方向,y代表垂直方向
关键词:直接替换x和y,使用一个关键词即可
    over==等比例放大背景图,直到铺满容器为止,背景图片会显示不全
    contain==等比例放大背景图,只要是横向或纵向有一个边铺满容器就可以,背景图片浦不满容器
数值:单位 px  %,这里的%结果是盒子的大小

6.图片固定滚动
当滚动屏幕的时候背景图片是否随着滚动条滚上去或者是固定再一个位置
属性:background-attachment
取值:
    fixed==背景固定,(参照物是浏览器窗口)当滚动浏览器的时候不会影响背景图片,背景图片会固定再某个位置
    scroll(默认值)==背景滚动,(参照物是盒子大小)当浏览器滚动的时候,背景图片会随着浏览器滚动条滚动

7.背景复合属性
前面学习的六个属性均为单一属性; 一个属性只能实现一个样式,要简化代码, 我们需要使用复合属性;
   属性:background
   取值:color  image  repeat  position/size  attachment
注意事项:
        1)复合属性后面可以跟一个值,也可以跟多个值,多个值使用空格隔开,多个取值的时候取值先后顺序可以交换
        2)复合属性使用位置和大小的时候,必须按照顺序书写,不能拆开书写 位置/大小
        3)如果只要位置,/和大小 可以不用写
        4)如果只要大小,/和前面的位置 必须要写 就算不调整位置也要写成0px 0px
        5)可以一个盒子同时书写多个背景图,中间用逗号隔开,但是有多个背景图的时候还有背景色 背景色要在最后一个背景图中加
        
.box7{
   width: 1300px;
   height: 300px;
   border:5px solid gray;
   background: blueviolet url("img/12色块.png") no-repeat 20px 20px/100px 100px fixed
        }

列表相关属性

修改列表符号的样式
      list-style-type: none; 没有符号
      list-style-type: disc; 实心圆
      list-style-type: circle; 空心圆
      list-style-type: square; 方形
      list-style-type: square; 
修改列表符号为图片
      list-style-image: url(../tu2.png);
修改列表符号的位置
      list-style-position:outside ; 在li的外面
      list-style-position:inside ; 在li的里面