CSS超详细笔记

复合选择器

后代选择器 ul li{} .nav a{}

子代选择器 .nav>p{}

​ 用于选择后代里的直系亲属，而不是跳

并集选择器 .nav, .header{}

​ 逗号后面注意换行

链接伪类选择器 a:hover LVHA( linked/ visit/ hover/ active)

:focus选择器 input:focus{}

元素显示模式

块级元素 一行一个 / 可改变宽高 display: block

行内元素 一行多个 / 不能改变宽高 display: inline

行内块元素 一行多个 / 可改变宽高 display: inline-block

计算器

body{
   
   text-align: center;
 }
 .center{
   
   display: inline-block;
   width: 251px;
   border-radius: 5px;
   box-shadow: 2px 2px 5px #909090;
 }
 button{
   
   width: 80px;
   height: 50px;
   border: none;
   color: red;
 }
 span{
   
   display: inline-block;
   text-align: center;
   width: 80px;
 }

只用一个div（名叫center）。

- inline-block让div里面的组件全在同一行，此div居中，父级添加text-align: center

- border-radius添加圆角

- box-shadow添加阴影

精灵图

- 为什么需要精灵图（sprites）？

​ 减少服务器接受和发送请求次数，提高页面加载速度

- 使用步骤

​ 将小图片整合到大图中

​ 用fw测量位置和图标大小

​ 通过background-position移动背景位置 - x和y坐标基本为负

- 缺点

​ 图片文件比较大

​ 图片放大和缩小会失真

​ 一旦制作完毕想更换非常复杂

字体图标

- 为什么？

​ 字体图标为前端工程师提供了一种方便高效的图标使用方式

​ 展示的是图标本质是文字

- 使用步骤

​ 图标从https://icomoon.io & https://www.iconfont.cn 两个网页下载

​ 前者有字体文件，后者只有svg文件

​ 下载的文件解压后，把fonts文件放到制作网页的根目录下。

​ 再打开同文件夹里的style.css，复制第一个@font-face{ }里的代码

​ 打开同文件夹里的demo.html，复制想要的图标对应的 ▢ 符号

​ 粘贴到或者等标签中

​ 通过更改标签里的字体设置可以改变图标样式

- 如何追加？

​ 打开https://icomoon.io 点击左上角import icons 选择selection.json

​ 替换原来文件即可

- 优点

​ 轻量级：图标字体比图像小。

​ 一旦字体加载了，图标马上会被渲染，减少服务器请求。

​ 灵活性：可随意改变颜色、产生阴影、透明效果、旋转等。

​ 兼容性：几乎支持所有浏览器。

css三角

- 核心代码

 /* 对话框制作 */

.box {
   

   position: relative;

   width: 100px;

   height: 120px;

   background-color: pink;

}

.triangle {
   

   position: absolute;

   top: -10px;

   left: 60px;

   width: 0;

   height: 0;

   line-height: 0;

   font-size: 0;

   border: 10px solid transparent;

   border-bottom-color: pink;

}

css用户界面样式

- 鼠标样式 cursor

        li {cursor: pointer;}

属性值	描述
default	默认鼠标
pointer	小手
move	移动
text	文本
not-allowed	禁止

- 轮廓线 outline - 点击变蓝变亮

        
        input {outline: none;}

- 防止拖拽文本域 resize - 文本框右下角拖拽

        
        textarea {resize: none;}
        <textarea></textarea>  不要换行写！！！！！

vertical-align属性应用

- vertiacal-align 属性使用场景

​ 设置 图片 & 表单（行内块元素）和文字垂直对齐。

​ 官方解释：用于设置一个元素的垂直对齐方式，

​ 但只针对于行内元素或者行内块元素有效。

此属性是给图片标签添加的！！！！！

        vertical-align: baseline | top | middle | bottom;

属性值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放在父元素的中部
bottom	把元素的底端与行中最高元素的底端对齐

- 解决图片底部默认空白缝隙

1. 给图片添加vertical-align: baseline | top | middle | bottom等

2. 把图片变成块级元素 display: block;

​ 方法1 提倡使用！！！

溢出文字省略号显示

- 单行文本溢出

/** *强制一行内显示文本* **/
white-space: nowrap;
/** *超出部分隐藏* **/
overflow: hidden;
/** *省略号代替超出部分文字* **/
text-overflow: ellipsis;

- 多行文本溢出 - （兼容性问题）

overflow: hidden;
text-overflow: ellipsis;
/** *弹性伸缩盒子模型显示* **/
display: -webkit-box;
/** *限制文字两行* **/
-webkit-line-clamp: 2;
/** *设置或检索伸缩盒对象的子元素* **/
-webkit-box-orient: vertical;

布局技巧

- Margin负值

​ 问题：两个div之间，float之后，边框1+1=2

​ 解决：后div遮挡前div边框右侧 margin-left: -1;

​ 问题：鼠标hover之后，边框右侧被遮挡。需要一个完整的div边框

​ 解决：

​ 1. 无相对定位，则添加相对定位

li:hover {
   
  position: relative;
  margin-left: -1;
  border-color: #333333;

}

​ 2. 有相对定位，利用z-index提高层级