CSS实际应用中基础及方法总结

基础知识总结

01 块级元素和行内元素的区别

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度；行内元素只占据它对应标签的边框所包含的空间，在一行内显示，不可以设置宽高。
块级元素可以包含行内元素和其他块级元素；行内元素只能包含数据和其他行内元素。

CSS的display属性

【外部显示类型】定义元素在流布局中的参与：block or inline
【内部显示类型】定义其子元素的布局：flow or grid or flex

使用display属性来实现行级元素和块级元素的转换

 /* 块级元素 --> 行级元素 */
  display: inline;

  /* 行级元素 --> 块级元素 */
  display: block;

  /* 行级元素或块级元素 --> 行内块级元素 */
  display: inline-block;
  **********************************************************************************
    /* 特点：                                                                      
	   1. 可以设置 width 和 height （块级元素的特点）                                 
	   2. 在一行中从左向右排列 （行内元素的特点）                                     
	   3. 如果不设置 width 和 height，width 不是默认继承自父元素，而是被子元素撑开     
   */  
  **********************************************************************************                                                                             

02 CSS优先级与选择器

CSS复合选择器
后代选择器（包含选择器），用于选择父元素里面的子元素，中间用空格隔开，元素1和元素2可以是任意基础选择器

语法： 元素1 元素2 { 样式声明 }

子元素选择器（子选择器）只能选择父元素最近一级的子元素
语法： 元素1>元素2 { 样式声明 }

并集选择器 选择多组标签，同时为他们定义相同的样式，通常用于集体声明
语法： 元素1,元素2 { 样式声明 }
链接伪类选择器
为确保生效，需要按照LVHA顺序书写

a:link 未被访问的链接
a:visited 
a:hover
a:active 活动链接（鼠标按下未弹起的链接）

:focus伪类选择器 用于选取获得焦点的表单元素 （一般来说只有input类表单元素才能获取焦点）

input:focus {
	background-color:yellow;
}

CSS的元素显示模式

元素显示模式就是元素（标签）以什么样的方式进行显示，了解它们的特点有助于更好的布局网页。
HTML元素一般分为块元素和行内元素两种类型；
块级元素的特点：独占一行；可以控制宽高、内外边距；默认宽度是父级宽度的100%；是一个容器及盒子，里面可以放行内或块级元素。
注意：文字类的元素内不能使用块级元素（<p> <h1>~<h6>）

行内元素的特点：相邻行内元素在一行上，一行可以显示多个；直接设置宽高无效；默认宽度为其本身内容宽度；行内元素只能容纳文本或其他行内元素。
注意：链接里面不能再放链接；特殊情况链接<a>里面可以放块级元素，但是建议先将<a>转换为块级模式

行内块元素：在行内元素中有几个特殊的标签<img/> <input/> <td>他们同时具有块元素和行内元素的特点，通常被称为行内块元素。
行内块元素的特点：和相邻行内元素在一行上，但是元素之间会有空白缝隙，一行可以显示多个；默认宽度为其本身内容宽度；可以控制宽高、内外边距。

转化

单行文字垂直居中 inline-height = height
文字不加粗显示font-weight:400

CSS背景

background-color 默认值为 transparent
background-image 属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或大的背景图片，优点是非常便于控制位置。使用background-repeat属性规定背景平铺；使用background-position属性设置背景图片位置。

background-position: x y;
x 坐标和 y 坐标 可以是*方位名词*或者*精确单位*

*方位名词 top、center、bottom、left、right 
*精确单位 百分数、浮点数、像素等

注：如果只指定了一个方位名词，则第二个值默认居中对齐

使用background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll | fixed

设置背景颜色透明

background: rgba(0,0,0,0.3);
最后一个参数是 alpha 透明度，取值范围为 0~1

CSS的三大特性

层叠性、继承性、优先级
层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。其遵循就近原则，哪个样式离结构近，就执行哪个样式。
继承性：子标签会继承父标签的某些样式（text-、font-、line-、color等）；恰当使用继承可以简化代码，降低CSS样式的复杂性。
行高的继承性：

body {
	font:12px/1.5 Microsoft YaHei;
}
div {
 font-size :14px;
}

子元素继承了父元素 body 的行高 1.5 
这个 1.5 就是当前元素文字大小 font-size 的 1.5 倍

行高可以跟单位也可以不跟单位

优先级：当一个元素指定多个选择器，就会有优先级的产生。
权重由4组数字组成，但是不会有进位；类选择器永远大于元素选择器，id选择器永远大于类选择器。等级判断从左向右，如果某一位数值相同，则判断下一位数值。继承的权重是0。
权重叠加：如果使用的是复合选择器，则会有权重叠加，需要机算权重。

CSS盒模型

网页布局三大核心：盒子模型、浮动和定位。
所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
border 可以设置元素的边框，边框由三部分组成：宽度、样式和颜色。
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
如果盒子本身没有指定width/height属性，则padding不会撑开盒子大小。

使用外边距属性让块级盒子水平居中：

.header {
	width:960px; margin: 0 auto
}

1. 盒子必须指定宽度
2. 盒子左右的外边距都设置为auto

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

嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：

1. 为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加 overflow:hidden
4. 设置了浮动、固定、绝对定位的盒子不会有塌陷问题

清除内外边距：网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距。

* {
	padding:0;
	margin:0;
}

注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内元素就可以了。

ps的基本操作
ctrl+r 打开标尺，将单位改为像素
按住空格键，鼠标可以变成抓手，拖动ps视图
用选区拖动，可以测量大小

border-radius属性用于设置元素的外边框圆角

border-radius: length;
参数值可以为 数值 或 百分比 的形式

原理：（椭）圆与边框的交集形成圆角效果
如果是正方形，想要设置为一个圆，把数值改位高度或者宽的的一半或50%；
如果是矩形，设置为高度的一半可以实现圆角矩形的效果。

box-shadow属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;
* h-shadow  必需 水平阴影的位置 允许负值
* v-shadow 必需 垂直阴影的位置
* blur 可选 模糊距离
* spread 可选 阴影尺寸
* color 可选 阴影颜色
* inset 可选 将外部阴影（outset）改为内部阴影

注意：默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效；盒子影子不占用空间，不会影响其他盒子排列。

text-shadow属性将阴影作用于文本

text-shadow: h-shadow v-shadow blur color;

浮动

传统网页的本质——用CSS来摆放盒子。把盒子摆放到相应位置。
CSS提供了三种传统布局方式，分别是：普通流、浮动、定位。
标准流：标签按照规定好默认方式排列，标准流是最基本的布局方式。

浮动：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动特性

1. 浮动元素会脱离标准流：脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原先的位置。
2. 浮动的元素会一行内显示并且元素顶部对齐：如果多个盒子都设置了浮动，则它们会按照属性值一行内排列并且顶端对齐排列，浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3. 浮动的元素会具有行内块元素的特性：任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是设置浮动之后其大小根据内容来决定。
   注意
   浮动元素经常和标准流父级搭配使用：
   为了约束浮动元素的位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
   一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

为什么需要清除浮动？
父级盒子很多情况下不方便给高度，但是子盒子浮动不占有位置，最后父级盒子高度为0，影响下面的标准流盒子。
清除浮动的本质是清除浮动元素造成的影响。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

选择器 {clear: 属性值；}

* left 不允许左侧有浮动元素（清除左侧浮动的影响）
* right 不允许右侧有浮动元素（清除右侧浮动的影响）
* both 同时清除左右两侧浮动的影响

清除浮动的策略是：闭合浮动
清除浮动的方法：

1. 额外标签法，也称隔墙法
   额外标签法会在浮动元素末尾添加一个空的标签（块级），并设置clear属性。
2. 父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。
3. 父级添加 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;
}

03 常用属性介绍

text-overflow用于确定如何提示用户存在隐藏的溢出内容，显示为裁剪、省略号或自定义字符串。
特性：

1. 不会强制“溢出”发生，配合overflow和white-space使文本溢出容器
2. 只对在块级元素溢出的内容有效，且前提是与块级元素内联方向一致

font 复合属性写法：font:font-style(italic/normal 倾斜/不倾斜) font-weight font-size font-family
text-align: 只能设置div内文本水平方向对齐
text-decoration: none/ underline 展示/不展示下划线
text-indent: px; 2em 首行缩进两个字符
inline-height 上间距+文本高度+下间距 文本高度不变，改变的是上下间距

CSS属性书写顺序

建议遵循以下顺序

1. 布局定位属性
display
position
float
clear
visibility
overflow

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:liner-gradient

页面布局整体思路

1. 首先确定页面的版心（可视区）
2. 分析页面中的行模块，以及每个行模块中的列模块
3. 一行中的列模块经常用浮动布局来实现，先确定每个列的大小，之后确定列的位置
4. 制作HTML结构，原则：先有结构，后有样式

一个完整的网页，是标准流、浮动、定位一起完成布局的。
标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局；
浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局；
定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由地在某个盒子内移动就用定位布局。

CSS定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；定位泽可以让盒子自由地在某个盒子内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。
定位 = 定位模式 + 边偏移
定位模式（static relative absolute fixed）用于指定一个元素在文档中的定位方式，边偏移（top bottom left right）则决定了该元素的最终位置。

静态定位是元素的默认定位方式，无定位的意思
语法：选择器 { position: static; }
静态定位按照标准流特性摆放位置，它没有边偏移；在局部时很少用到。

相对定位是元素在移动位置时相对于它原来的位置的一种定位方式。
相对定位的特点：

1. 移动位置时的参照点是自己原来的位置
2. 不脱标，原来在标准流的位置继续占用，后面的盒子仍然以标准流的方式对待它。
3. 应用场景：作为绝对定位的父元素

绝对定位是元素在移动位置时相对于其祖先元素的一种定位方式。
绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。
3. 脱标，绝对定位不再占有原有位置

布局口诀“子绝父相”

最常用的定位模式：子级是绝对定位的话，父级要用相对定位。

1. 子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响到其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位
   所以实际开发过程中，相对定位经常用来作为绝对定位的父级。
   总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
   当然，如果父元素不需要占有位置，子绝父绝也会有使用场景。

固定定位是使元素固定于浏览器可视区的位置的定位方式，主要使用场景：在浏览器页面滚动时元素的位置不会改变。
固定定位的特点：

1. 以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动
2. 脱标，不再占有原有位置，可以看作一种特殊的绝对定位

绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left:50%; // 让盒子的左侧移动到父级元素的水平中心位置
margin-left: -width/2px; // 让盒子向左移动自身宽度的一半

固定定位小技巧：固定在版心右侧位置

.box{
position:fixed;
// 1. 走到浏览器宽度的一半
left:50%;
// 2.利用 margin 走版心盒子宽度的一半距离
margin-left:1/2 width
}

粘性定位 可以被认为是相对定位和固定定位的混合。跟页面滚动搭配使用。
语法：选择器 { position:sticky; top:10px; }
粘性定位的特点：

1. 以浏览器的可视窗口为参照物移动元素（固定定位特点）
2. 占有原先的位置（相对定位特点）
3. 必须添加top、left、right、bottom其中一个才有效

定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。
语法 选择器 { z-index: 1; }
注：

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
• 如果属性值相同，则按照书写书顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

定位的特殊特性：
绝对定位和固定定位也和浮动类似：行内元素添加绝对或者固定定位，可以直接设置高度和宽度；块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位（固定定位元素）都不会触发外边距合并的问题。

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

总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否（占有位置）	相对于自身位置移动	常用
absolute 绝对定位	是（不占有位置）带有定位的父级	常用
fixed 固定定位	是（ 不占有位置）	浏览器可视区	常用
sticky 粘性定位	否（占有位置）	浏览器可视区	当前阶段少

元素的显示与隐藏

1. display属性用于设置一个元素如何显示

display:none; // 隐藏元素
display:block; // 转换为块级元素/显示元素

注：display 隐藏元素后，不再占有原来的位置

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

visibility:visible; // 元素可视
visibility:hidden; // 元素隐藏

注：visibility隐藏元素后，继续占有原来的位置

3. overflow属性指定了如果内容溢出的显示状态

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

CSS用户界面优化

// 1. 取消表单轮廓
input, textarea {
	outline: none;
}
// 2. 防止拖拽文本域
textarea {
	resize: none;
}

vertical-align属性应用

图片、表单都属于行内块元素，默认的 vertical-align是基线对齐，此时可以给图片、表单这些行内块元素的 vertical-align属性设置为middle，就可以让文字和图片垂直居中对齐了。
解决图片底部默认空白缝隙问题：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：

1. 给图片添加vertical-align:middle|top|bottom等。
2. 把图片转换为块级元素display:block。

溢出文本省略号显示

1. 单行文本溢出

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

2. 多行文本溢出 （兼容性问题：适用于webKit浏览器或移动端）

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

margin负值运用

ul li {
	position: relative; （如果元素原本就有定位的情况）
	float:left;
	list-style: none; （去掉 li 前面的小圆点样式）
	width: 150px;
	height: 200px;
	border: 1px solid red; （给每个盒子加上 1 像素红色边框）
	
	// 应用场景： 让每个盒子 margin 向左移动 -1px 正好压住相邻盒子的边框
	margin-left: -1px;
}

ul li :hover {
   // 1. 如果盒子没有定位，则鼠标经过添加相对定位即可（元素占有位置）
   position: relative;
   border: 1px solid blue;
}

ul li :hover {
   // 2. 如果li有定位，则利用 z-index 提高层级
   z-index: 1;
   border: 1px solid blue;
}

常见布局技巧

### 文字围绕浮动元素的妙用

*  {
   margin: 0;
   padding: 0;
}
.box {
	width: 300px;
	height: 70px;
	background-color: pink;
	margin: 0 auto;
	padding: 5px;
}
.pic {
	float: left;
	width: 120px;
	height: 60px;
	margin-right: 5px;
}
.pic img {
   width: 100%;
}

---

03 样式修改原则

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。
更好地利用 CSS 级联属性
使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
内联样式和 !important 都被认为是非常不好的做法，但是有时你可以在 CSS 文件里用!important 去覆盖内联样式。有时候可以用!important 与优先级高的选择器一起使用，以重写覆盖这些内联样式。
!important 可以破坏整个优先级的计算获得最高优先级，除非是在对一些内联样式进行覆盖时，在其他使用场景下都要尽量使用优先级处理覆盖，!important 和内联样式都是不好的习惯
最佳的样式表使用经验是：对元素进行基本的样式设定，当遇到需要定制化样式的时候，增加 class 类型选择器来覆盖样式，id 选择器尽量不要使用
样式的作用总是从选择器中最后一个获取，最后一个选择器一定是最先被匹配，如 div.cls #id p, p 最先被取用然后会匹配到文档中的所有的 p，再去找它的父节点。因此在考虑 css 优化时，最好不要将标签属性写在最后
会触发重绘的样式属性不推荐使用！如 :last-child、:nth-last-child 这类

2. 使用flex行内布局

 .duty-content-row {
          display: flex;
          .duty-content-front {
            flex: 1;
            margin-right: 20px;
            text-align: center;
          }
          .duty-content-middle {
            flex: 1;
            margin-right: 20px;
            text-align: center;
          }
          .duty-content-back {
            flex: 3;
            display: flex;
            text-align: center;
          }
        }

2. 超出部分省略号展示并显示tooltip

  .el-form-item__label {
      font-size: 18px;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

<el-tooltip class="item" effect="dark" :content="$t('AnnualLeaveGroup.AnnualLeaveGroupName')" placement="top-start">
	<el-form-item :label="$t('AnnualLeaveGroup.AnnualLeaveGroupName')" >
    	<el-input :readonly="true" disabled class="normal-text input-box" v-model="annualLeave.groupName">
    	</el-input>
     </el-form-item>
</el-tooltip>