CSS笔记

行内元素（内联元素）和块元素

1. 块级元素(block)特性：

   总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
   宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
   内联元素(inline)特性：

   和相邻的内联元素在同一行;
   宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

   块级元素主要有：
   address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

2. 内联元素主要有：
   a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
   可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

   applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有

• 元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

• 盒子模型

  
  margin：负责盒子与盒子之间的距离
  border：盒子边框
  padding：内边距，控制边框和内容的距离
  content：内容

  1. 如果设置了盒子长和高增加border和padding会撑大盒子，长宽值是测量的长宽减去border和padding
  2. 外边距合并：上面盒子margin-bottom：100px，下面盒子margin-top：200px，最终两盒子距离不是300而是取较大值200
  3. 嵌套块元素塌陷：父元素和子元素都有上外边距，外边距合并为较大的值，父元素塌陷。
     解决方法：
     （1）可以为父元素定义一个边框
     （2）可以为父元素定义上内边距
     （3）可以为父元素添加overflow：hidden
     

  浮动

  ：让多个盒子一行没有缝隙显示，用于横向排列盒子，只能用于元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

  一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  .thumbnail 
  {
  	float:left;
  	width:100px;
  	height:90px;
  	margin:5px;
  }
  

  把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻，没有空间的话会到下一行。

  注意：1. 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
  2. 一个元素浮动，理论上其他兄弟元素也要浮动，不然浮动的盒子会影响后面的标准流。（使用clear清除浮动）
  3. 浮动元素不占位置，是浮动在空中的，父盒子不设置高度那么高度会变成0，影响后面的标准流。使用清除浮动。clear:both;同时清除左右两侧浮动的影响，还可以清除左/右侧

  清除浮动的策略：

  • 额外标签法（不常用）
    

  • 父级添加overflow属性
    

  • 父级添加after伪元素
    

  • 父级添加双伪元素
    

  定位

  ：压住其他盒子或者固定在屏幕的位置
  绝对定位absolute：没有祖先元素或者祖先元素没有定位则以浏览器为准来定位，爸爸没定位爷爷有就以爷爷为准， 绝对定位不占位置脱离标准流。

  子绝父相：子元素使用绝对定位，父元素使用相对定位

  {
  	position:fixed;
  	//右上
  	top:0px;
  	right:0px;
  }
  

  居中

  必须有宽度

  水平居中 margin：0 auto

  垂直居中：vertical-align（只对行内元素或者行内块元素有效）

  1. baseline：默认。放在父元素基线上。
  2. top 元素顶端与行中最高元素的顶端对齐
  3. middle 此元素放置在父元素的中部
  4. bottom 元素顶端与行中最低元素顶端对齐
     bug：图片放在div中可能会导致底部有留白，原因是默认基线对齐了，可以设置底端/顶端/中部对齐来解决
     绝对定位下水平和垂直居中：

  精灵图、字体图标

  把多个小的背景图整合到一张大图片中，这个大图片也称为精灵图、雪碧图、sprites
  选取精灵图的不同位置background-position，移动距离是这个大图的x、y坐标，往上往左都是负值
  字体图标iconfont：展示是图标实际是字体，比如阿里提供的矢量图库

  CSS三角

  只要让一个边有颜色并且宽和高为0就可以出来一个三角
  

  伪元素和伪元素选择器

  before、after必须有content，会把content内容放在标签div内容前或者后。

  div::before{
  content:'我';
  }
  

  子绝父相中，伪元素的父就是它绑定的div

  CSS练手（JD）

  1. icon图标

  https://www.jd.com/favicon.ico
  一般网站都可以这样获取ico图标，保存在根目录下，引入到html页面

  2. 三大标签

  title（网页导航栏题目）
  description网站说明
  keywords关键词（提供给搜索引擎）

  自定义属性（变量）

  1. 在.root中定义全局变量-- *来声明变量名，var(-- *)来使用，*是变量名。

  :root{
      --bg-color: red;
  }
  body{
      --bg-color: lightblue;
      background-color: var(--bg-color);
  }
  

  2. 通过style自定义属性获取js变量值

   <div class="pageItem" :style="{ '--left': left, '--width': width }">
  

  .pageItem::before {
    height: 100%;
    width: 192px;
    background-color: #598bf0;
    content: "";
    position: absolute;
    border-radius: 28px;
    left: var(--left);
    width: var(--width);
  }