css基础知识点

CSS基础知识点

一丶
1、css概念
层叠样式表，将html文件的内容以更优雅的方式呈现给用户
{
属性:值
}
2、css声明
选择器 {
属性名:属性值;
属性名:属性值;
}
3、可读性【规范】

1. 缩进、空白
2. 添加注释
3. 速写
   margin-top:10px;
   margin-left:20px;
   margin-bottom:30px;
   margin-right:40px;
   ->
   margin:10px 40px 30px 20px;
   4、原理
4. 加载html文件
5. 解析html文件中的内容
6. 在解析html的同时加载css文件
7. 创建dom树
8. 将页面呈现出来
   5、如何在html文件中使用css
   参考1-css.html
   6、@import和link的异同？
   相同：
   都可以导入外部的css样式表
   不同：
9. 所属范围
   @import是css的语法
   link是html文件中标签
10. 加载顺序
    link导入的css是在解析html文件的同时解析
    @import导入的css只有在html文件解析完毕之后才加载
11. 兼容性
    link不存在兼容性问题
    @import是css与语法，所以会存在兼容性问题【低版本的浏览器中可以测试】

7、css选择器

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

二丶
1、属性选择器【表单元素】
[key] 选中所有具有key属性的元素
[key=val] 选中所有具有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
:nth-child(2)
:nth-child(3) ==> :last-child

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

4、级联【权重】
浏览器采用css样式的顺序

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

5、继承
样式从父元素继承到子元素的过程

1. 可以继承的样式
   font-size 字体大小
   color 字体颜色
   cursor 鼠标形状
2. 不可继承的样式
   height 高度
   width 宽度
   margin 外边距
   padding 内边距
   background-color 背景色

6、单位

1. 颜色
   十六进制颜色
   #cccccc; => #ccc;
   #c3c3c3;
   #ffffff; => #fff;
   关键字 red/orange/yellow/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的字体大小
   %
   三丶
   1、相对单位
   浏览器的默认字体大小是16px。
   em
   相对于当前元素的父元素中的字体大小
   rem
   相对于根元素html中字体的大小
   %
   相对于父元素的大小

2、盒子模型
浏览器页面中每一个元素都可以被当作一个’盒子’

1. 组成
   width 元素内容的宽度
   height 元素内容的高度
   padding 元素内容与边框的距离【内边距】
   padding-top 上内边距
   padding-bottom 下内边距
   padding-left 左内边距
   padding-right 右内边距

   速写：
   padding:1px 2px 3px 4px;
   padding:1px 2px 3px;
   padding:1px 2px;
   padding:1px;

border  元素的边框
margin  元素与其他元素之间的距离【外边距】

2. 分类
   参考3-盒子分类.html

3. 计算
   参考3-盒子分类.html

4. 背景
   background-color 背景色
   background-image 背景图片
   background-size 背景图的尺寸
   background-repeat 背景图的重复方式
   background-position 背景图的位置

background-clip 背景图

3、布局

1. 默认文档流

1. 页面元素出现的顺序与该元素在html文件中代码出现的顺序一致
2. 块级元素独占一行空间
3. 行内元素可以与其他元素共享一行空间

由于默认文档流满足不了所有需求，所以需要采用其他的布局方式。

2. 浮动布局
   用法：
   为了让块级元素在一行显示。
   语法：
   float:left/right;
   特点：
   1. 脱离了默认文档流
   2. 浮动布局的元素会从左往右依次布局，直到所有的浮动元素的宽度之和超出了父元素的宽度，才换到下一行继续布局
   3. 浮动元素会失去对父元素的支撑【清除浮动】
   4. 浮动元素会失去默认的宽度