CSS

为学习Angular做铺垫，我们重新学习一下CSS的相关内容

在HTML中，我们使用link标签引入外部css样式文件

<link rel="stylesheet" href="./xxx.css">

样式优先级

行内样式 > 内部样式 = 外部样式

当内部样式和外部样式优先级相同，如果同时存在则和编写顺序有关，采用原则为后覆盖前

基本选择器

/* 统配选择器 */
*{
    
}

/* 元素选择器 */
[元素名]{
    
}


/* 类选择器 */
.[class属性名]{
    
}

/* id选择器 */
#[id属性名]{
    
}

一个元素可以有多个类选择器

<!-- 同时应用类选择器class1、class2、class3 -->
<p class="class1 class2 class3"></p>

复合选择器

交集选择器

一般用于元素和类名配合来定位标签

/* 元素选择器&类选择器（元素选择器写在前面）*/
p.class1{
    
}

/* 类选择器&类选择器*/
.class1.class2{
    
}

并集选择器

同时选中多个选择器来应用样式，也叫分组选择器

/* 类选择器 | 类选择器 | id选择器 */
class1,
class2,
#id1{
    
}

后代选择器

选择一个选择器的所有后代选择器

/* 选中ol的所有后代li（不论层级） */
ol li{
    
}

子代选择器

选择一个选择器的下一层及选择器

/* 选中ol的下一层及的li */
ol > li{
    
}

兄弟选择器

选择一个选择器的紧紧相邻的选择器，但无论是相邻的还是紧紧相邻的，都是往下选择器

/* 选中与div元素紧紧相邻的p元素 */
div+p{
    
}

/* 选中与div元素所有相邻的p元素 */
div~p{
    
}

属性选择器

/* 选中属性为title */
[title]{
    
}

/* 选中属性为title且属性值为title1 */
[title="title1"]{
    
}

/* 选中属性为title且属性值为t开头 */
[title^="t"]{
    
}

/* 选中属性为title且属性值以t结尾 */
[title$="t"]{
    
}

/* 选中属性为title且属性值包含t */
[title*="t"]{
    
}

伪类选择器

lvha是通常的伪类选择器的编写顺序

其中hover和active为所有元素都可以具备的

focus是选择获取焦点的元素，为表单类元素才能使用的伪类

/* 选中的是没有访问过的a元素 */
a:link{
    
}

/* 选中的是访问过的a元素 */
a:visited{
    
}

/* 选中的鼠标悬浮状态的a元素 */
a:hover{
    
}

/* 选中的是激活状态的a元素 */
a:active{
    
}

/* 选中的是处于焦点状态的input元素 */
input:focus{
    
}

结构伪类

/* 选中的是div的第一个子元素p */
div>p:first-child{
    
}

/* 选中的是div的后代元素p，且不论层级，且不论父级是谁，但p必须为其父级的第一个元素 */
div p:first-child{
    
}

/* 选中的是元素p，且不论层级，且不论父级是谁，但p必须为其父级的第一个元素 */
p:first-child{
    
}

/* 选中的是div的最后一个子元素p */
div>p:last-child{
    
}

/* 选中的是div的第N个子元素p */
div>p:nth-child(n){
    
}

/* 选中的是div的偶数子元素p */
/* 这里可以使用even替代2n */
div>p:nth-child(2n){
    
}

/* 选中的是div的奇数子元素p */
/* 这里可以使用odd替代2n+1 */
div>p:nth-child(2n+1){
    
}

注意，这里的结构伪类与选择器为同级优先级的选择器筛选范围，也就是说这里的元素要同时满足div的后代p和div的第一个子元素

但可以使用first-of-type伪类，这样就可以选中第一个为此类型的元素了

那以此类推，还会存在last-of-type伪类和nth-of-type伪类

<!-- 在这里没有元素被选中 -->
<style>
    div>p:first-child{

    }
</style>
<div>
    <span></span>
    <p></p>
    <p></p>
    <p></p>
</div>

<!-- 在这里div中的第一个p标签会被选中 -->
<style>
    div>p:first-of-type{

    }
</style>
<div>
    <span></span>
    <p></p>
    <p></p>
    <p></p>
</div>

nth-last-child：倒叙选择子元素

nth-last-of-type：倒叙选择子类型元素

only-chile：选择唯一子元素（兄弟元素中没有同元素）

only-of-type：选择唯一类型的子元素（兄弟元素中没有同类型元素）

root：选择根元素（选中html元素）

empty：选择元素内容为空的元素

否定伪类

not()：选择排除选择器以外的所有元素

UI伪类

checked：应用与单选按钮和复选框的动态的样式调整

disabled：应用与被禁用的表单控件的样式调整

enabled：应用与可用的表单控件的样式调整

目标伪类

target：选中锚点指向的元素

语言伪类

lang()：选中语言属性为指定类型的元素

伪元素选择器

选中一个元素的特殊位置

/* 选中div元素中的第一个字母 */
div::first-letter{
    
}

/* 选中div元素中的首行 */
div::first-line{
    
}

/* 选中div元素中的被选中的内容 */
div::selection{
    
}

/* 选中input元素中的placeholder属性（更改此属性值的样式） */
input::placeholder{
   
}

/* 在p元素的内容最前面加上￥ */
p::before{
    content:"￥";
}

/* 在p元素的内容末尾加上.00 */
p::after{
    content:".00";
}

选择器的优先级

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

对于复杂选择器，有固定计算权重的公式，相同权重的仍然采用后覆盖前的规则

通过!important样式属性值的后缀，可以强制应用这个样式

样式属性的继承

color和font-size是常用的继承样式

继承的样式的样式优先级是最低的，甚至比通配选择器的优先级还低

颜色

在css中，颜色有三种配置方式

RGB 和 RGBA
HEX 和 HEXA
HSL 和 HSLA

常用的css属性

字体相关

属性名	功能
font-size	字体大小（对于谷歌浏览器而言，默认最小的文字大小是12px，但默认的字号为16px）
font-family	设置字体
font-style	字体风格（normal，italic，oblique）
font-weight	字体粗细（lighter，normal，bold，bolder）
font	字体的混合属性（各个属性以空格隔开）

文本属性

属性名	功能
color	文本颜色
letter-spacing	字间距，单位为px
word-spacing	词间距，单位为px
text-decoration	文本修饰（overline，underline，line-through，none）
text-indent	文本缩进（em，px）
text-align	文本对齐（left，right，center）
line-height	行高（行高和字体大小不应相同，此属性默认值为normal，由浏览器决定合适的行高，尽量选择倍率的行高）
vertical-align	垂直对齐（此属性作用于元素本身相对于父元素，并且不能控制块级元素，其他文本属性作用于元素内文本本身）

列表相关属性

属性名	功能
list-style-type	调整列表项目符号（none）
list-style-position	列表符号的位置（inside，outside）
list-style-image	替换项目符号为图片（url("")）
list-style	复合属性，以空格分隔

表格相关属性

在表格中，table元素使用为外边框，th，td元素使用的为单元格边框

属性名	功能
border-width	表格边框宽度
border-color	表格边框颜色
border-style	表格边框样式（solid，dashed，dotted，double）
border	复合属性，以空格分隔

在表格中，实现跨行和跨列的方式只有html，css中无法实现单元格跨行、跨列

属性名	功能
table-layout	控制表格列宽（auto，fixed）
border-spacing	控制单元格间距
border-collapse	合并相邻单元格的边框（separate，collapse）（当此属性为collapse，border-spacing属性、empty-cells属性失效）
empty-cells	隐藏没有内容的单元格（show，hide）
caption-side	设置表格标题的位置（top，bottom）

背景相关属性

属性名	功能
backgroud-color	调整背景颜色
backgroud-image	调整背景图片
backgroud-repeat	调整背景图片是否重复（norepeat，repeat-y，repeat-x）
backgroud-position	调整背景图片位置
backgroud	复合属性，以空格隔开

鼠标相关属性

属性名	功能
cursor	设置鼠标光标的样式
cursor	url("")，可以直接自定义鼠标样式

盒子模型

CSS中的长度单位

单位标识符	单位
px	像素
em	相当于当前元素的font-size的倍数（如果当前元素没有此属性，向父级寻找，如果都没有，则采用默认值16）
rem	相对于根元素的font-size的倍数
%	相对于其父元素的百分比

元素的显示模式

块元素（block）

div是比较典型的块元素

在页面中独占一行
默认宽度：撑满父元素
默认高度：由内容撑开
可以通过css设置宽高

行内元素（inline）

span是比较典型的行内元素

在页面中不独占一行，从左到右排列
默认宽度：由内容撑开
默认高度：由内容撑开
无法通过css设置宽高

行内块元素（inline-block）

src图片是比较典型的行内块元素

在页面中不独占一行，从左到右排列
默认宽度：由内容撑开
默认高度：由内容撑开
可以通过css设置宽高

display属性可以手动的指定一个元素的显示模式：block（块元素），inline-block（行内块元素），inline（行内元素），none（不显示该元素）

盒子模型的组成部分

无论是什么元素，我们都将其看作一个盒子，盒子由四个部分组成

margin（外边距）
padding（内边距）
border（边框）
content（内容）

盒子的大小 = padding + border + content

margin不影响盒子的大小，只影响盒子的位置

盒子的内容区

在非行内元素中，我们可以通过width和height来调整盒子的宽高

min-width属性可以设置盒子的最小宽度，当页面小于这个宽度时，盒子不再缩小

max-width属性可以设置盒子的最大宽度，当页面大于最大宽度时，盒子不再放大

min-width属性可以设置盒子的最小高度，当内容撑开的盒子小于这个高度时，也仍然维持这个高度

max-width属性可以设置盒子的最大高度，当内容撑开的盒子大于这个高度时，也仍然维持这个高度

盒子的内边距

行内元素的上下内边距会产生重叠

盒子的外边距

子元素的位置是位于父元素的content内容区开始计算的

上、左的margin会影响自己的位置，下、右的margin会影响兄弟元素的位置

行内元素的上下外边距无效

margin的值可以是AUTO，给一个块级元素左右margin设置为auto，则设置在父元素中水平居中

margin的值可以为负数

存在的问题和小技巧

margin的塌陷问题

Margin 塌陷（也称为 margin collapse）是 CSS 中的一个特性，它发生在相邻的垂直外边距相遇时合并为一个单一的外边距

为父元素添加边框或内边距：这是最简单的方法之一，通过给父元素添加边框或者内边距，可以阻止其与子元素的外边距发生塌陷。
使用 overflow: hidden; 或者其他的非 visible 值：设置父元素的 overflow 属性为 hidden 或者其他的非 visible 值（如 auto），可以创建一个新的块格式化上下文 (BFC)，从而防止 margin 塌陷。
浮动父元素：使父元素浮动也可以避免 margin 塌陷，不过这可能会引起布局上的其他问题，需要谨慎使用。
绝对定位：对子元素使用绝对定位可以使其脱离文档流，因此不会与父元素或其他兄弟元素发生 margin 塌陷。
改变 display 属性：有时改变元素的 display 属性（例如从 block 改为 inline-block 或者 flex）也能解决 margin 塌陷的问题。

margin的合并问题

上面元素设置margin-bottom 下面兄弟元素设置margin-top，则会发生margin的合并问题，需要注意的是，这种问题只发生在上下兄弟之间，左右之间不会发生

无需解决，在布局时上下元素只设置一个元素即可

内容溢出问题

在父级容器中使用overflow: hidden，可以设置超出容器的部分隐藏内容

overflow: scroll，显示滚动条，可拖拽

overflow: auto，超出容器的部分显示为滚动条，可拖拽

overflow: x和overflow: y可以单独设置横向和纵向的内容超出部分设置

隐藏元素的两种方式

将display设置为none，即可隐藏该元素

将visibility设置为hidden，即可隐藏该元素，但仍然保持位置存在（占位）

继承与元素的默认样式

能够被继承的属性，都是和盒子模型没有关系的属性，不影响布局的属性，例如，字体样式，文本样式，文本颜色等

继承的属性优先级特别低，比浏览器用户代理（默认样式）的还要低

元素一般都有些默认的样式，如果想重置某一个元素的默认样式，可以使用元素选择器选中后，清除该元素的样式即可

布局技巧

让子元素相对于父元素水平居中
- 若子元素为块元素，子元素加margin: 0,auto;
- 若子元素为行内元素或行内块元素，给父元素加text-align:center;
让子元素相对于父元素垂直居中
- 若子元素为块元素，子元素加margin-top，值为父元素cotent-子元素盒子总高/2
- 若子元素为行内元素或行内块元素，让父元素的height=line-height，并给每个子元素都加上vertical-align:middle，若想绝对垂直居中，父元素字体大小为0

总结：行内元素和行内块元素都看作为文本处理，text-align、line-height、text-indent这些属性都能应用

元素之间的空白问题

为父元素的font-size字体大小赋值为0，然后将单独为特定元素配置字体大小，就可以解决换行问题带来的元素之间默认存在空格的问题

元素之间的幽灵空白问题

因为基线对齐的原则，元素之间会存在幽灵空白的问题，有以下三个解决方法

设置一个垂直文本对齐方式即可
如果仅存在一个图片的话，可以将图片变成块元素，也可以解决幽灵空白的问题
为父元素设置font-size=0即可

浮动

通过为元素配置属性float，即可实现文字环绕该元素的效果

在浮动设计初期，是为了实现文字环绕元素的效果，但前端发展至今，我们使用浮动来布局

浮动产生的效果

一个元素浮动之后，他就脱离了文档流
一个元素浮动之后，他的默认大小通常由内容撑开
一个元素浮动之后，可以和其他元素共用一行
一个元素浮动之后，不会margin合并，也不会margin塌陷，可以完美的设置四个方向的margin和padding
一个元素浮动之后，不会像行内块一样被当作文本处理

浮动产生的影响

当一个元素浮动后，其父元素的高度塌陷（不被内容撑开），后面的兄弟的位置也会有影响，但父元素的宽度依然能束缚浮动的子元素

解决浮动产生的影响

给父元素加高度
给父元素设置浮动
给父元素设置overflow:hidden
在所有元素后添加一个块元素，并配置属性clear: both;

clear: both; 清除该元素因前面的兄弟元素浮动而产生的影响，前提是该元素不为浮动元素，且不能为行内元素或行内块元素

::after{
    content: "";
    display: block;
    clear: both;
}

这些方法也不是万能的，他无法解决浮动元素和非浮动元素混杂在同一个父元素下的情况，所以在设计页面时要保证一起浮动，或者一起不浮动

#Angular

CSS-定位上一篇

HTML 下一篇