CSS三大特性/盒子模型/浮动/定位/高级技巧

一、VS code 快捷键

• shift + Alt + down: 向下复制一行
• Alt + z: 切换换行显示方式
• shift + Alt + F: 格式化代码
• shift + Alt: 选中多行
• ctrl + g: 快速定位到某一行

二、Emmet 语法

• ! + Tab

• .demo$*5 + Tab

• p{内容} + Tab

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成<div></div>
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
7. 如果想要在生成的标签内部写内容可以用 { } 表示

CSS 基本采取简写形式即可.

1. 比如 w200 按tab 可以 生成 width: 200px;
2. 比如 lh26px 按tab 可以生成 line-height: 26px;

三、Tips

1. 图片居中对齐：给其父元素设置

   text-align: center;

2. font-weight: 400不加粗

   font-weight: 700加粗

3. 单行文字

   • 垂直居中：让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中，即line-height = height

   • 水平居中：text-align: center;

4. 字体复合属性

   body {
   	font: font-style font-weight font-size/line-height font-family;
   }
   

   • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
   • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

5. 链接伪类选择器注意事项

   • 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

   • 链接伪类选择器实际工作开发中的写法：

     /* a 是标签选择器 所有的链接 */
     a {
     	color: gray;
         text-decoration: none;
     }
     /* :hover 是链接伪类选择器 鼠标经过 */
     a:hover {
     	color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
     }
     

6. 元素显示模式总结

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RavrvOpK-1615106546088)(images\1.PNG)]

7. 元素显示模式转换

   • 转换为块元素：display:block;
   • 转换为行内元素：display:inline;
   • 转换为行内块：display: inline-block;

8. 背景图片位置

   background-position: x y;

   参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ax1GZ2Ui-1615106546089)(images\2.PNG)]

   1. 参数是方位名词
      • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
      • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
   2. 参数是精确单位
      • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
      • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
   3. 参数是混合单位
      • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

9. 背景复合写法（更提倡）

   background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

   background: transparent url(image.jpg) repeat-y fixed top ;

10. 背景色半透明

    background: rgba(0, 0, 0, 0.3);

    注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

    CSS3 新增属性，是 IE9+ 版本浏览器才支持的

11. 背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

12. 背景图片缩放

    background-size: 图片的宽度 图片的高度;

    background-size: 500px 200px;

    1. 只写一个参数 肯定是宽度 高度省略了 会等比例缩放

    ​ background-size: 500px;

    2. 里面的单位可以跟% 相对于父盒子来说的

       background-size: 50%;

    3. cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全

       background-size: cover;

    4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域

       background-size: contain;

四、CSS三大特性

1. 层叠性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UabyiNt1-1615106546089)(images\3.PNG)]

2. 继承性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZI56MVyJ-1615106546090)(images\4.PNG)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A2rzHMQ7-1615106546091)(images\5.PNG)]

3. 优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nmUgDROq-1615106546091)(images\6.PNG)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s2NAkwKW-1615106546092)(images\7.PNG)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzuMTnzN-1615106546092)(images\8.PNG)]

• 权重虽然会叠加，但是永远不会有进位

• 继承的权重优先级为0

五、盒子模型

1. border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框

2. 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小（宽/高）.

3. 外边距可以让块级盒子水平居中，但是必须满足两个条件：
   ① 盒子必须指定了宽度（width）。
   ② 盒子左右的外边距都设置为 auto 。
   .header{ width:960px; margin:0 auto;}

   行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

4. 外边距合并

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqrBSOL4-1615106546092)(images\11.PNG)]

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdeQYAr7-1615106546092)(images\9.PNG)]

   • 浮动的盒子不会产生外边距塌陷

5. 去掉 li 前面的 项目符号(小圆点)
   list-style: none;

6. 盒子阴影

   div:hover {
   	box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
   }
   

六、浮动

1. 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

   先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2. 设置了浮动（float）的元素最重要特性：

   • 脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）

     浮动的盒子不再保留原先的位置

   • 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

     浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐

   • 浮动元素会具有行内块元素特性。

     • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
     • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
     • 行内元素同理

3. 为了约束浮动元素位置, 我们网页布局一般采取的策略是:

   先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准则.

4. 网页布局第二准则：先设置盒子的大小, 之后设置盒子的位置。

5. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

   浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流.

七、清除浮动

原因：

• 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

八、清除浮动方法

1. 额外标签法

也称为隔墙法，是 W3C 推荐的做法：在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式

额外标签法会在浮动元素末尾添加一个空的标签。

例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。

• 优点： 通俗易懂，书写方便
• 缺点： 添加许多无意义的标签，结构化较差
• 注意： 要求这个新的空标签必须是块级元素。

2. 父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

注意是给父元素添加代码

• 优点：代码简洁
• 缺点：无法显示溢出的部分

3. 父级添加after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
	*zoom: 1;
}

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器
• 代表网站： 百度、淘宝网、网易等

4. 父级添加双伪元素

给父元素添加

.clearfix:before,.clearfix:after {
 content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

• 优点：代码更简洁
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯等

九、CSS 属性书写顺序(重点)

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

为了提高网页制作的效率，布局时通常有以下的布局流程：

1. 必须确定页面的版心（可视区），我们测量可得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
3. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
4. 开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块

实际开发中，导航栏通常采用li包含a的写法

十、定位

• 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理 top bottom 会执行 top

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDjSYt3Z-1615106546093)(images\10.PNG)]

定位的拓展

1. 加了绝对/固定定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
   ①left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
   ②margin-left: -100px;：让盒子向左移动自身宽度的一半。

2. 让固定定位的盒子贴着版心右侧对齐
   ①让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
   ②让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

3. 定位特殊特性
   绝对定位和固定定位也和浮动类似，具有行内块元素特性
   1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
   2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

4. 脱标的盒子不会触发外边距塌陷
   浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

5. 绝对定位（固定定位）会完全压住盒子
   浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
   但是绝对定位（固定定位） 会压住下面标准流所有的内容。
   浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

十一、元素的显示与隐藏

display 属性用于设置一个元素应如何显示。

• display: none ；隐藏对象
• display：block ；除了转换为块级元素之外，同时还有显示元素的意思
  display 隐藏元素后，不再占有原来的位置。

visibility 属性用于指定一个元素应可见还是隐藏。

• visibility：visible ; 元素可视
• visibility：hidden; 元素隐藏
  visibility 隐藏元素后，继续占有原来的位置。
  如果隐藏元素想要原来位置， 就用 visibility：hidden
  如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

十二、CSS 高级技巧

1. 为什么需要精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

使用精灵图核心总结：

1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现—background-position 。
3. 一般情况下精灵图都是负值。

2. 字体图标

icomoon 字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn/

步骤：

1. 把下载包里面的 fonts 文件夹放入页面根目录下

2. 在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中

   @font-face {
   font-family: 'icomoon';
   	src: url('fonts/icomoon.eot?7kkyc2');
   	src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
   	url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
   	url('fonts/icomoon.woff?7kkyc2') format('woff'),
   	url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   	font-weight: normal;
   	font-style: normal;
   }
   

3. html 标签内添加小图标。复制小方块

4. 给标签定义字体

   span {
   	font-family: "icomoon";
   }
   

字体图标的追加：把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可

3. CSS 用户界面样式

1. 鼠标样式 cursor
2. 轮廓线 outline：给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
3. 防止拖拽文本域：resize：textarea{ resize: none;}
   实际开发中，我们文本域右下角是不可以拖拽的。

4. vertical-align 属性应用

语法：

vertical-align : baseline | top | middle | bottom

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2.把图片转换为块级元素 display: block;

5. 溢出的文字省略号显示

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

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

多行文本溢出显示省略号

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

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

京东初始化代码

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

十三、移动端补充

• c3盒子模型box-sizing: border-box;垂直居中注意此时高度包含边框，因此应为line- height=height-border*2

• flex里面的子盒子可以写 % 相对于父级来说的

• css3三角制作（边框旋转+伪元素）

• input元素去掉边框：border：0；去掉聚焦后的蓝色边框：outline：none

• html条件注释https://www.cnblogs.com/lanselove/p/8545277.html

• ul清除样式：

  ul {

  ​ list-style-type: none;

  ​ margin: 0;

  ​ padding: 0;

  }