【大白话】说HTML和CSS的一些知识点（下）

moocnanmo
135 阅读6分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

之前学习记录的，比较杂乱无章，将就看下吧。

工作后在看之前写的这些笔记，感觉真是一种成长。

居中问题（十分重要）

开局就是老生常谈的居中问题，水平居中，垂直居中方法的各自实现方法 ， 每个居中都有几种实现方式，于是写了个小demo，属于是简单的不得了了，草履虫都能看得懂。

水平居中核心：

  1. 给父元素设置block，让它成为块级元素，在text-align: center（常用与文字水平居中）
  2. 看有无宽度，需要谁居中，给其设置 margin: 0 auto;(auto：自适应调整边距)
  3. 子元素使用绝对定位，在左移50%在transform移回去;（难搞的居中用这个）
  4. 父元素使用flex布局,在使用justify-content: center; (项目常用)

垂直居中核心：

  1. 单行：父子元素等高，给子元素设置line-height；多行：父级设置display: table-cell;vertical-align:middle
  2. 子绝父相，在top移动，transform移动回来
  3. flex定位，给父级添加display: flex; align-items: center

水平垂直居中核心：

  1. 父子有宽高，并设置子绝父相后，在给子元素四周设为0，magin:auto
  2. 父有宽高，子绝父相后，给上左设置50%，在transform负一半
  3. 给父级设置宽度100%，和高度，在flex定位

下面demo使用起来也比较简单，想看那个居中，就注释掉当前的样式，打开对应的样式。如想看水平居中第二种方法的实现，就关闭当前状态，打开有关2.2的注释即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#shuipin {
				width: 100%;
				height: 100px;
				background-color: #00A4FF;
				/* 1. */
				display: block;
				text-align: center;
				
				/* 2.2 */
				/* text-align: center; */
				
				/* 4. */
				/* display: flex;
				justify-content: center; */
			}
			#zhong{
				/* 2.1有宽度直接：margin: 0 auto; */
				/* width: 80px;
				margin: 0 auto; */
				
				/* 2.2 */
				/* display: inline; */
				
				/* 3. */
				/* position: absolute;
				left: 50%;
				transform: translateX(-50%); */
				}
				
				/* --------------------------------------------------------- */
				#chuizhi {
					width: 100%;
					height: 100px;
					background-color:#e74c3c ;
					
					/* 1.2多行垂直 */
					/* display: table-cell;
					vertical-align:middle; */
					
					/* 2. */
					/* position: relative; */
					
					/* 3. */
					display: flex; align-items: center;
				}
				#chuizhi #zhong{
					/* 1.单行垂直 */
					/* line-height: 100px; */
					
					/* 2. */
					/* position: absolute;
					top: 50%;
					transform: translateY(-50%); */
				}
				
				/* ---------------------------------------------- */
				#shuichui{
					width: 100%;
					height: 100px;
					background-color:#2ecc71;
					
					/* 1. */
					position: relative;
					
					/* 2. */
					/* position: relative; */
					
					/* 3. */
					/* display: flex;
					justify-content: center;
					align-items: center; */
				}
				#shuichui #zhong{
					
					/* 1. */
					width: 68px;
					height: 24px;
					border: 1px solid #EDEEF0;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					
					/* 2. */
					/* position: absolute;
					border: 1px solid #EDEEF0;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%); */
				}
		</style>
	</head>
	<body>
		<!-- 水平居中-->
		<div id="shuipin">
			<div id="zhong">
				水平居中
			</div>
		</div>

		<!-- 垂直居中 -->
		<div id="chuizhi">
			<div id="zhong">
				垂直居中
			</div>
		</div>
		
		<!-- 水垂居中-->
		<div id="shuichui">
			<div id="zhong">
				水平垂直居中
			</div>
		</div>
	</body>
</html>

多行文本显示省略号

这在简介种经常用到，就是超过设定的文本宽度，超过的文本部分就用...代替。

overflow：hidden; 
display：-webkit-box; 将盒子转换为弹性盒子
-webkit-line-clamp：2; 设置显示多少行
text-overflow：ellipsis; 文本以省略号显示

CSS的选择器和优先级

啥是css的选择器? 简单来说就是div里面的元素，你怎么拿到这些元素，拿到这些元素的方法就是选择器。就像id，我可以通过div的id来操控这里面的样式，那么这id就是选择器。

常见的选择器有：id ，class ，标签，伪元素，伪类选择器等 他们的优先级顺序为：!important>内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式，同一个元素会被后面相同选择器属性覆盖。

这里顺带提一下常见的块行元素

块级元素：div、h、from、table、p、ul，li

行内元素：span，img、a、input、select、button

在提一手 ~ + > 这些通配符选择器，算是进阶写法吧

  • ~ ：A~B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素（要同级，所有B）
  • + ：A+B表示选择紧A后面的第一个B元素，且A和B必须拥有相同的父元素（要同级，一个B）
  • > ：A>B指选择A元素里面的所有B元素，但要B元素是A元素的第一代（父子级，所有B）

重绘和重排

对应的可以理解为：炒菜的中途加菜，在加些调料和全部倒掉重炒一份。

在前端的概念是浏览器需要重新构造渲染树，这个过程称之为重排，会刷新页面；受到影响的部分在屏幕上重新绘制叫重绘，不会刷新页面。

重排的可能有：添加或者删除比较多的DOM元素，窗口大小发生了改变，页面初始化。

减少重绘和重排的方法：不在布局信息改变时做DOM查询， 使用csstext,className一次性改变属性，使用fragment 。

隐藏元素

用display:none和visibilty:hidden，他俩都可以隐藏，但用法不一样：

  • visibility：hidden，不会改变页面布局，不会触发该元素已经绑定的事件
  • display: none， 会改变页面布局，相当于页面中把该元素删除掉（项目中常用这方法来对组件或按钮进行显隐操作）。

flex

很重要的一种布局，内容有点多，先看MDN的说法吧：flex， 主要记的属性有：全部

  1. flex-direction：决定主轴的方向
    1. row 主轴为水平方向，起点在左端
    2. row-reverse：设置主轴为水平方向，起点在右端
    3. column：设置主轴为垂直方向，起点在上沿
    4. column-reverse: 设置主轴为垂直方向，起点在下沿
  2. flex-wrap：换行的几种情况
    1. norap(默认值)：不换行
    2. wrap：换行，第一行在上方
    3. wrap-reverse：换行，第一行在下方
  3. flex-flow：是flex-direction和flex-wrap的简写, 默认值为row nowrap。
  4. justify-content： 我理解为水平居中对齐
    1. flex-start（默认值）：左对齐
    2. flex-end：右对齐
    3. center：居中
    4. space-betweet: 两端对齐，成员之间的间隔全都相等
    5. space-around: 每个成员两侧的间隔相等。
  5. align-items：我理解为垂直对齐
    1. flex-start：交叉轴的起点对齐
    2. flex-end：交叉轴的终点对齐
    3. center: 交叉轴的中点对齐
    4. baseline: 成员的第一行文字的基线对齐
    5. stretch(默认值)：如果成员未设置高度或设为auto，将占满整个容器的高度
  6. align-content ：交叉轴上对齐
  7. order: 设置 order:0 ，决定子元素的排列顺序，越小越排前，可以说负数
  8. flex：1 （0, 1, auto ）
    1. 有三个属性：
      1. flex-grow：属性定义成员的放大比例，默认为0，如果存在剩余空间，不放大
      2. flex-shrink：属性定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小
      3. flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为 auto, 即项目本身的大小（重要）， 如果设置为 auto, 那么这盒子就会按照自己内容的多少来等比例的放大和缩小，如果随便设置一个带有长度单位的数字，那他就会等比例放大或缩小
    2. flex: 1; === flex: 1 1 auto

所以，这也解释了为什么flex设置为1，就能平分空间且水平居中了，实际就改了flex-grow的值，其余两项均为默认。

avatar
文章
阅读
粉丝