CSS

CSS学习

day01

1.css概念

	层叠样式表，将html文件的内容以更优雅的方式呈现给用户
	{
    	属性：值；
 	}

2.css声明

	选择器 {
    	属性名：值；
    	属性名：值；
    }

3.可读性【规范】

1）.缩进、空白
2）.添加注释
3）.速写    

4.原理

1）加载html文件
2）解析html文件中的内容
3）解析html的同时加载css文件
4）创建DOM树
5）将页面呈现出来

5.如何在html中使用css

参考1-css.html

6.@import和link的异同

相同:都可以导入外部的css样式表
不同:
    1).所属范围不同
        @import是css的语法
        link是html文件中的标签
    2).加载顺序不一样
        link 导入的css是在解析html文件的同时解析
        @import 导入的css只有在html文件解析完毕之后才加载
    3).兼容性
        link不存在兼容性问题
        @import是css语法,所以存在兼容性问题[低版本的浏览器中可以测试]

7.css选择器

1)基本选择器
    通配选择器 *
    id选择器 #
    类名选择器 .
    逗号选择器 ,
    标签选择器 <tag>
2)层次选择器
    子代选择器 .one > .two
    后代选择器 .one .two

day02

1、属性选择器【表单元素】

[key] 选中所有具有key属性的元素
[key=valu 选中所有具有key属性并且值是val的元素
(参考1-attr.html)

2.伪类选择器

:link a标签未点击时
:hover a标签光标悬浮
:active a标签点击时
:visited a标签访问时
:first-child
:last-child
:nth-child(n)
    :nth-child(1) ----- :first-child

3.伪元素选择器

::before 在当前选中的元素的前面创建出一个伪元素
::after 在当前选中的元素的后面创建出一个伪元素

4.级联 [权重]

浏览器采用css样式的顺序
    1.!import
        具有该属性值的样式优先级最高
    2.特性值
        内联样式                        1000
        id选择器                        100
        类选择器\伪类选择器\属性选择器   10
        标签选择器\伪元素选择器          1
    3.css代码的顺序
        谁离选中的元素近,采用谁的样式 [就近原则]

5.继承

样式从父元素继承到子元素的过程
1.可继承的样式
    font-size 字体大小
    color 字体颜色
    cuisor 鼠标的形状
2.不可继承的样式
    height
    width
    margin 外边距
    padding 内边距
    background-color

6.单位

1.颜色
    十六进制颜色: #cccccc ==> #ccc
    关键字: red/blue...
    rgb 
        r:red   0~255
        g:green     0~255
        b:blue  0~255 
    rgba
        r:red   0~255 
        g:green   0~255 
        b:blue  0~255 
        a:模糊程度  0~1
2.长度/尺寸
    绝对单位
        px 像素
    相对单位
        em  参考父元素的字体大小
        rem 参考根元素html的字体大小
        %   

day03

1.相对单位

浏览器默认大小字体为16px；
    em  
        相对于当前元素的父元素中的字体大小
    rem     
        相对于html中字体的大小
    %
        相对于父元素的大小

2.盒子模型

浏览器页面中每一个元素都可以被当作一个“盒子”
1.组成
    height 元素内容的高度
    width 元素内容的宽度
    padding 元素内容与边框的距离
        padding-top
        padding-right
        padding-bottom
        padding-left
        	速写：  
            	padding:1px 2px 3px 4px;
            	padding:1px 2px 3px;
            	padding:1px 2px;
            	padding:1px;
    border 元素的边框
    margin 元素与其他元素之间的距离
        margin-top
        margin-right
        margin-bottom
        margin-left
2.分类
    参考3-盒子分类.html
3.计算
    参考3-盒子分类.html
4.背景
    background-color
    background-image
    background-size     背景图尺寸
    background-repeat   背景图的重复方式
    background-clip     背景图
    background-position 背景图位置

3.布局

1.默认文档流
    1.页面元素出现的顺序与该元素在文件中代码出现的顺序一致
    2.块级元素独占一行空间
    3.行内元素可以与其它元素共享一行空间
    （由于默认文档流满足不了所有需求，所以需要采用其他的布局方式。）
2.浮动布局
    用法:
        为了让块级元素在一行显示。
    语法：
        float：left/right。none/inherit；
    特点：
        1.脱离了默认文档流。
        2.浮动布局的元素从左到右一次布局，直到所有的浮动元素的宽度之和超出了父元素的宽度，才换到下一行继续布局。
        3.浮动元素会失去对父元素的支撑【清除浮动】。
        4.浮动元素会失去默认的宽度.

day04

1、作业
2、四列布局
3、动画布局
4、品字格布局
5、双飞翼布局
6、字体样式

day05

1、品字格布局
2、文本、字体样式
3、定位布局

1、overflow 对超出的内容区域进行处理

	auto  根据元素是否超出添加滚动条
			超出 -> 添加滚动条
			不超出 -> 不添加滚动条
	scroll 给父元素直接添加滚动条，不论子元素是否超出父元素
	hidden 将超出父元素的内容隐藏【不显示】

2、文本样式

font-
	font-size  字体大小
	font-weight  字体粗细
	font-family  字体族
	font-face  网络字体
	color 字体颜色
text-
	text-algin 文字的排布方式
  		left\center\right
	text-decoration  文字线的修饰
  	overline   上划线
  	underline  下划线
  	line-through 删除线
	text-transform 文字变形

3、定位布局

	当元素使用了定位属性position之后，可以使用left\top\right\bottom来描述元素的位置
1) 静态布局【默认值】
		position:static;
2) 相对定位
		参考点：相对于当前元素原本的位置
		position:relative;
3) 绝对定位
		参考点：相对于当前元素父【祖先级】定位元素来描述位置，当祖先级元素都不是定位元素的时候，相对于浏览器视口进行定位
		position:absolute;

day06

1、固定定位

position:fixed;
参考点：浏览器的视口

2、粘滞布局

position:sticky;
相对定位 + 固定定位

阈值 top:50px;
大于 相对定位
小于 固定定位

3、链家重构

—作业—

1. 网易严选重构
2. 链家重构

day07

1、伸缩盒

在移动端进行布局
1) 语法
	display:flex;
 2) 父元素的样式
	display:flex  将盒子设置为伸缩盒
	flex-direction 弹性元素排布的方向
  	row x轴方向排布【默认值】
  	column y轴方向排布
	justify-content 主轴方向上的对齐方式
  	center  居中排布
  	flex-start 开始位置上排布
  	flex-end 结束位置上排布
	align-items 交叉轴上对齐的方式
  	center  居中排布
  	flex-start 开始位置上排布
  	flex-end 结束位置上排布

3. 子元素的样式
   flex 弹性元素对于伸缩盒剩余空间的分配

2、动画
随着时间的推移动态的改变css的样式属性

1. 语法【组成】
   animation 动画的配置
   @keyframes 动画的关键帧
2. 属性
   参考 3-animation.html
3. 案例

1. 轮播图
2. 梦幻西游

day08

1、过渡

提供了一种在更改CSS属性时控制动画速度的方法
1) 语法
	transition:property duration timing-function delay;
  	property 需要添加过渡的属性
  	duration 过渡的时间
  	timing-function 过渡的速度
  	delay 过渡的延迟
2) 和动画的区别
	动画是不需要触发前提的，在页面刚打开时，就可以显示动态的效果
	过渡是需要手动去触发
3) 案例
	参考 2-book.html 3-border.html
4) 可过渡的属性
	有些属性不能够添加过渡，即使添加了也没有效果
	display属性就不可以添加过渡

2、变形

1. 语法
   div {
   transform:xxx();
   transform-origin:center;
   }
   xxx()是一个变形函数，可以操控元素以什么样的方式进行变形
   transform-origin 元素发生变形时的原点
2. 旋转
   rotateX(deg) 以x轴为定点轴，旋转元素
   rotateY(deg)
   rotateZ(deg)
3. 倾斜
   skewX(deg) 以x轴为定点轴，倾斜元素
   skewY(deg)
   skew(xdeg,ydeg)
4. 缩放
   scale(n1,n2) x轴方向缩放n1倍，y轴方向缩放n2倍

3、媒体查询

	实现响应式布局，在不同尺寸页面中，项目展示的效果不同