css学习笔记

一、基础选择器

1. 标签选择器：标签名 { css属性名：属性值； }
2. 类选择器：.类名 { css属性名：属性值； }
3. id选择器：#id属性值 { css属性名：属性值； }
4. 通配符选择器：* { css属性名：属性值； }

二、字体和文本样式

字体样式

Ø 字体大小： font-size
•数字+px
Ø 字体粗细：font-weight
•正常：normal 或 400
• 加粗：bold 或 700
Ø 字体样式：font-style
• 正常：normal • 倾斜：italic
Ø 字体系列：font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
Ø 字体连写：font
• font : style weight size family;（顺序不能错，省略只能省略前两个）

文本样式

image.png

text-align : center 能让那些元素水平居中？

1. 文本
2. span标签、a标签
3. input标签、img标签
   Ø 注意点： 1. 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

如果需要让div、p、h（大盒子）水平居中？

可以给大盒子本身设置margin : 0 auto ; 实现

行高

属性名：line-height 作用：控制一行的上下行间距
取值：line-height ：数字+px/倍数（当前标签font-size的倍数）
应用：

1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

三、选择器进阶

1.后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
选择器语法：选择器1 选择器2 { css }

2 .子代选择器：>

作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器1 > 选择器2 { css }

3.并集选择器：,

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 { css }

4.交集选择器：紧挨着

作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2 { css }

5.emmet语法

作用：通过简写语法，快速生成代码

image.png

总结：

image.png

6.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }

6.1 链接伪类选择器

场景：常用于选中超链接的不同状态
选择器语法：

image.png

如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写

6.2焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件
选择器语法：

input:focus {
background-color:blue;

效果： • 表单控件获取焦点时默认会显示外部轮廓线

7.属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法：

image.png
image.png

四、背景相关

1.背景颜色
属性名：background-color（bgc）

2.背景图片
属性名：background-image（bgi）:url('图片路径')

3.背景平铺
属性名：background-repeat（bgr）

image.png

4.背景位置
属性名：background-position（bgp）: 水平方向位置 垂直方向位置

image.png

注意：如果背景图的宽没有盒子宽，在设置水平方向为center的时候会将背景图水平居中放置，如果背景图的宽比盒子宽时，会将背景图水平方向的中心位置放置在盒子水平放心的中心位置，此时背景图的左右两边就会有一部分看不见。
垂直方向同理。

5.背景图片大小
background-size：宽度 高度；

image.png

完整连写：

image.png
< br >

五、元素显示模式

1 块级元素

属性：display：block
显示特点：

1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
   Ø 代表标签： • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.行内元素

属性：display：inline
显示特点：

1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
   Ø 代表标签： • a、span 、b、u、i、s、strong、ins、em、del……

3.行内块元素

属性：display：inline-block
显示特点：

1. 一行可以显示多个
2. 可以设置宽高
   Ø 代表标签： • input、textarea、button、select……
   特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

六、CSS 三大特性

继承性、层叠性、优先级

继承性

特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性：

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……

层叠性

特性： 1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上 2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式： 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 <行内样式 < !important
注意点： 1. !important写在属性值的后面，分号的前面！

2. !important不能提升继承的优先级，只要是继承优先级最低！
3. 实际开发中不建议使用 !important 。

权重叠加计算

image.png

七、盒子模型

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin ）构成，这就是 盒子模型

image.png

边框（border）- 单个属性

image.png

边框（border）- 连写形式：
border : 10px solid red;

内边距（padding）- 取值

image.png

注意：

在给盒子设置边框和内边距的时候会撑大盒子，如果不想撑大盒子，可以采用以下方法：
1.手动内减
2.自动内减 ：给盒子设置属性 box-sizing : border-box ; 即可，浏览器会自动计算多余大小，自动在内容中减去

外边距（margin）- 取值

行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时
结果：

1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！

八、结构伪类选择器

1-作用与优势：

1. 作用：根据元素在HTML中的结构关系查找元素
2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
3. 场景：常用于查找某父级选择器中的子元素

2- 选择器

image.png

注意点

image.png

九、伪元素

元素：HTML 设置的标签
伪元素：由 CSS 模拟出的标签效果

image.png

1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

十、浮动

属性名：float 属性值：left（左浮动） right（右浮动）
作用：早期作用：图文环绕。 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
特点：

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 • 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素会受到上面元素边界的影响
5. 浮动元素有特殊的显示效果 • 一行可以显示多个 • 可以设置宽高

注意点： • 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

十一、清除浮动

为什么要清除浮动：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素（子元素浮动后脱标 → 不占位置），清除浮动可以使父元素有高度，从而不影响其他网页元素的布局。

清除浮动的方法

1.直接设置父元素高度
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

2.额外标签法
先在父元素内容的最后添加一个块级元素，然后给添加的块级元素设置 clear:both
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法
操作：用伪元素替代了额外标签

.clearfix::after {
      content: '';
      display: block;
      clear: both;
      /* 补充代码：在网页中看不到伪元素 */
       height: 0;
      visibility: hidden; 
    }

优点：项目中使用，直接给标签加类即可清除浮动

4.双伪元素清除法

 .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }
    .clearfix::after {
      clear: both;
    }

优点：项目中使用，直接给标签加类即可清除浮动

5.给父元素设置overflow : hidden
直接给父元素设置 overflow : hidden
优点：方便

十二、定位

定位的作用：

1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于 盒子之间的层叠情况

1.静态定位

介绍：静态定位是默认值，就是之前认识的标准流。
代码：position:static

2.相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position:relative
特点：

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
   应用场景：
4. 配合绝对定位组CP（子绝父相）
5. 用于小范围的移动

3.绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position:absolute
特点：

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
   应用场景：
4. 配合绝对定位组CP（子绝父相）

4.固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position:fixed
特点：

1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
   应用场景：
4. 让盒子固定在屏幕中的某个位置

5.定位总结：

image.png

绝对定位相对于谁移动？

1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

子绝父相水平垂直居中操作：

1. 子绝父相
2. left：50%；
3. top：50%；
4. transform：translate（-50%，-50%）；

元素层级问题

不同布局方式元素的层级关系：
•标准流 < 浮动 < 定位

不同定位之间的层级关系：
•相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级

属性名：z-index
属性值：数字
• 数字越大，层级越高

十三、装饰

1.垂直对齐方式

作用：解决行内/行内块元素垂直对齐问题
例如：当图片和文字在一行中显示时，其实底部不是对齐的

image.png

垂直对齐方法：
属性名：vertical-align
属性值：

image.png

（拓展）项目中 vertical-align 可以解决的问题

1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题
   注意点：
   • 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
   • 推荐优先使用浮动完成效果

2.光标类型

场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：

image.png

3.边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

4.overflow溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名：overflow
常见属性值：

image.png

5.元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
常见属性：

1. visibility：hidden
2. display：none

区别：

1. visibility：hidden 隐藏元素本身，并且在网页中 占位置
2. display：none 隐藏元素本身，并且在网页中 不占位置

注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）

（拓展）元素整体透明度

场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
注意点： • opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

（拓展）边框合并

场景：让相邻表格边框进行合并，得到细线边框效果
代码：border-collapse：collapse；

image.png

用CSS画三角形技巧（面试题）

image.png

场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。
实现原理： • 利用盒子边框完成
实现步骤：

1. 设置一个盒子
2. 设置四周不同颜色的边框
3. 将盒子宽高设置为0，仅保留边框

4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

   
   image.png
   

   拓展：通过调整不同边框的宽度，可以调整三角形的形态

利用此原理还可作出类似效果

image.png

十四.样式补充

1.精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
精灵图的使用步骤 ：

1. 创建一个盒子
2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

3.文字阴影

作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow

image.png

阴影可以叠加设置，每组阴影取值之间以逗号隔开

image.png

4.盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow

image.png

5.过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition

image.png

注意点：

1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的 ① 给默认状态设置，鼠标移入移出都有过渡效果 ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

过度属性也是可以叠加设置，每组过度取值之间以逗号隔开

image.png

6.轮廓线outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

7.防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的

textarea{ resize: none;}

文本域也可以设置outline:none;

8.溢出的文字省略号显示\

1. 单行文本溢出显示省略号--必须满足三个条件

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

2. 多行文本溢出显示省略号
   多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）

`overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;