基础回顾（三）| CSS核心样式

最新推荐文章于 2024-09-22 13:36:41 发布

小北@爱学习

最新推荐文章于 2024-09-22 13:36:41 发布

阅读量1.1k

点赞数

分类专栏：网课笔记文章标签： css css3

本文链接：https://blog.csdn.net/qq_43352105/article/details/111037317

版权

网课笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

【写在开头】基础回顾系列的内容总结主要来源于拉钩课程的大前端就业班，在之前一段自己有学过前端，但是存在的问题就是学的东西不系统，都是这边学一点，那里又学一点，等真正需要用的时候，就存在这个知识点有印象，但是不知道具体怎么使用，有什么注意的点。所以选择跟着拉钩的课程系统过一下知识点。
在为自己投资的过程中，与其去犹豫衡量值不值得，不如动起来，这才是最终效果反馈的决定性因素。

文章目录

- CSS核心样式

CSS核心样式

字体

粗细 font-weight

设置文字是否加粗显示

单词类型属性值

normal：定义标准的字体；bold：定义粗体字符；

bolder：定义更粗的字体；lighter：定义更细的字体

数字类型

normal:400 ; bold:700

标签是自带的粗体

样式风格 font-style

设置文字的正体和斜体显示

normal：设置正规的字体，大多数标签的默认值
italic：设置斜体的文字，只要针对于英文
oblique：设置倾斜的字体，只是将文字倾斜显示
自带斜体效果，italic斜体效果

行高 line-height

设置一行文字实际占有的高度，默认字体是带有行高的，在行高中是垂直居中的

px像素值：设置行高的像素值
百分比数值：设置本身加载字号像素值的百分比
必须参考设计图量取具体的数值(测量工具Fw)

字体综合 font

字体、字号、行高、加粗、斜体都是font综合属性的单一属性，五个单一属性值可以进行合写，每个值之间用空格进行分隔

书写顺序：加粗、斜体、字号/行高、字体

文本

水平对齐 text-align

设置文本水平方向的对齐，不管是单行还是多行，都会对应方向对其

left：居左对齐，大部分标签的默认值
center：居中对齐
right：居右对齐

文本修饰 text-decoration

设置文本整体是否有线条的修饰效果

none：没有修饰，大多数标签的默认值
overline：上划线
line-through：中划线，删除线，同标签
underline：下划线，同标签

常用方法：给a标签去掉下划线显示

文本缩进 text-indent

设置文本段落首行是否进行缩进

px单位：表示首行缩进多少像素
em单位：表示缩进几个中文字符的位置
百分比：缩进文字所在标签的父级标签的width属性值的百分比
属性值区分正负，正数表示向右，向下缩进，负数表示向左，向上缩进

盒模型

包含五个用来描述盒子位置,尺寸的数据

在这里插入图片描述

书写元素内容区域 : width+height
盒子实体化区域: width+height+padding+border
盒子实际占位:width+height+padding+border+margin

width:添加元素内容区域的宽度

auto:默认值,浏览器可以计算实际的宽度
px: 像素值定义的宽度
%: 定义参考父元素宽度width的百分比宽度

特殊应用:

如果一个元素不添加width属性,默认值为auto,不同浏览器会根据其特点计算出实际的宽度.

元素独占一行的,width会默认撑满父元素的width区域,如果是不需要独占一行的,其width的值是内部元素内容撑开的

height:添加内容区域的高度

属性值参照width三种属性值

特殊应用:

height高度的auto值,是内部元素内容自动撑开的高度,自适应内部内容的高度,不会占满整个浏览器

padding:内边距

设置元素的边框内部内容到宽高区域之间的距离

复合属性,可以利用-形成单一属性值(top,right,buttom,left)
合写成padding属性,四值法(上,右,下,左);三值法(上,左右,下);二值法(上下,左右);单值(上下左右)
层叠法:先统一设置,然后在单一修改

border:内边距外面的边界区域,盒子实体化最外层

border-width宽度:类似padding
border-style 形状
- none:定义无边框
- solid:定义实线
- dashed:定义虚线,在大多浏览器呈现实线
border-color 颜色

margin:设置盒子和盒子之间的距离

可以设置四个方向单一属性和复合写法
不可以设置样式

盒模型应用实例

清除默认样式

大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响,为避免默认样式对整体布局效果影响,一定要清除默认样式.

清除盒子之间的边距,大的工程清除使用具体标签进行清除

*{margin:0;padding:0}

ul,li中的默认样式清除

ul,li{list-style:none}

a标签的样式清除

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

h标题标签,b,strong加粗标签的清除

h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal;}

height应用

设置内容的高度,如果没有设置则根据内容高度来撑开

必须设置高度
- 设计图中的盒子高度占位固定的,后面同级元素在高度下面进行加载
- 在内部元素内容超过盒子设定宽度的时候,只会溢出但不会影响后面内容的显示,这里就需要overflow属性
  
  visible:溢出部分显示 hidden: 溢出部分隐藏
  
  scroll:溢出部分出现滚动条,不管有没有溢出都会有滚动条
  
  auto:自动的,没有溢出显示正常,溢出则有滚动条
必须不设置高度
- 盒子高度必须自适应内部内容的高度,或者height设置为auto属性

居中

文本的水平居中

text-align:center

文本的垂直居中

单行文本的垂直居中

line-height:行高

多行文本的垂直居中,让元素高度自适应或者正好等于多行文字的高度,设置元素内边距上下值相同

padding:10px 0;

元素的垂直居中

类似于多行文本的方法,父盒子高度由子盒子高度撑开,给父盒子设置上下的padding,就可以实现子盒子的高度居中

元素的水平居中

给独占一行的子盒子设置margin,上下随意0,左右相同保持平衡把中间元素挤到中间(只有父盒子宽度大于子盒子)

margin:0 auto

父子盒模型

我们希望父盒子的所有子盒子都能在一行显示,就必须保证所有子元素的宽度加在一起不能大于父元素的宽度

父元素的width≥所有子元素的width+padding+border+margin

解决子元素超出父元素的情况,一种是精准计算,控制子元素的宽度总值
盒模型自动内减
- 必须是独占一行的元素
- 宽度不设置,用子盒子自动填充满父盒子

margin塌陷现象

在垂直方向如果有两个元素的外边距有相遇，浏览器真正加载处理啊的不是两个间距的和，而是两个间距中较大的哪一个，边距小的塌陷到了大的内部。

父子元素margin塌陷，设置了margin-top，父子盒子的margin也会进行

解决方法：

同级元素的垂直方向间距可以单独设置给一个元素，不进行拆分
父子标签塌陷，不要用margin去踹，直接用padding去挤子标签的位置

标准文档流

在HTML元素中，元素排版布局过程中，元素会默认从左往右，从上往下的流式排布，前面的内容发生了变化，后面的位置也会相应发生变化。

微观现象

空白折叠现象
文字类元素排在一行会出现高低不齐、底边对齐效果
一行内容如果写满了会自动换行

元素等级

块级元素：大部分容器级标签
- div、h1
- 可以设置宽高，在浏览器正常显示
- 必须独占一行，不与其他标签并排一行
- 不设置宽度会撑满父级的width，不设置高度会被内容自动撑开
行内元素：大部分的文本级标签
- span、a、b
- 没有办法加载宽高，无法正常显示padding，都是被内部的内容自动撑开
- 可以和其他行内、行内块元素并排一行
行内块元素
- img、Input
- 可以设置宽高，不设置会被原始尺寸加载要么被内容撑开
- 可以和其他行内元素、行内块元素并排一行显示
- 依旧存在空白折叠现象

显示模式display

可以通过属性值更改一个标签的显示模式，加载对应元素等级
在这里插入图片描述

display属性并没有改变标准文档流本质，页面还是只能从上往下，存在空白折叠的微观现象，要想实现更多页面布局必须脱离标准流的限制，使用浮动、绝对定位、固定定位

浮动

让元素脱离标准流，同一级的浮动元素可以并排在一排显示

float:left/right

性质

浮动元素行块二象性，不会有空白折叠现象
浮动元素依次贴边，情况距离
- 如果一排可以放下，就依次贴边放入元素
- 如果最后一个元素放不下，会依次向前进行贴边
- 如果前面的高度没有给出可以贴边的高度，就再次向前贴边
- 可以使用贴边来制作平均分别表格效果、导航栏效果、常见的电商企业网络布局
浮动元素没有margin塌陷现象
浮动元素会让出标准流的位置
- 浮动元素会压盖未浮动元素
- IE6中不兼容水平排列
- 字围现象可以使用浮动

存在的问题

子元素在浮动之后就撑不开父盒子
浮动的元素会影响到后面浮动的元素

清除浮动的方法
给标准流的父亲强制性给一个高度（但是一旦子盒子高度发生变化后，现象和之前的一样没有变化）
clear属性清除元素自身受到前面浮动的影响(margin)属性会受到影响，显示不出来，left、right、both分别清除
隔墙法（外墙），中间加一个div设置clear属性，并且添加一个height来添加margin的值属性
隔墙法（内墙），将这个div添加到每个盒子的内部，就可以实现父盒子的高度自定义，是由div强行拉开的（添加了无效的html标签）
避免冗余的HTML标签，可以使用伪类

伪类选择器：通过u案中的标签添加伪类，去选中标签的某个状态或位置

:after//表示选中某个标签内部最后的位置

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名

.clearfix:afer{
  content:"1";//添加一个文本内容撑开
  display:block;//将文本级转换为块级
  height:0; //不使用1来撑高
  clear:both;//清除前面的浮动影响
  visibility:hidden;//隐藏但是位置还占着
}

溢出隐藏，解决浮动的所有问题

overflow:hidden;

在不设置高度的情况下，同时设置了溢出隐藏，浏览器在加载盒子的时候遇到溢出，会强制性去检索内部子元素的高度，无论子盒子是浮动的还是标准流的，都会将最高高度作为父盒子高度，并且不会影响后面的浮动盒子。

伪类

概念

不需要给标签添加任何属性，书写伪类必须搭配其他选择器使用，伪类选择器的样式不一定能加载到浏览器上，只有当用户触发了相应的行为才会立即被加载。伪类权重和类一样。

a标签的伪类

标签可以根据用户行为不同，划分为四种状态，设置成不同的样式效果，用户触发行为，就可以加载对应的样式

a:link{}//访问前状态
a:visited{}//访问后状态
a:hover{}//鼠标悬浮状态
a:active{}//鼠标点击状态

该标签上可能会同时触发2到3个状态，相同属性之间会发生层叠，伪类权重是相同的，只能通过设置书写顺序规定，后写的层叠先写的
实际应用，访问前后的状态一样的效果，只关注鼠标放上的效果

背景属性

background-color背景颜色

在盒子区域(border内)添加背景颜色的修饰
属性值：颜色名、颜色值

background-image背景图片

给盒子(border以内)添加背景图片
属性值：url图片路径
当设置为不重复时，是不包含border区域

background-repeat背景重复

一定要搭配背景图进行使用

在这里插入图片描述

background-position背景定位

用于设置不重复的图片在背景区域加载的开始位置
属性值有三种写法：单词表示法，像素表示法，百分比表示法
两个值
- 水平方向的位置
  - left center right
  - 针对原点水平位移距离（正右）
  - 百分值相当于盒子的宽度减去图片的宽度后进行百分显示移动
- 垂直方向的位置
  - top center bottom
  - 针对原点垂直方向距离（正下）

background-attachment背景附着

设置body背景图片是否随着页面或者盒子的滚动而滚动

综合写法

background:background-image repeat position attachment color//五个位置都可以相互转换

不写的属性将采用默认样式
如果想要层叠综合一部分，就使用单一属性进行层叠

背景应用

背景图替换插入图

<h1><a href="#">淘宝网</a></h1>
h1 a{
 background:url();
 font-size:0;//不兼容问题，就采用text-indent:-15px,让文字脱离宽度范围内
 overflow:hidden//超出部分则直接隐藏
}

h1标签的权重最高，一般在内部书写最重要的内容，比如最大的标题等,提高SEO是搜索排名
在h1内部添加背景图

padding区域背景图
```
li{
  padding-left:25px;
  background:url() no-repeat
}
```
- 在一个盒子中有背景图部分，也有文字内容，文字让开背景图区域进行加载
- padding四个方向都可以用于添加背景图
精灵图
- 一个网页如果图像过多，服务器会频繁接收和发送请求，大大降低页面的加载速度，减少服务器任务，出现了精灵图技术(CSS雪碧图）
- 将一个页面涉及到的小图全部放在一张大图中，将大图应用于网页，当用户访问该页面，只需向服务器发送一次请求，网页中的背景图像即可全部展现
- 注意事项
  - 一般都是小的修饰样式，插入的图片不能往上放
  - 精灵图的宽度取决于最宽的那个背景图片标签宽度
  - 每个图片之间必须留足够的空白，保证图片加载到标签内的时候不会出现多于内容

CSS新增样式属性

背景半透明样式，颜色值增加了rgba模式，最后一个值表示透明度，透明度alpha取值范围在0-1之间
背景缩放 background-size设置背景图的尺寸，在移动web开发中做屏幕适配应用广泛

在这里插入图片描述

多背景图，先写的在最上面，后写的在下面

定位概述

position属性值+偏移量属性

相对定位relative
绝对定位 absolute
固定定位 fixed

相对定位relative

性质（原位留坑，形影分离）相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置
参考元素是自身，偏移值的正值表示和属性值相反
应用：
- 在子绝父相情况下不随意让出位置
- 在占有原始位置的情况下，对加载效果区进行微调设置

绝对定位absolute

参考元素：参考的是距离最近的、有定位的祖先元素，如果祖先都没有定位，参考body
- 有top参与，参考点就是body页面的左上顶点和右上顶点，自身对比的是盒模型的最外面的左上角或右上角
- 有bottom参与的，参考点是body页面首屏的左下顶点或右下顶点，并且一般不会以body作为参考元素
- 参考祖先级
- 参考的祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
性质：绝对定位元素脱离标准流，会让出标准流的位置，设置宽高，也可以随时定义位置，不设置宽高只能被内容撑开
绝对定位的参考元素是不固定的，不同的参考元素和不同偏移量会导致绝对定位元素的具体位移不同

固定定位fixed

参考元素位浏览器窗口，跟偏离量组合方向有关，由于浏览器窗口是固定不变的，所以fixed的元素位置是不变的
性质：脱离了标准流，让出了位置，可以设置宽高，根据偏移量可以任意设置在浏览器窗口的位置

具体应用

压盖效果，绝对定位脱离标准流，并且不占用位置，效果佳
- 压盖顺序，定位的元素不区分定位类型，都会去压盖标准流或浮动的元素
- 如果都是定位的元素，则后写的会压盖住先写的
- 自定义压盖顺序：z-index
  - 数字越大的会压盖住数字小的
  - 如果都定义了自定义相同，后写的压盖先写的
  - 只有给定位的元素添加才会生效
- 父子盒模型进行了定位，与其他父子级有压盖部分
  - 父级盒子，不设置z-index，后写的压盖先写的，设置了，值大的压盖值小的
  - 子级盒子，如果父级没有设置z-index，子级值大的压盖值小的，“从父效应“。
居中，首先设置它的left：50%处于中线位置，相对定位

居中元素设置一个margin-left：负宽一半拉过去

扩展：在标准流下实现大盒子在小盒子中的居中显示，就可以采用相对居中的方法；不改变原始浮动状态，利用相对定位居中方法

位置，可以设置宽高，根据偏移量可以任意设置在浏览器窗口的位置

具体应用

压盖效果，绝对定位脱离标准流，并且不占用位置，效果佳
- 压盖顺序，定位的元素不区分定位类型，都会去压盖标准流或浮动的元素
- 如果都是定位的元素，则后写的会压盖住先写的
- 自定义压盖顺序：z-index
  - 数字越大的会压盖住数字小的
  - 如果都定义了自定义相同，后写的压盖先写的
  - 只有给定位的元素添加才会生效
- 父子盒模型进行了定位，与其他父子级有压盖部分
  - 父级盒子，不设置z-index，后写的压盖先写的，设置了，值大的压盖值小的
  - 子级盒子，如果父级没有设置z-index，子级值大的压盖值小的，“从父效应“。
居中，首先设置它的left：50%处于中线位置，相对定位

居中元素设置一个margin-left：负宽一半拉过去