CSS样式引入与布局技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46140761/article/details/120852963

CSS引入方式

行内样式

<div style="color:red;font-size:12px;"></div>

内部样式表

<style>
div{
color:red;
font-size:12px;
}
</style>

外部样式表

<link href="css/style.css" rel="stylesheet" type="text/css" />

rel各个属性值配置的意思：
Alternate – 定义交替出现的链接
Stylesheet – 定义一个外部加载的样式表
Start – 通知搜索引擎,文档的开始
Next – 记录文档的下一页.(浏览器可以提前加载此页)
Prev – 记录文档的上一页.(定义浏览器的后退键)
Contents
Index – 当前文档的索引
Glossary – 词汇
Copyright – 当前文档的版权
Chapter – 当前文档的章节
Section – 作为文档的一部分
Subsection – 作为文档的一小部分
Appendix – 定义文档的附加信息
Help – 链接帮助信息
Bookmark – 书签

type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。

CSS选择器

https://www.runoob.com/cssref/css-selectors.html

CSS单位

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3、rem：相对长度单位。r’是“root”的缩写，相对于根元素的字体大小。
4、vh和vw：相对于视口的高度和宽度，而不是父元素的。

1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。

5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。

如果你要让这个元素始终铺满整个视口的可见区域：

.box {
height: 100vmax;
width: 100vmax;
}

CSS定位机制

分为标准流，浮动流、定位流

1、标准流:

默认状态是元素从左往右。从上往下的排列，也就是说标准流中元素的位置是由它在HTML中的位置决定的

块级元素特性：块级元素大多为结构性标记

独占一行
可以设置宽高
如果不设置宽高，宽度默认为容器的100%
块级元素有div,p,h1~h6,ul,ol,li,dl(定义列表),dt,dd，table,form,hr(水平分割线),marquee(滚动文本)

行内元素特性：行内元素大都为描述性标记

与其它元素同行显示
不可以设置宽高
宽高就是文字或者图片的宽高
行内元素有：span,a,b,i(斜体),u下划线,b(加粗),em,img.input,textarea,select,br(换行)，strong(加粗)

2、定位流:

相对定位：指将元素从标准流中分离出来，相对于它原来的位置进行偏移。但它还依然在标准流中占据着它原来的位置。也就意味着相对于其它元素而言它还在它原来的位置上，而且它偏移后会覆盖在其它元素上
绝对定位：也是将元素从标准流中分离出来，区别是绝对定位的元素不再在标准流中占据着原来的位置，因此相对于其它的元素来看它是不存在的，它移动之后它在标准流中原来的位置将被其它元素取代。

3、浮动流:

1）浮动元素特性

会使元素向左或者向右移动，只能左右，不能上下
浮动元素碰到一个包含框或者另一个浮动框浮动就会停止
浮动之后的元素将围绕着它，之前的元素不受影响
浮动的元素会脱离文档流，但不会脱离文字流，即某元素浮动之后，其它没有浮动的文档元素会占据它在标准流中的位置，但是文字不会去占据它的位置

2）浮动后产生的问题

浮动之后可以产生以下问题：

多个元素浮动之后父元素可能撑不开，父元素高度可能变为0
浮动元素之后的元素会紧跟着浮动起来
浮动元素之前的同级元素若没有浮动，则会影响页面结构

3)清除浮动的方法
clear:left|right|both

方法一：给浮动元素的最后一个没有浮动的元素添加clear
方法二：给浮动元素的父元素添加overflow:hidden或者overflow:auto样式
因为可以通过overflow属性触发一个块级格式化上下文，可以理解为给父元素形成了一个新的盒子，这个盒子可以把浮动元素包裹起来。

因为height: auto;的计算结果不是一定为0的。
正常父元素包含浮动子元素，父元素的高度确实为0。
但是父元素overflow:hidden;后，首先会计算height: auto;的真实高度，由于其触发了BFC，需要包含子元素，所以高度不是0，而是子元素高度。
这时overflow:hidden;才起到隐藏作用，不过父元素高度足够大，所以子元素没有被隐藏。
总之，是先计算真实高度，再去隐藏。如果是先直接隐藏了，再去计算高度也就没有意义了。

BFC（block formatting context），中文为“块级格式化上下文”。
先记住一个原则：如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，因为如果不清楚，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。
以下情况会触发BFC:根元素
float的值不为none
overflow的值为auto，scroll，hidden
display的值为table-cell，table-caption和inline–block中的任何一个
position的值不为relative和static
显然我们在设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。
利用BFC可以闭合浮动，防止与浮动元素重叠。

方法三：通过css3的:after伪元素，给其添加5个属性

.clearFix:after{
content:’’;
height:0;
display:block;
visibility:hidden;
clear:both;
}

BFC

https://www.cnblogs.com/bhlsheji/p/5394933.html

IFC

https://segmentfault.com/a/1190000017273573

媒体查询

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

Grid布局

https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

瀑布流

即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
在这里插入图片描述

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>

  var colCount   //定义列数
  var colHeightArry= []   //定义列高度数组
  var imgWidth = $('.waterfall img').outerWidth(true)   //单张图片的宽度

  colCount = parseInt($('.waterfall').width()/imgWidth)   //计算出列数
  for(var i = 0 ; i < colCount; i ++){
    colHeightArry[i] = 0
  }
  //[0,0,0]

  $('.waterfall img').on('load',function(){
  
    var minValue = colHeightArry[0]  //定义最小的高度
    var minIndex = 0  //定义最小高度的下标
    for(var i = 0 ; i < colCount; i ++){
      if(colHeightArry[i] < minValue){   //如果最小高度组数中的值小于最小值
        minValue = colHeightArry[i]   //那么认为最小高度数组中的值是真正的最小值
        minIndex = i  //最小下标为当前下标
      }
    }

    $(this).css({
      left: minIndex * imgWidth,
      top: minValue
    })
    colHeightArry[minIndex] += $(this).outerHeight(true)
  })


  //当窗口大小重置之后，重新执行
  $(window).on('resize',function(){
    reset()
  })


  //当窗口加载完毕，执行瀑布流
  $(window).on('load',function(){
    reset()
  })

  //定义reset函数
  function reset(){
    var colHeightArry= []
    colCount = parseInt($('.waterfall').width()/imgWidth)
    for(var i = 0 ; i < colCount; i ++){
      colHeightArry[i] = 0
    }
    $('.waterfall img').each(function(){
      var minValue = colHeightArry[0]
      var minIndex = 0
      for(var i = 0 ; i < colCount; i ++){
        if(colHeightArry[i] < minValue){
          minValue = colHeightArry[i]
          minIndex = i
        }
      }

      $(this).css({
        left: minIndex * imgWidth,
        top: minValue
      })
      colHeightArry[minIndex] += $(this).outerHeight(true)
    })
  }

</script>

瀑布流布局原理

设置图片宽度一致
根据浏览器宽度以及每列宽度计算出列表个数，列表默认0
当图片加载完成，所有图片依次放置在最小的列数下面
父容器高度取列表数组的最大值

Demo地址

CSS动画

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}