前端学习之路第二节 ---- css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_60291486/article/details/131305193

首先搞清楚CSS是神马？建议搜索菜鸟教程观看一下

下面作者列举下css 需要掌握的知识点建议读者直接先背诵或者熟读于心：

1.属性：Properties

定位：（Positioning）布局（Layout）尺寸（Dimension）外补白（Margin）内补白（padding）边框（Border）背景（Background）颜色（color）字体（Font）文本（Text）文本装饰（Text Decoration）书写模式（Writing Modes）列表（List）表格（Table）内容（Content）用户界面（User Interface）多列（Multi-column）伸缩盒（Flexible Box）变换（Transform）过度（Transition）动画（Animation）打印（Printing）媒体查询（Media Queries）

2.选择符：Selectors

3.语法与规则：Rules

4.取值与单位：Values and Units

5.附录：Appendix

6.Css Hack

7.问题和经验

1.属性：Properties

2.选择符：Selectors

3.语法与规则：Rules

4.取值与单位：Values and Units

浮动相关属性【重点】
标准盒子模型【重点】
margin属性【重点】
padding属性【重点】
border属性【重点】

一：浮动属性

在网页布局中经常会看到很多标签默认是从上到下显示的，需要改变默认的排列方式可以使用浮动属性

属性：float
属性值：left/right/none

float：left 元素从左到右排列
float：right 元素从右到左排列
float：none 元素不浮动

浮动的特点

就是让竖着的东西横着来
定义网页中其它文本如何环绕该元素显示

二：标准盒模型概念

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是标准盒模型

三：margin属性

在网页布局中经常有很多盒子需要设置之间的间距可以使用margin设置外边距

属性：margin
作用：主要是用来设置同级元素之间的位置关系
外边距使用的特点

属性值要设置为数值加单位
属性值的设置方法

- 一个值：上下左右
- 两个值：上下左右
- 三个值：上左右下
- 四个值：上右下左

属性值还可以设置某一个方向

- margin-top 顶部间距
- margin-right 右侧间距
- margin-bottom 底部间距
- margin-left 左侧间距

常见的固定搭配

*{ margin：0；padding：0 } 清除浏览器的默认间距
版心的选择器{ margin：0 auto } 设置版心居中

外边距margin的常见bug

两个盒子上下排列,分别设置margin-top/bottom的时候，会错误的取之间的最大值
如果父级元素下面只有一个子级元素的时候，给子级元素设置margin-top会错误的解析到父级元素

四：padding属性

在网页布局中经常需要设置盒子和盒子里面的内容的间距可以使用padding设置内边距

属性：padding
作用：主要是用来设置父级和子级元素之间的位置关系
内边距使用的特点

属性值要设置为数值加单位
padding添加的位置

- 可以添加在父级元素上(控制所有的子级元素都会移动位置)

- - padding会撑大当前父级元素的宽高大小，为了不影响后面的布局需要在初始宽高上减去相应的padding值

- 可以添加在子级元素上(控制单个子级元素的位置)

- - padding会撑大当前子级元素的宽高大小

属性值的设置方法

- 一个值：上下左右
- 两个值：上下左右
- 三个值：上左右下
- 四个值：上右下左

属性值还可以设置某一个方向

- padding-top 顶部间距
- padding-right 右侧间距
- padding-bottom 底部间距
- padding-left 左侧间距

思考：内外边距在实际应用场景中可不可以互换使用？

五：边框属性

边框属性

border-width 边框的宽度（数值+单位）
border-style 边框的样式（solid 实线、dashed 虚线、dotted 点线、 double 双实线）
border-color 边框的颜色（颜色的css写法相同）

简写方式

属性：border
属性值：border-width border-style borde-color

思考：哪些标签自带边框？

六：怪异盒模型概念

盒模型的作用：设置元素与元素之间的位置关系
盒模型的组成：content、padding、margin、border
盒模型的分类

标准的盒模型
怪异盒模型( IE盒模型：当文档丢失了文档声明的时候会触发这样计算方式 )

盒模型的属性

属性：box-sizing
属性值

- 标准盒模型 content-box
- 怪异盒模型 border-box

注意：标准盒模型和怪异盒模型的区别

怪异盒模型任何内边距和边框都将在已设定的宽度和高度内进行绘制
在这种解析模式下添加padding或者border不会再把盒子撑大

文本相关属性【重点】
背景相关属性【重点】
列表相关属性【重点】

一：文本属性

font-size 文本大小

网页中常用的单位是px
浏览器中默认大小是16px，浏览器中默认设置最小的字体大小是12px
除了px还有常见的pt、em等（12pt=16px 1em=16px）

font-family 文本类型

当属性值是中文汉字时候需要加引号（引号也可省略）
当属性值是英文单词时候必须加引号
多个字体中间用逗号隔开，表示从用户的电脑字体库中进行选择字体，默认先解析第1个字体，如果没有就解析第2个字体，以此类推

font-weight 文本加粗

100~900 整百数（100~500表示正常字体、600~900表示加粗字体）
bold 加粗的
bolder 更粗的
normal 常规、清除加粗标签的默认样式

font-style 文本倾斜

italic 斜体的
oblique 更倾斜的
normal 常规、清除倾斜标签的默认样式

思考：之前学习了加粗倾斜标签，为什么还需要学习相关的css属性？

line-height 文本行高（单行）

当行高等于容器的高度时候，文本在垂直方向居中显示
当行高大于容器的高度时候，文本在垂直方向往下移动
当行高小于容器的高度时候，文本在垂直方向往上显示

text-align 文本居中

left 文本向左对齐（默认值）
right 文本向右对齐
center 文本水平方向居中显示
justify 两端对齐（多行文本才有效果）

font 文本属性的简写方式
color 字体颜色

英文单词 green、red、blue
十六进制 #000000、#999
rgb/rgba（red、green、blue）

text-decoration 文本修饰

underline 下划线
overline 上划线
line-through 删除线
none 没有、清除下划线

思考：哪些标签自带下划线？

text-indent 首行缩进

只针对于第一行文本起作用
可以设置px、em单位
可以设置负值
注意：只能在块级元素中使用（能设置宽高大小）

letter-spacing 文字间距

二：列表属性

list-style：none 可以清除有序和无序的默认样式

思考：标签自带默认样式，为什么需要清除掉？

三：背景属性

background-color 背景颜色

颜色的设置方式和文本颜色一样
可以简写为background

background-image 背景图片

属性值：url（图片地址）
如果背景图片小于容器大小，图片默认会进行平铺
如果背景图片等于容器大小，图片默认会占满容器
如果背景图片大于容器大小，图片默认会显示部分

思考：背景图片和img图片使用的区别？

background-repeat 背景图片平铺

repeat 平铺（默认值）
no-repeat 不平铺
repeat-x 沿着X轴平铺
repeat-y 沿着Y轴平铺

background-position 背景图片定位

属性值：水平方向垂直方向
可以设置固定的坐标值
可以使用方向值（top、right、bottom、left、center）
当水平方向和垂直方向值相同的时候简写成一个

background-attachment 背景图片固定

scroll 滚动（默认值）
fixed 固定（固定在浏览器窗口）

background 背景属性的简写方式
background-size 背景尺寸

四：CSS属性的继承

CSS的继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性

具有继承性的相关属性：font-family、font-size、font-style、 font-weight、font、text-align、list-style等

五：背景定位技术（图片整合）

原理：把网站里面的小图标有规则的整合在一起，利用background-position 改变背景图的位置
优点

CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点
CSS Sprites能减少图片的字节
CSS Sprites解决了图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格

缺点

图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景
图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂
图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置
可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片

overflow属性【重点】
单行文本设置省略号

一：文本溢出属性

overflow：当文本超出容器时候显示方式

visible：默认值，内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容

案例：实现移动端页面横向滚动导航

二：省略号的设置方法

当单行文本超出时候需要设置省略号，需要以下四个条件

容器宽度 width：value
文本强制性在一行内显示 white-space：nowrap
溢出内容为隐藏 overflow：hidden
溢出文本显示省略号 text-overflow：ellipsis（默认值为clip）

元素类型的分类【重点】
元素类型的转换【重点】
垂直居中对齐设置

一：元素类型的分类

在网页布局中你会发现有些标签可以直接设置宽高大小（div），但是有些标签就不可以直接设置宽高大小（a），这是因为每个标签都是有自己的类型，在css语言中根据显示分类可以分为以下几种：块级元素、行内元素、可变元素

由于可变元素需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。可变元素为根据上下文语境决定该元素为块元素或者内联元素，所以现在的css元素类型可以考虑为

块级元素：也可以称为块元素
行内元素：也可以称为内联元素
行内块元素：可以理解为是从行内元素中分出来的一种元素类型

块元素的特点

块状元素都可以定义自己的宽度和高度
块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列
块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子

行内元素的特点

行内元素不可以直接设置宽度和高度
行内元素的宽高只能根据所包含内容的高度和宽度来确定
行内元素表现形式是始终以行内逐个进行显示
行内元素也会遵循盒模型基本规则，只是margin-top/bottom会失效

行内块元素的特点

行内块元素具备块级元素的可以直接设置宽高
行内块元素具备行内元素的可以在一行内显示
常见的行内块元素：img 、input 、td、textarea、select
行内块元素特殊情况：所有的行内块元素都是以基线对齐的（使用vertical-align处理）

思考：常见的置换元素与非置换元素有哪些？

有自己初始的宽高大小
可以跟随标签内的属性和属性值的改变而有不同的显示样式

二：元素类型的转换

网页布局中使用超链接标签可以实现导航点击跳转，但是需要给超链接标签设置宽高大小是没有效果的，所以需要考虑给其转换元素类型

元素类型的属性值有很多，只需要学习一些比较常见的属性值即可

display属性：表示控制元素的显示方式

display：block 把元素转换成块
display：inline 把元素转换成行内
display：inline-block 把元素转换成块内块
display：list-item 把元素转换成列表（了解）
display：none 隐藏、删除

三：动态伪类选择器的使用

a:link {color: red;}            /* 未访问的链接状态*/
a:visited {color: green;}	      /* 已访问的链接状态*/
a:hover {color: blue;}          /* 鼠标滑过链接状态*/
a:active {color: yellow;}       /* 鼠标按下去时的状态*/
/* 说明：以上四个选择器同时使用的时候顺序不可乱 */

案例1：中英文切换导航的实现

案例2：图片导航实现

案例3：电商页面商品的背景展示效果

四：垂直对齐属性

vertical-align属性：控制行内块元素在垂直方向的对齐方式

baseline 基线对齐（默认值）
top 顶部对齐
bottom 底部对齐
middle 居中对齐

案例1：京东页面的多商品展示页面布局

案例2：图片的默认bug

定位属性【重点】
锚点链接
透明属性

一：定位属性的使用

position属性：设置元素的位置

static 静态定位（默认值）
relative 相对定位
absolute 绝对定位

注意：相对定位和绝对定位是使用最多的，要理解之间的区别并应用（案例）

fixed 固定定位
sticky 粘性定位

z-index属性：层叠属性，规定元素的显示层级关系

auto 默认值
number 设置元素的堆叠顺序

包含块概念

如果 position 属性为absolute ，包含块就是由它的最近的定位父级元素
如果 position 属性是fixed，包含块是 viewport（视口）浏览器当前窗口

案例1：图片放大案例的实现

案例2：二级导航案例的实现

二：定位属性实现元素居中

<style>
    div{
        width: 300px;
        height: 300px;
        background: pink;
        position: fixed;
        left:50%;
        top:50%;
        margin-left:-150px;
        margin-top:-150px;
    }
</style>

<style>
    div{
        width: 300px;
        height: 300px;
        background: pink;
        position: fixed;
      	top: 0;right: 0;bottom: 0;left: 0;
      	margin: auto 
    }
</style>

三：锚点链接

概念：命名锚点链接是网页制作中超级链接的一种，又叫命名锚记
作用

1. 在同一页面内的不同位置进行跳转
2. 不同页面内也可以设置跳转（了解）

使用方法

1. 同一页面（点击a标签跳转到同一页面的指定位置）

- - <a href="#命名锚记名称"></a>
  - <div id="命名锚记名称"> </div>

1. 不同页面（点击a标签跳转到另外一个页面的指定位置）

- - <a href="页面地址#命名锚记名称"></a>
  - <div id="命名锚记名称"> </div>

案例1：电商页面的楼层效果实现

案例2：锚点链接实现轮播图效果

四：透明属性写法

标准浏览器：opacity：value 取值0~1之间
IE低版本浏览器：filter：alpha（opacity=value）取值0~100之间

案例：实现企业官网的人物介绍效果

表格的应用
表单的应用
BFC概念及应用【重点】

一：表格的应用

1、表格的创建
标签名称	table、tr、td
表格相关属性	width/height/border 宽度/高度/边框 bordercolor/bgcolor 边框颜色/背景颜色 cellspacing/cellpadding 单元格与单元格之间的间距/单元格与内容之间的间距 align/valign 水平对齐/垂直对齐 colspan/rowspan 列合并/行合并
案例：基础表格的绘制

2、表格的HTML标签及属性
<caption></caption>	表格的标题
<th></th>	表格的列标题
<colgroup></colgroup> 、 <col />	表格的列分组	span、width属性
<thead></thead>、<tbody></tbody> 、<tfoot></tfoot>	表头、表体、表尾	注意：当使用数据行分组的时候表头和表尾一定要成双成对的出现，表体会默认显示一个
rules属性	groups 行列分组之间有分割线 rows 行与行之间有分割线 cols 列和列之间有分割线 all 所有的分割线都存在 none 所有的分割线都没有

3、表格的CSS属性
border-spacing	单元格之间的间距	属性值为value值，需要给父级table设置不可以设置为负值
border-collapse	单元格边框合并	separate 分开的（默认值） collapse 合并的
empty-cells	无内容时单元格的设置	show 显示的（默认值） hide 隐藏的
table-layout	单元格的计算属性	auto 自动的、有计算属性（默认值） fixed 固定的、无计算属性

案例1：多个高级表格的绘制

案例2：个人简历表格的绘制

二：表单的应用

<!-- 1.表单字段集，相当于一个方框，可以嵌套，在其内部可以在设置多个fieldset对象  -->
<fieldset></fieldset>		
<!-- 2.字段级标题  -->
<legend></legend>		
<!-- 3.单选按钮  -->
<input type="radio" name="sex"/>	
<!-- 4.信息提示标签  -->
<label for="box"></label>	
<!-- 5.多选按钮 设置disabled禁用、checked表示默认选择 -->
<input type="checkbox"/>
<!-- 6.上传文本框，设置multiple属性可实现多选  -->
<input type="file"/>				
<!-- 7.下拉列表  -->
<select>					
    <option>北京</option>  
    <option>上海</option>
</select>	
<!-- 8.多行文本域  -->
<textarea cols="40" rows="5">文本域</textarea>

三：BFC概念及应用

概念：Block Formatting Contexts (块级格式化上下文)，只针对于块级元素，可以把 BFC 理解为一个封闭的空间，内部的布局与外面的毫不相干
特点

BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
BFC内部的盒子会在垂直方向，一个接一个的放置
盒子的左边与包含块的边框相接触才可以移动位置
BFC的区域不会与浮动盒子发生重叠
计算BFC的高度时，浮动元素也参与计算

触发条件

根元素 html默认就是一个BFC
float的值设置为left或者right
overflow的值不为visible

案例：利用BFC原理实现常见的两栏和三栏布局

自适应的概念
宽度自适应
高度自适应
高度塌陷bug【重点】

一：自适应的概念

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示

二：宽度自适应

浏览器是块级元素，宽度默认是100%
当块级元素设置宽度为100%或者宽度不写的时候，默认是占满浏览器全屏宽度（通栏效果）
子级元素不设置宽度，会与父级等宽（宽度没有继承，只是布局规范效果）
如果当前元素没有设置宽度并且脱离文档流的时候，宽度由内容决定
设置浮动和定位这些脱离文档流的属性时候一定切记要给元素设置宽高大小

三：高度自适应

浏览器默认高度是0，常用的设置html，body{height:100%}
设置height:0 容器的高度就是0不会显示，设置内容的时候会超出容器
设置height:auto、或者height不写的时候，设置内容的时候可以实现自适应

注意：区分height设置0和auto之间区别

min-height 最小高度的作用

作用：可以实现保持最小高度并实现自适应
兼容：只能在高版本浏览器中使用
解决：下划线过滤器的使用

四：高度塌陷的bug

造成的原因：子级元素脱离文档流，父级元素没有设置高度
解决方法

第一种：给父元素添加声明overflow：hidden

第二种：在最后一个子级元素后面添加一个div标签，并设置样式 clear：both

第三种：万能清除法，给父级元素添加clear-fix类名

.clear-fix::after{
  content:"";
  display:block;
  width:100%;
  height:0;
  overflow:hidden;
  clear:both;
  visibility:hidden;
}

五：伪对象选择器

伪对象/伪元素选择器

选择器::after{content:""} 表示在xxx之后添加内容,content固定搭配,可以不写任何内容
选择器::before{content:""} 表示在xxx之前添加内容,content固定搭配,可以不写任何内容
选择器::first-letter{} 选择到第一个字符
选择器::first-line{} 选择到第一行文本
选择器::selection 鼠标选择文本时候状态改变