基础回顾（三）| 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：负宽一半拉过去

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

---

更多精彩内容不要错过：
H5&C3知识重构