CSS核心样式-学习笔记

前言

文章内容输出来源：拉勾教育大前端就业急训营
在训练营上了两次课，最新的这次课依旧干货满满。知识点讲述的很通透，像浮动、标准文档流、定位这些我之前自学得比较乱的知识点都很明了地传授给我们。对这些知识点理解地更加通透。这篇笔记只记录了一些定义和本人不太熟的部分，所以可能不是很全。
导师和班班还私聊关心我的学习情况，也是很负责了。期待下一个模块的课程。

CSS常用样式

文字属性

文字属性包括上一篇笔记提到的font-family、font-size，这篇笔记记录其他三个文字属性：粗细font-weight、字体风格font-style、行高line-height。

• 粗细font-weight，设置文字粗细
  • 单词取值：normal、bold、bolder、lighter
  • 整百取值：[100,900]，normal等价于400，bold等价于700
• 字体风格font-style，设置文字是否斜体显示
  • normal，正规的字体
  • italic，斜体字
  • oblique，倾斜的字体
• 行高line-height，设置一行文字在实际中占有的高度，文字在行高中垂直居中
  • px值，设置行高的具体像素值
  • %，参考自身字号像素值的百分比
• 综合font，将以上提到的5个文字属性综合书写在font属性当中。

  /* 属性值只有两个时，font-size和font-family必须有，且字号在字体前面 */
  font: 16px "宋体";
  
  /* 3个属性值时，顺序及书写语法为：字号/行高 字体 */
  font: 16px/32px "宋体";
  
  /* 4个或5个属性值时，粗细和风格在前面，总之“字号/行高 字体”这个不能乱 */
  font: bold italic 16px/32px "宋体";
  

文本属性

文本属性包括上一篇笔记提到的color，这篇笔记记录其他三个文本属性：水平对齐text-align、文本修饰text-decoration、文本缩进text-indent。

• 水平对齐text-align，设置文字整体在盒子内的水平方向对齐。
  • left，向左对齐
  • center，居中对齐
  • right，向右对齐
• 文本修饰text-decoration，设置文本整体是否有线条修饰。
  • none，没有线条修饰
  • overline，文字顶部有线条
  • underline，文字底部有线条，标签的默认样式
  • line-through，线条穿过文字，标签的默认样式
• 文本缩进text-indent，设置段落首行是否进行缩进
  • px值，表示首行缩进多少像素值
  • em单位，首行缩进几个中文字符的位置（常用）
  • %，表示缩进文字所在标签的父级标签的width属性值的百分比

盒模型

盒模型，又叫框模型，包含5个用来描述盒子尺寸的属性：width、height、padding、border、margin。
书写元素内容区域：width、height
盒子实体化区域：width、height、padding、border
盒子实际占据位置：width、height、padding、border、margin

宽度width

设置可以添加元素内容的区域的宽度

• auto，默认值，浏览器自动计算
• px值，宽度的像素值
• %，参考父元素的width
• 特殊应用
  • 的width会自动适应浏览器窗口宽度，不用设
  • 不设置width时，块级元素会自动撑满父元素，行内元素以及行内块元素由内容撑开

高度height

设置可以添加元素内容的区域的高度

• auto，默认值，浏览器自动计算
• px值，高度的像素值
• %，参考父元素的height
• 特殊应用，不论是块级元素还是行内元素或行内块元素，不设置height时，元素都由内容撑高

内边距padding

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

• 特点：可以加载背景，但不能加载内容
• 综合写法：

  padding: 10px;	/* 4个内边距都为10px */
  padding: 10px 30px;	/* 上下内边距为10px，左右内边距为30px */
  padding: 10px 20px 30px;	/* 上内边距为10px，左右内边距为20px，下内边距为30px */
  padding: 10px 20px 30px 40px;	/* 上、右、下、左 */
  

• 分开写：padding-top、padding-right、padding-bottom、padding-left

边框border

设置内边外面的边界区域。

• 宽度border-width
• 形状border-style，常用的有：solid、dashed、dotted、none
• 颜色border-color

外边距margin

设置盒子与盒子之间的距离。属性值为像素值。

• 特点：不能渲染背景

盒模型扩展应用

margin塌陷现象

在垂直方向有两个元素的外边距相遇，那么这两个元素的距离并非margin1+margin2，而是max(margin1,margin2)。这样的现象称为margin塌陷现象。

• solution
  • 同级元素：二者间的垂直距离只需要设置给一个元素即可
  • 父子元素：只给父盒子设置padding，将子盒子推开

标准文档流

元素排版布局过程中，元素会默认按照从上往下、从左往右的流式排列方式。前面的内容发生变化，后面的元素也会随着发生变化。
体现方式有两种：微观现象、元素等级。

• 微观现象
  • 空白折叠现象，编辑器中元素与元素之间多个空格折叠成一个空格。
  • 文字类元素排列在一行时，出现高低不齐、底部对齐的效果。
  • 自动换行
• 元素等级
  • 块级元素block：大部分容器级标签以及
    • 独占一行
    • 可以设置宽高
    • 若不设置宽度，会撑满父级的width
  • 行内元素inline：大部分文本级元素，如、、等
    • 与其他行内元素、行内块元素并排一行
    • 若设置了宽高，浏览器不会正常加载
    • 宽高之内被内容撑开
  • 行内块元素inline-block：如、等
    • 与其他行内元素、行内块元素并排一行
    • 可以设置宽高
    • 若不设置宽高，则由内容自动撑开
    • 存在空白折叠等微观现象

显示模式display

元素根据属性值不同，可以加载对应元素等级的显示模式的特点。
属性值有：block、inline、inline-block、none。前三个的特性如上所述。
属性值none表示标签及内部内容直接隐藏，让出原有的标准文件流的位置。
display属性更改显示模式，并没有改变标准流本质性质。
标签脱离标准流方法：浮动、绝对定位、固定定位。

浮动float

浮动float是一种重要的布局属性。
能够让元素脱离标准流，让元素在一行内显示
属性值：left、right。

• 性质
  • 脱离标准流，具备行块二项性。可设宽高、并排一行、不会有空白折叠现象、若不设宽高则由内容撑开。
  • 浮动的元素依次贴边
  • 浮动的元素没有margin塌陷现象
  • 浮动的元素会让出标准流位置
  • 无特殊需求时，同级元素中有一个浮动，其他也要浮动
  • 字围现象
• 问题
  • 内部浮动的子元素无法撑高作为标准流的父盒子
  • 父元素没有设置高度，会影响后面元素的标准流位置。如果浮动的子元素足够高，会影响到后面的浮动元素的贴边。
• 清除浮动产生的问题
  • 方法一：给标准父盒子设置一个大于等于子元素最高高度的height
    • 注意：这个方法只有在浮动的子元素高度固定的情况下适用。

  /* CSS代码 */
      .father {
          border: 10px solid red;
          width: 500px;
          /* 给父盒子设置高度，高度要大于等于子元素的高 */
          height: 100px;  
      }
      .father div {
          float: left;
          width: 50px;
          height: 100px;
          margin-right: 10px;
          background-color: rosybrown;
      }
  
      
      
  
          
  
          
  
          
  
          
  
          
  
      
  

  • 方法二：使用伪元素方法利用CSS代码添加一堵内墙

  /* CSS代码 */
      .father {
          border: 10px solid red;
          width: 500px;
      }
      .father div {
          float: left;
          width: 50px;
          height: 100px;
          margin-right: 10px;
          background-color: rosybrown;
      }
      .father::after {
          content: "";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }
  
      
      
  
          
  
          
  
          
  
          
  
          
  
      
  

  • 方法三：直接在标准流父盒子中添加overflow: hidden; 的属性值

标签的伪类

伪类选择器后面添加的样式不一定立即加载到浏览器上，只有用户触发了对应的行为，伪类的样式才为立即加载。
注：需要按照link、visited、hover、active的顺序来书写。因为如果顺序调转，可能会产生样式被覆盖导致对应状态下无法显示相应样式的情况。但一般不会像下面这样分开写，因为会比较重复累赘。而是直接在a标签选择器中设置统一的样式，需要在特定状态下发生改变的，在这条选择器后书写对应的伪类选择器和样式。

/* 未点击状态 */
a:link {
	color: red;
}
/* 点击过的状态 */
a:visited {
	color: blue;
}
/* 鼠标悬浮状态 */
a:hover {
	color: green;
}
/* 正在点击的状态 */
a:active {
	color: black;
}

背景

• background-color，给border及以内区域添加背景颜色。
• background-image，给盒子添加图片的背景修饰。
  • 范围：若重复，则border及以内；否则border以内
  • 属性值：url
• background-repeat，设置背景图是否重复
  • repeat，默认值
  • no-repeat，不重复
  • repeat-x，在横向上重复
  • repeat-y，在纵向上重复
• background-position，设置不重复背景图在背景区域的加载开始位置。有两个值，中间用空格分开。第一个为水平方向上的位置，第二个为垂直方向上的位置。
  • 单词表示法，水平方向上：left、center、right；垂直方向上：top、center、bottom

  background-position: left top;	/* 左上 */
  background-position: center center;	/* 水平垂直居中 */
  

  • 像素值表示法
    • 水平方向平移几个像素值
    • 垂直方向平移几个像素值
  • 百分比表示法
    • 水平方向，平移( 盒子背景区域宽度 - 图片宽度 ) * x%
    • 垂直方向，平移( 盒子背景区域高度 - 图片高度 ) * x%
• background-attachment，设置图片是否随页面滚动而滚动
  • scroll，滚动，背景图随页面滚动而滚动
  • fixed，固定，原点为浏览器窗口的左上角
• 综合写法background
  • 属性值，可以有1-5个属性值，位置属性不能分开也不能颠倒顺序，5个属性值顺序可颠倒
• background-size，CSS3新增的背景属性
  • px值，若只设一个值，则等比例缩放，与标签类似
  • 百分比，参考盒子宽高
  • cover，自动调整缩放比例，直至完全覆盖背景区域，益处则隐藏
  • contain，自动调整缩放比例，直至把图像在背景区域内扩至最大。图片始终完整显示在背景区域

定位position

另一种重要的布局属性。有三种属性值：相对定位relative、绝对定位absolute、固定定位fixed。
要设置偏移量，元素的位置才会发生改变。
属性名为：水平方向：left、right；垂直方向：top、bottom

相对定位relative

• 参考该标签刚开始加载的原始位置。
• 性质：不脱离原始状态（标准流、浮动），不会让出原来占有的位置
• 实际应用
  • 相对定位比较稳定，可将相对定位的元素作为后期绝对定位元素的父亲，即子绝父相
  • relative比较稳定，可在占有原始位置的情况下，进行位置微调，或对文字进行微调

绝对定位absolute

• 参考距离最近的具有定位的祖先级元素。若祖先级元素都没有定位，则参考
• 性质：脱离标准流，元素可设置宽高
• 注意：参考元素是不固定的。
• 基准是祖先级元素的content区域，即width+height+padding，不包括border和margin

固定元素fixed

• 参考浏览器窗口
• 性质：脱离了标准流，可设置宽高，始终显示在窗口内