CSS核心样式及应用(二)

作者: 琳琳酱吖 | 来源:发表于2020-10-26 23:54 被阅读0次

在学习了html和css的基础之后，接下来开始学习css的核心样式语法及其应用。
在学习中我们不仅要悉知css的样式语法，如何去使用css让页面达到我们想要的结果。也要知道在css一些属性在浏览器加载中，可能遇到的兼容性问题和遗留的问题。

标准流文档

标准流文档是指元素排版布局时，按照从左到右，从上到下的排列方式。HTML就是一种标准流文档。

微观现象

① 空白折叠现象
② 文字类元素排在一行会出现底边对齐的现象。
③ 元素一行内容写满元素的width时会自动换行。

元素等级

在标准流中，习惯将元素分为：块级元素、行内元素、行内块元素等。

块级元素：大部分容器级表情包括p均为块级元素，例如<div>、<h1>等。
特点：
① 可设置宽高；
② 独占一行；
③ 不设置宽度，会自动撑满父级width，不设置高度，会被内容撑开。
底边对齐.PNG

行内元素：大部分文本级标签，例如<span>、<a>、<b>等。
特点：
① 不能正常加载宽高属性，其他和模型虽能设置，但容易出现加载问题。
② 与其他行内或行内块元素并排一行显示；
③ 不论是否设置宽高，只能被内容撑开。
行内块元素：<img>、<input>等。
特点：
① 可设置宽高。
② 与其他行内或行内块元素并排一行显示；
③ 不设置宽高，以原始尺寸加载或被内容撑开。
④ 具有标准流微观性质，有空白折叠现象。

CSS常用样式-显示模式

每个元素都有自己在浏览器中的默认加载模式，但是可以通过display属性来更改标签的显示模式。

属性值	作用
block	以块级元素加载
inline	以行内元素加载
inline-block	以行内块元素加载
none	标签及内容直接隐藏

总结：display属性更改的显示模式并没有改变标准流本质属性，页面依旧只能从上往下加载，并且存在空白折叠现象。

CSS常用样式-浮动

float 浮动是脱离标准流的方式一。

属性值	作用
left	左浮动
right	右浮动

浮动属性

浮动的元素具备行、块元素的性质。既可设置宽高，还可并排一行不会出现空白折叠现象；若不设置宽高，被元素内容自动撑开。
以left为例：父元素宽度足够，元素依次向左进行贴边。

利用浮动贴边性质，可完成导航栏等多种网页布局效果。

浮动的元素没有margin塌陷
浮动元素已经脱离标准流，不再具有margin塌陷现象。
浮动的元素让出标准流位置
元素浮动后，会将原来占有的标准流位置让给后面的同级元素。

.box1 {
      float: left;
      width: 50px;
      height: 50px;
      background-color: pink;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

浮动元素让出标准流位置.PNG

注意：在IE6、IE7浏览器中，有兼容问题。一般不允许父元素中子元素有的浮动有的不浮动，同级元素有一个浮动其他也要浮动。

IE6、7兼容问题.PNG

字围现象
同级元素中前面元素浮动，后面元素不浮动，且不浮动字体有文字，文字不会被浮动元素所盖住。

字围现象.PNG

可利用该现象制作一些特殊的文图效果，例如百度百科。

浮动产生的问题

在标准流中，元素不设置高度，能被内部的内容标准流元素撑开，但是内部子元素浮动后，浮动元素撑开标准流父亲。
父元素没有高度，会影响后面元素标准流位置，若浮动子元素足够高，可能会影响后面浮动元素贴边。

清除浮动的方法

浮动的子元素高度不能变化情况下，给标准流父元素合适的高度height。
问题： 子元素高度不能变化。
给父元素添加clear属性，不再受前面浮动影响，不会再占有浮动让出的位置。
问题： 父元素高度不能自适应，若两个父元素有margin，效果不正确。
在两个父盒子之间，添加一个标签带有clear：both属性的<div>。不再受前面浮动影响，不会再占有浮动让出的位置且解决了margin的问题。
问题： 父元素没有高度自适应。
在父元素内部，所有浮动子元素最后添加一个空的标签带有clear：both属性的<div>

/* 在父元素添加伪类，在子元素最后清除浮动 */
.clearfix:after {
  content:"1";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

缺点： 如果页面浮动元素很多，需要添加很多没有语义的空标签，HTML结构冗余。

溢出隐藏！！ 给内部有浮动的子元素的父亲添加overflow：hidden属性，可解决浮动所有问题。

小偏方：浏览器加载盒子尺寸时，遇到溢出隐藏属性，浏览器会强制检索子元素高度，不论子元素是标准流还是浮动。

CSS常用样式-<a>的伪类选择器

伪类选择器添加的样式不一定立即加载到浏览器上，只有用户触发对应行为，伪类选择器才会立即加载。
权重与普通选择器相同。

/* a的四个伪类选择器 */
a:link {    /*访问前状态 */
  color: gray
}
a:visited {   /*访问后状态 */
  color: cyan; 
}
a:hover {   /*鼠标悬浮状态 */
  color: red;
}
a:active {    /*鼠标点击状态 */
  color: yellow
}

注意：书写顺序必须是：访问前link、访问后visited、鼠标悬浮hover、鼠标点击active。(其他标签也可设置:hover伪类状态)

CSS常用样式-背景属性

背景颜色 background-color
背景图片 background-image
背景重复 background-repeat
背景定位 background-position
背景附着 background-attachment

背景颜色 background-color

作用：在盒子区域添加背景颜色的修饰
加载区域：在border及以内加载背景颜色。

背景图片 background-image

作用：给盒子添加图片的背景修饰。
加载区域：默认的加载到border及以内部分。若图片不重复，加载从border以内开始。

  div {
    background-image: url(images/1.jpg)
  }

背景重复 background-repeat

作用：设置添加背景图是否重复进行加载。

属性值	作用
repeat	重复，默认属性值
no-repeat	不重复
repeat-x	水平重复
repeat-y	垂直重复

背景定位 background-position

作用：设置不重复图片在背景区域的加载开始位置。
属性值：单词、像素、百分比表示法。

单词表示法

水平方向：left、center、right
垂直方向：top、center、bottom

像素表示法

background-position: 100px 50px;
正数：图片针对盒子的原点向右、下移动。
负数：图片针对盒子的原点向左、上移动。

百分比表示法

100%代表的数值：
水平方向，盒子border以内的背景区域宽度减去图片的宽度。
垂直方向，盒子border以内的背景区域高度减去图片的高度。

背景附着 background-attachment

作用：设置背景图片是否随着页面或盒子的滚动而滚动。

属性值	作用
scroll	滚动的，背景图片随着页面滚动而滚走
fixed	固定的，背景图定位参考点变成了浏览器左上定点，页面滚动时，浏览器左上定点不变，导致背景图固定在浏览器窗口某个位置，不会随页面滚动而滚走

综合写法 background

5个属性值之间可互换位置

background: url(images/bg.jpg) no-repeat center top fixed #fff;

背景属性的应用

① 替换插入图
<h1>是权重最高的标签，<h1>内容的文字可以提高SEO搜索排名，如果设置logo，就无法书写搜索关键字。

<h1>
  <a href="#"><img src="images/logo.png"/></a>
</h1>

解决办法：
使用css添加背景图给<a>标签或<h1>标签;并用text-indent属性把文字给隐藏掉。

<style>
h1 a {
  /* 背景图替换插入图 */
  display: block;
  width: 100px;
  height: 50px;
  background: url(logo.png) no-repeat;
  /* 文字隐藏方法 */
  text-indent: -100px;
  overflow: hidden;
}
</style>
<h1>
  <a href="#">重要文字</a>
</h1>

文字隐藏方法兼容性问题：
①将字号设置为0。IE8及以上或高版本浏览器可以隐藏文字，但IE7及以下有兼容问题。
给<a>设置text-indent属性并给一个很大的负值，再设置溢出隐藏属性，将溢出文字隐藏。
注意：text-indent属性在块级或行内块元素才生效

② padding区域背景图
在盒子中既有背景图部分，而且有文字内容，可在背景区域使用padding挤出位置。

.news li {
  padding-left: 25px;
  background: url(images/star.png) no-repeat left center;
}

③ 精灵图
用户访网站时，网页上每一张图片都需要经过一次请求才能展现给用户，为了提高页面加载速度，可将一个页面中涉及到的零星背景图片都集中到一张大图，这时只需要向服务器发送一次请求。
可使用一些在线工具，快速生成精灵图。

精灵图.PNG

CSS新增背景属性-背景半透明属性 rgba

css3在颜色值中，增加了一种rgba模式。

div {
  background-color: rgba(0,255,0,0.4)
}

注意： 背景半透明是指盒子背景半透明，盒子内容不受影响。

同样，可以给文字边框半透明

div {
  color: rgba(0,0,0.0.3);
  border: 1px solid rgba(0,0,0,0.3);
}

CSS新增背景属性-背景缩放 background-size

通过background-size设置背景图片的尺寸。

属性值	作用
px值	只设置一个值，垂直方向等比例拉伸；设置两个值，按设置值加载
百分比	同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
cover	自动调整缩放比例，把背景扩展足够大，使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏
contain	自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域。

CSS新增背景属性-多背景

css3中规定，一个盒子上，可添加多个背景图片。

  div {
    background-image: url(bg_1.jpg),url(bg_2.jpg);
  }

注意：背景加载时，先写的背景压盖后写的背景图片。

CSS常用样式-定位类型及特点

相对定位
绝对定位
固定定位

相对定位

属性值：relative
参考元素：标签加载的原始位置，要搭配偏移量属性才能发生位置移动。
性质：相对定位元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。

  div {
    position:relative;
    left:100px;
    top:100px;
  }

注意事项：
① 偏移量属性分正负值。由于参考元素是自身，left的正值等于right的负值
② 同一方向不能设置两个偏移量属性，若设置了，只加载left和top属性。

实际应用

相对元素比较稳定，不会随意让出位置，可将相对元素作为绝对定位的参考元素。
可在占有原始位置的情况下，对加载区域进行位置微调.例如：文字上标或下标。

绝对定位

属性值：absolute
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。要搭配偏移量属性才能发生位置移动。
性质：绝对定位会脱离标准流，让出标准流位置，可设置宽高。不设置宽高只能被内容撑开。

注意：绝对定位参考元素不固定，参考点不同，left正值不再等于right的负值。

<body>为参考元素的参考点

有top参与的定位，参考点是<body>的左上、右上顶点。自身对比是盒模型属性最外面的左上角或右上角。有bottom参与的绝对定位，同理。

祖先级为参考元素

参考点事盒子border以内的四个顶点，组合方向决定参考点。绝对定位元素只关心对比点和参考点间的距离，会忽视参考元素的padding区域。
例如：left、top：参考点是祖先border以内左上顶点，对比点是盒子自身的左上角。

固定定位

属性值：fixed
参考元素：浏览器窗口
参考点：浏览器窗口四个顶点，由于浏览器四个顶点位置不会变化，因此元素会始终显示在定位位置。
性质：固定定位元素会脱离标准流，让出标准流位置。

定位应用

压盖效果

绝对定位元素脱标，不占标准流位置，常见的是绝对定位制作压盖效果。

居中

定位的元素，如果想在参考元素居中显示：
① 居中方向使用偏移量属性，例如设置left:50%
② 给绝对定位子盒子设置同方向margin值，属性为负的自身宽度的一半。

.father {
  /* 父盒子 */
  position:relative;
  width: 100px;
  height: 50px
}
.child {
  /* 子盒子 */
  position: absolute;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}

不论子盒子宽度是否大于参考元素，都可用该方法设置居中。

扩展应用

① 可解决标准流中，宽的子盒子在窄的父盒子的居中显示。
② 可在不改变原始元素浮动状态下，利用相对定位居中方法。

压盖顺序

默认压盖顺序

定位的元素，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在HTML中后写的压盖先写的定位。

自定义压盖顺序

更改压盖顺序，可设置z-index属性。
属性值：数字。
① z-index属性值大的会压盖小的
② 属性值相同，比较书写顺序。
③ z-index属性只对设置了定位的元素生效。
④ 若父级没有设置z-index,子级z-index大的会压盖小的；若父级设置了z-index,无论子级多少，父级大的子级压盖父级小的子级。

小练习：轮播图静态结构布局。