CSS笔记

一.CSS的简介1.什么是css2.css的语法格式3.单位 二.CSS语法1.元素选择器1.1 *选择器1.2 element选择器1.3 class类名称选择1.4 id选择器1.5 子父选择器1.6 css选择器优先级 2.样式2.1 css在网页里面分为几种类型2.2 基本样式2.3 样式的属性2.4 行内样式2.5 内嵌样式2.6 外部样式2.7样式的优先级 3.伪类3.1 分类 4.盒子模型1.相关知识3.盒子模型塌陷的处理方法 5.内联元素和块元素相互转化1.相关知识 6.水平元素浮动1.相关知识 7.元素的定位1.相关知识 8.伪元素9.元素的显示隐藏10.超出部分隐藏11.网站的布局模式 三.一点小知识

一.CSS的简介

1.什么是css

1.css：名称是层叠样式表（Cascading style sheets） 2.作用:渲染html元素–添加外观的 3.存在样式表中 4.解决内容和表现分离 5.外部样式表大大提高工作效率 6.多个样式之间相互重叠

2.css的语法格式

写法是： 选择器{属性：值；属性：值；} 这种写法仅限内嵌和外部，行内样式使用style属性来操作。 注意：css是写给html元素的

3.单位

网页里面的像素单位：px, %, rem ,em px 代表固定像素值，相对屏幕的分辨率的单位值 % 百分比像素值 rem 相对单位，只相对于网页的html根元素的字体大小 em 相对单位，相对于元素文本字体大小，没有设置字体大小，默认浏览器字体大小

二.CSS语法

1.元素选择器

元素选择器：根据选择器匹配元素，来添加样式 多个不同的元素具有相同的类名称：根据元素区分，选择类 选择器可以复合使用，使用逗号分隔

1.1 *选择器

匹配所有元素，匹配的是网页里面所有的同名元素

1.2 element选择器

根据元素的名称来匹配

1.3 class类名称选择

根据元素的class名称选择，用.匹配，class 可以多个元素共有

1.4 id选择器

根据元素的id名称选择，用#匹配，id只能有一个，不能重名

1.5 子父选择器

空格匹配当前元素的所有子元素，>匹配的是当前元素的直接子元素

1.6 css选择器优先级

选择器的优先级： 1.*选择器<元素选择器<class选择器<id选择器 2.id选择器的优先级和子父选择器的优先级： 和子父选择器前面的匹配选择器进行对比： 有父级，同级别父级优先，不同级按1 3.!important可以提高优先级

2.样式

2.1 css在网页里面分为几种类型

1.行内样式 2.内嵌样式 3.外部样式

2.2 基本样式

1.color 控制字体颜色 2.font-size 设置字体大小 默认的属性值 larger x-larger small x-small 通常用px 3.font-family: serif; 设置字体的 4.width 设置宽 5.height 设置高 6.border 设置边框 12. font-style 字体样式 13.font-weight 字体加重

2.3 样式的属性

样式属性：单属性样式和复合属性样式

2.4 行内样式

行内样式写在元素的行内

2.5 内嵌样式

1.内嵌的位置：在head标签或者body标签里面 2.如何使用：使用style标签内嵌到head或者body标签里 3.通过css选择器来匹配样式

2.6 外部样式

1.外部样式的位置：在外部写样式表，网页内部引入 2. 外部样式的引入 使用link 标签 3.可以引入在 head 或者body，还可以在内嵌样式里面引入，使用@import ‘./css/index.css’

2.7样式的优先级

样式优先级： 1.三种样式不冲突，三者效果叠加 优先级：行内> 内嵌>外部 （内嵌 和外部 优先级 取决于引入的先后顺序） 2.三种样式冲突，样式选择根据就近原则 优先级：行内> 内嵌>外部 （内嵌 和外部 优先级 取决于引入的先后顺序） 3.!important可以提高优先级，优先级高于行内

3.伪类

3.1 分类

伪类：类似鼠标操作 :hover 鼠标悬停伪类 :active 激活伪类 :visited 访问之后的伪类 :link 访问之前的伪类 :checked ~匹配的是当前元素之后的所有元素 + 匹配的元素是当前元素紧跟之后的元素

4.盒子模型

1.相关知识

css盒子模型：所有的元素都可以看做盒子，设计或者布局的时候用元素设置行级块的时候，水平的和垂直的元素之间的外边距都是累加的元素水平放置，两个之间的外边距是累加的子元素全部浮动的时候 ，元素之间的外边距也是累加的正常默认情况元素上下外边距不会累加 而是走最大值给元素设置内间距值 ，默认会把元素撑开如果想设置内间距 又不想撑开： 1.box-sizing: border-box; 是让元素边框和内间距向盒子内部走 2.box-sizing:content-box; 相当于默认情况margin 复合属性 padding 复合属性

3.盒子模型塌陷的处理方法

盒子模型塌陷：父元素的内部没有内容，子元素设置margin-top，连带父容器塌陷

给父元素设置上边框给父元素设置内间距给父容器设置overflow: hidden;

5.内联元素和块元素相互转化

1.相关知识

元素分为:行元素,块元素相互之间的转化： 1.块元素转化行元素 display: inline; 块元素转化行级块 display: inline-block; 2.行元素转化块元素 display:block 行元素转化行级块 display: inline-block; 3.元素在转化为行级块的时候默认 有间隙 给父元素设置字体大小为 0

6.水平元素浮动

1.相关知识

子元素在默认情况会自动撑开父元素元素水平浮动:left,right素在浮动之后会脱离文档流,就不占位置子元素浮动，父元素撑不开怎么处理： 1.给父元素设置固定高 2.给父元素设置 超出部分隐藏 overflow: hidden; 3.在父元素内部设置一个空的div 4.子元素浮动,导致父元素的问题 可以直接处理 ，父元素底下的兄弟元素,里面的内容会收上边浮动的隐藏,是用上面的第三种方案解决或 在兄弟元素样式里面写:清除浮动

7.元素的定位

1.相关知识

元素的定位: 1.absolute 绝对定位 2.relative 相对定位 3.fixed 固定定位元素默认在文档流上占位值元素在定位之后可以多使用5个属性:zindex 分层 left right bottom top文档流默认层0 z-index: 0;relative: 给元素设置相对定位,默认位置不变,相对自身的位置进行左上右下移动以及分层absolute: 给元素设置绝对定位,元素脱离文档流 不占位置,默认相对于浏览器,相对浏览器左上右下移动如果让绝对的元素相对父元素定位:给父元素设置相对定位,子元素就在会在父元素的内部上下左右移动以及分层fixed : 固定定位是元素脱离文档流,设置上下左右之后,滑动滚动条位置固定不变素绝对定位或者固定定位没有宽和高 得设置元素在绝对定位或者固定定位之后 初始位置 得看前面有没有元素占位置 有默认位置在这个元素的下边

8.伪元素

:befer :after

9.元素的显示隐藏

控制元素显示隐藏 display:block; 显示同时元素也是块元素 display:none; 隐藏

10.超出部分隐藏

overflow: hidden;

11.网站的布局模式

固定布局 固定像素布局 px流动布局 百分比布局 %网站布局 layout布局浮动布局 —就是元素左右浮动 堆叠产生布局模式定位布局 —就是元素使用各种定位 产生的布局模式弹性盒子布局 —flex 进行布局多列布局grid布局 网格布局

三.一点小知识

1.div块元素,默认为父元素的100% 2.font-size默认像素16px 最小8px 3.百分比像素走父元素 4.浏览器一般默认：16px 5.rows=“行数” cols=“列数” 6.css里面设置宽高属性：当前元素必须是块级元素，如果要给行级元素设置宽和高，必须转化为块级元素 7.命名class和id的时候不要使用纯数字，数字不要开头 命名规则：

驼峰命名 BlockSmall帕斯卡命名 blockSmall