CSS入门详细笔记【2023.07】_css 浏览器判断table样式

一、基本介绍

1.1 定义

CSS层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。 

1.2 书写位置

css写在style标签中，style标签写在head标签里面，title标签下面

1.3 CSS 引入方式

• 内嵌式样式表： CSS 代码写在head标签中的 style 标签里面, 学习时使用
• 外联式样式表：CSS 代码写在单独的 CSS 文件中（.css），在 HTML 使用 link 标签引入，开发时使用

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

• 行内式样式：配合 JavaScript 使用 ,CSS 写在标签的 style 属性值里

<div style="color: red; font-size:20px;">这是 div 标签</div>

1.3 CSS 属性书写顺序：

• 盒子模型属性
• 文字样式
• 圆角、阴影等修饰属性

1.4 调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

使用：浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查

快捷键：F12

二、CSS常见属性

三、CSS选择器分类

3.1 标签选择器

结构: 标签名 { css属性名:属性值; }

作用: 通过标签名，找到页面中所有这类标签，设置样式

标签选择器选择的是一类标签，标签选择器无论嵌套关系有多深，都能找到对应的标签

3.2 .class类选择器

结构:  .类名 { css属性名:属性值; }

作用 ：通过类名，找到页面中所有带有这个类名的标签，设置样式；

注意事项：

•         类名由数字、字母、下划线、中划线组成，不能以数字或者中划线开头 ；
  •         类名见名知意，多个单词可以用 - 连接，例如：news-hd。
    •        一个标签中多个类名以空格隔开，一个类选择器可以供多个标签使用 ;
    • 使用步骤：

        定义类选择器 ： .类名 ;

        使用类选择器 ： 在标签内添加 class="类名"

 

3.3 #id选择器

（1）结构:  #id属性值 { css属性名:属性值; }  

作用 ：配合js使用；所有标签上都有id属性 ；id属性值类似于身份证号码，唯一且不可重复的；

注意事项：

        一个标签上只能有一个id属性值;

        一个id选择器只能选中一个标签

使用步骤：

        定义 id 选择器 ： #id名

        使用 id 选择器 ： 标签添加 id= "id名

 

3.4  *通配符选择器

结构:    * { css属性名:属性值; }

作用：找到页面中所有的标签，设置基础样式；

*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

 

3.5 复合选择器

（1） 后代选择器

结构：父选择器1 后代选择器2 { css属性}

作用: 选中某元素的所有后代元素。

 

（2） 子代选择器

结构：父选择器1 > 子选择器2 { css属性}

作用:选中某元素的子代元素（最近的子级）。

 （3） 并集选择器

结构：选择器1，选择器2 { css属性 }

作用:同时选择多组标签，设置相同的样式 

（4）交集选择器

结构：选择器1选择器2 { css属性 }

选择器写法：选择器之间连写，没有任何符号。

作用:选中页面中 满足多个条件的元素

   

（5）权重叠加计算

场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式:

比较规则:

3.6 伪类选择器

伪类选择器：伪类表示元素状态, 根据不同的状态显示不同的样式，一般多用于标签

超链接伪类四种状态：

1. :link 未访问的链接
2. :visited 已访问的链接
3. :hover 鼠标悬浮到连接上，即移动在连接上
4. :active 选定的链接，被激活

注：默认超链接为：蓝色、下划线

3.7 E:nth-child结构伪类选择器

作用：根据元素在HTML中的结构关系查找元素

优势:  减少对于HTML中类的依赖，有利于保持代码整洁

用途:  常用于查找某父级选择器中的子元素

通过n可以组成nth-child(公式)： 

3.8 ::before/::after伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

 

 

四、CSS三大特性

4.1 继承性

子元素有默认继承父元素文字控制属性样式的特点；文字控制属性都可以继承,不是文字控制属性的都不能继承

注意点

元素有浏览器默认样式，继承性依然存在，但优先显示浏览器默认样式

1. a标签的color会继承失效

2. h系列标签的font-size会继承失效

4.2 优先性

（1）单选择器-优先级排序

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！Important

（选中标签的范围越大，优先级越低）

（2） 复合选择器-叠加

叠加计算：如果是复合选择器，则需要权重叠加计算。  

规则：

1. 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
2. !important 权重最高
3. 继承权重最低

4.3 层叠性

（1）给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

（2）给同一个标签设置相同的样式 → 样式会层叠覆盖 → 最终写在最后的样式会生效

（3）注意点: 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

 

五、 选择器类型总结

选择器作用:选中页面中对应的标签，方便后续设置样式

六、文字控制属性

6.1字体样式

6.1.1  font-style字体倾斜样式

格式：font-style:属性值  (不倾斜-normal；   倾斜-italic)

例子：div { font-style: italic/ normal;}

6.1.2  font-weight字体粗细

格式：font-weight : 属性值  (不加粗-normal/400；   加粗-bold/700)

例子：div { font-weight: 700;}  ###关键字/纯数字:100~900的整百数:

6.1.3  font-size字体大小

格式：font-size :数字 + px  (谷歌浏览器默认文字大小是16px)

例子：p {  font-size: 30px;  }

6.1.4  font-family字体类型系列

格式：font-family:字体1,字体2,字体3,......,字体系列

渲染规则:从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

字体类型分类：

(1)具体字体

“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…

(2)字体系列

sans-serif、serif、monospace等…

A.无衬线字体(sans-serif):  文字笔画粗细均匀，并且首尾无装饰（黑体、Arial）-------------网页开发建议使用无衬线字体

B.衬线字体(serif):  文字笔画粗细不均，并且首尾有笔锋装饰（宋体、Times New Roman）

C.等宽字体(monospace):  每个字母或文字的宽度相等（Consolas、fira code）

注意点:如果字体名称中存在多个单词，推荐使用引号包裹;最后一项字体系列不需要引号包裹;网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

6.1.5  font复合属性-----连写格式：

复合属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。 常用于设置网页文字公共样式

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

font : style weight size/line-height family;

如果省略了前两个相当于设置了默认值 , 需要同时设置单独和连写形式：单独的样式写在连写的下面或者里面。

6.1.6 color字体颜色

 

6.2文本样式

6.2.1 text-indent文本缩进

text-indent : 数字+px/em  (1em = 当前标签的font-size的大小)

 

6.2.2 text-align 文本对齐

text-align: left(左对齐) / center(居中对齐) / right(右对齐)

text-align本质是控制内容的对齐方式,需要设置下列元素的父级：文本、span标签、a标签、input标签、img标签

 

6.2.3 text-decoration文本修饰线

text-decoration :underline(下划线) / line-through(删除线) /overline (上划线) /none(无装饰线)

 

开发中会使用 text-decoration : none 清除a标签默认的下划线

    <style>
 
        a { text-decoration: none; }
 
    </style>

6.2.4 line-height行高

line-height:数字+px /倍数(当前标签font-size的倍数)

作用: 控制一行的上下行间距

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

 

行高与font连写的注意点:

• 如果同时设置了行高和font连写，注意覆盖问题

• font : style weight size/line-height family ;

6.3 文字控制属性总结

七、背景属性

7.1  width+height背景宽高

width:数字+px；

height:数字+px；

7.2  background-color背景颜色

background-color：颜色取值（关键字、rgb表示法、rgba表示法、十六进制…）

7.3  background-image背景图

background-image(bgi): url(./images/2.jpg);

• 背景图片中url中可以省略引号

• 背景图片默认是在水平和垂直方向平铺的

• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

 

7.4 background-repeat平铺方式

background-repeat（bgr）:平铺方式；

 

7.5 background-position背景位置

background-position（bgp） ：水平方向位置 垂直方向位置 ； 

 

7.6 background-size背景图缩放

background-size（bgz） ：属性值

 

 

7.6 background-attachment背景图固定

background-attachment(bga)：fixed;

作用：背景不会随着元素的内容滚动。

 

7.7 background背景复合属性

background ：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序，可以按照需求省略）

  div {
 
            width: 400px;
 
            height: 400px;
 
            /* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */
 
            /* background: beige url(./images/2.jpg) no-repeat center bottom; */
 
            /* 背景图位置如果是英文单词可以颠倒顺序 */
 
            background: beige url(./images/2.jpg) no-repeat bottom center ;
 
            /* 测试背景图位置如果是数值 不要颠倒顺序 */
 
            /* 水平50px, 垂直100px */
 
            /* background: pink url(./images/2.jpg) no-repeat 50px 100px; */
 
            background: beige url(./images/2.jpg) no-repeat 100px 50px;
 
        }

7.8 img标签和background-image背景图片区别

需求:需要在网页中展示一张图片的效果

方法一:直接写上img标签即可，img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二:div标签 + 背景图片，需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

八、显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

8.1块级元素

        独占一行

        宽度默认是父级的100%

        添加宽高属性生效

 

8.2行内元素

•         一行可以显示多个
  •         设置宽高属性不生效
    •         宽高尺寸由内容撑开

 

8.3行内块元素

•         一行可以显示多个
•         设置宽高属性生效
•         宽高尺寸也可以由内容撑开

8.4 display转换显示模式

 

九、盒子模型

9.1  盒子概念

页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，称之为盒子

 

9.2  盒子组成

内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

Ps:利用 width 和 height 属性默认设置是盒子 内容区域 的大小 

 

9.3  border盒子边框

9.3.1 四个方向边框线

（1）复合写法

border(bd)：边框线粗细 线条样式 颜色（不区分顺序）

 border-方位名词：边框线粗细 线条样式 颜色（不区分顺序）

（2）不同样式单个写法

作用:设置边框粗细、边框样式、边框颜色效果

9.4  padding内边距

        padding / padding-方位名词 ：数值（1~4个）

        作用: 设置 边框 与 内容区域 之间的距离

        记忆规则:  从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面

9.5  盒子大小/样式

9.5.1 尺寸组成

注意点:

(1)设置width和height是内容的宽高

(2)设置border会撑大盒子

(3)设置padding会撑大盒子

盒子实际大小终极计算公式:

• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框

• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

9.5.2 块级元素不撑大特殊情况

不会撑大盒子的特殊情况:块级元素

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

9.5.3 border-sizing内减计算

手动做减法，减掉 border / padding 的尺寸

自动内减：box-sizing: border-box

9.5.4 border-radius圆角

border-radius ：数字+px / 百分比

作用：设置元素的外边框为圆角。  

 

（1）正圆半径：半径为正方形宽高的一半/50%

 

 （2）胶囊形状：半径为高的一半

 

9.5.4 box-shadow盒子阴影

box-shadow ：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影 

作用：给元素设置阴影效果

注意：

• X 轴偏移量 和 Y 轴偏移量 必须书写
• 默认是外阴影，内阴影需要添加 inset

9.6  margin外边距

9.6.1 margin属性值

作用:设置边框以外，盒子与盒子之间的距离

设置规则:从上开始赋值，然后顺时针赋值，如果未赋值的，与对面同

9.6.2 margin版心居中效果

 

9.6.3 外边距合并问题

场景：垂直排列的兄弟元素，上下 margin 会合并 

现象：取两个 margin 中的较大值生效

 

 9.6.4 overflow解决外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决方法： 

• 取消子级margin，父级设置padding
• 父级设置 overflow: hidden
• 父级设置 border-top

 

9.7 line-height ------  改变行内元素垂直位置

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置  

 

十、清除默认样式

10.1  margin/padding清除默认内外边距

假如浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置

 

常见默认边距：

•  body标签默认有margin:8px
•  p标签默认有上下的margin
• ul标签默认由上下的margin和padding-left • …

10.2  list-style 清除列表li项目符号

li{
 
list-style: none;  /* 清除列表li项目符号 */
 
}

10.3  text-decoration清除a标签默认的下划线

a{ 
    text-decoration : none; /*清除a标签默认的下划线*/
 
}

10.4 元素溢出 解决方法

作用：控制溢出元素的内容的显示方式。

属性名：overflow

十一、标准流和浮动

11.1 标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则

例如：块元素独占一行，行内元素可以一行显示多个。

11.2 float浮动(了解)

float:对齐方式（left/right）

早期作用:图文环绕

现在作用:网页布局，让垂直布局的盒子变成水平布局，如:一个在左，一个在右。

让块元素水平排列，特点：

• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标，不占用标准流的位置

(1)浮动元素会脱离标准流，在标准流中不占位置 ，相当于从地面飘到了空中

(2)浮动元素比标准流高半个级别，可以覆盖标准流中的元素

(3)浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

(4)浮动元素有特殊的显示效果

• 一行可以显示多个

• 可以设置宽高

11.3 清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

（1）额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

（2）ovefloat 法

父元素添加 CSS 属性 overflow: hidden

（3）单伪元素法

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

（4）双伪元素法------推荐

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

11.3 浮动总结

浮动属性 float，left 表示左浮动，right 表示右浮动

特点

1. 浮动后的盒子顶对齐
2. 浮动后的盒子具备行内块特点
3. 父级宽度不够，浮动的子级会换行
4. 浮动后的盒子脱标
5. 清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

拓展：浮动本质作用是实现图文混排效果

十二、position定位方式

12.1 position定位模式

通过position属性实现对元素的定位，有四种定位方式；

设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

12.2 relative相对定位

12.3 absolute绝对定位

十三、Flex布局

10.1 弹性布局介绍

传统的布局：基于盒模型，依赖于display属性 + position属性 + float属性 ，但是特殊布局就有些捉襟见肘了，垂直居中 不容易实现

Flex 布局：也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。 Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

在Flex布局中，父元素被称为容器，子元素被称为项目。通过给父元素添加display: flex属性来启用。并通过指定父元素的主轴方向和交叉轴方向的属性来控制子元素的布局，可以实现项目的等宽或等高布局，以及灵活的响应式布局。

flex布局是一种弹性盒模型，Flex布局主要有以下属性：

• flex-direction：决定了项目在主轴上的排列方向，可以是水平方向（row）， 垂直方向（column）或反向方向（row-reverse或column-reverse）。
• flex-wrap：决定了项目在一行排列不下时是否换行，可以是单行（nowrap）， 多行（wrap）或反向方向（wrap-reverse）。
• justify-content：决定了项目在主轴上的对齐方式，可以是居中对齐 （center），两边对齐（flex-start和flex-end）或平均分布（space-between 和space-around）。
• align-items：决定了项目在交叉轴上的对齐方式，可以是居中对齐（center）， 顶部对齐（flex-start和flex-end）或平均分布（baseline和stretch）。
• align-content：决定了多行项目在交叉轴上的对齐方式，只在多行容器中 生效。
• 使用Flex布局可以实现页面的灵活布局和响应式设计，同时还能简化布局 代码，并提供更好的可维护性和可扩展性。它已经成为现代Web开发中广泛使用 的 布局方式。

10.2 Flex-组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向 

10.3 容器属性

在弹性盒子中常常将justify-content和align-items两个属性定义为center来使元素居中

10.3.1 justify -content属性----项目在主轴上的对齐方式

10.3.2 align-item属性----项目在交叉轴的对齐方式 

10.3.3 justify -content和align-item区别

  

10.3.4 flex-direction-----修改主轴方向 

10.3.4 flex-wrap-----弹性盒子换行

flex-wrap：wrap（wrap换行，nowrap默认不换行）

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。 

10.3.5 flex-----弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数

10.3.6 align-content-----行对齐方式 

实现居中效果

1 使用flex布局
利用flex的 alignItems: center 垂直居中，justifycontent:center 水平居中
2 利用相对定位和绝对定位的 margin:auto相对定位下，使用绝对定位将上下左右都设置为0，再设置 margin:auto 即可实现居中
3 利用相对定位和绝对定位，再加上外边距和平移的配合相对定位下，使用绝对定位，利用 margin 偏移外容器的50%，再利用 translate 平移回补自身宽高的50%即可
4 利用textAlign和 verticalAlign利用textAlign:center 实现行内元素的水平居中，再利用 verticalAlign:middle 实现行内元素的垂直居中，前提是要先加上伪元素并给设置高度为100%，用过 elementuI 的可以去看看其消息弹窗居中实现方式就是如此

上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left偏移、margin偏移、Daddino填充，在此就不分析了。还有就是单纯文字的居中利用 lineHeight 和 textAlign 即可实现。

水平居中的方法有：

如果是行内元素，如文本、图片、链接等，可以在父元素上设置text-align: center;属性。

如果是块级元素，如div、p、h1等，可以在元素上设置margin: 0 auto;属性，前提是要有固定的宽度。

如果是绝对定位的元素，如position为absolute或fixed的元素，可以在元素上设置left: 0; right: 0; margin: 0 auto;属性，或者设置left: 50%; transform: translateX(-50%);属性。

垂直居中的方法有：

如果是单行文本，可以在父元素上设置line-height等于父元素的高度。

如果是多行文本或其他内容，可以在父元素上设置display: flex; align-items: center;属性，利用弹性盒子的特性。

如果是绝对定位的元素，可以在元素上设置top: 0; bottom: 0; margin: 0 auto;属性，或者设置top: 50%; transform: translateY(-50%);属性。

水平垂直居中的方法有：

如果是绝对定位的元素，可以结合水平和垂直居中的方法，在元素上设置left: 0; right: 0; top: 0; bottom: 0; margin: auto;属性，或者设置left: 50%; top: 50%; transform: translate(-50%, -50%);属性。

如果是普通的元素，可以在父元素上设置display: flex; justify-content: center; align-items: center;属性，利用弹性盒子的特性。

常见布局模型

静态布局

静态布局是最为原始的布局方式，没有什么技术性可言，往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位
布局特点: 页面上的布局是按最初写代码时候的布局方式进行布局的，常规的pc网站是进行设置了宽度值进行布局的，不会随着pc端的屏幕的大小而变化。优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的，最让人容易以接受、学习的，没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上，这些官网的设备的尺寸是固定的，这种布局方式往往是最简单的方法。缺点: 不会随着pc端的屏幕大小而变化。

弹性布局 (flexbox)

弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是，使用em或rem单位(lem=16px，1rem=10px) 进行相对布局，相对使用百分比更加方便、灵活，相应同时支持浏览器的字体大小调整和缩放的等正常显示。
优点:
1.适应性强，在做多种不同的屏幕分辨率不同的界面是非常使用。
2.随意按照亮度、比例划分元素的宽高。
3.可以轻松的改变元素的显示顺序。
4.网页布局实现快捷，维护起来更加容易。
如果做移动端时，如果客户对细微的之处的要求不高，使用弹性布局进行制作是最好的选择，一份css+一份is调节font-size搞定
缺点: 浏览器兼容性较差，只能兼容到IE9及以上.
三、自适应布局 (bootstrap)
自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。使用@media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。优点:
1.对网站的复杂程度兼容性更大:
2.对开发工程师来说制作的成本代价更低
3.代码执行效果更高效:
4.测试时更加容易，运营相对更加精准
缺点:在现如今的移动端设计百花齐放的时期之下，同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁