HTML CSS 基础知识总结

Aki_Huang
291 阅读4分钟

HTML

如何理解HTML语义化

非语义化

<div>
  <div>header</div>
  <div>content</div>
  <div>footer</div>
</div>

<main>
  <h1>标题</h1>
  <header>header</header>
  <section>section</section>
  <footer>footer</footer>
</main>

总结： 语义化的优点：

  • 提高代码可读性
  • 让搜索引擎更容易读懂（SEO）

参考代码

默认情况下，哪些HTML标签是块级元素、哪些是内联元素？

HTML标签

  • 块级元素，display: block/table：div table td tr p h1-h6 dl dt ul li br 等
  • 内联元素，display: inline/inline-block：span img a input button等

CSS

分析知识模块： 布局 定位 图文样式 响应式 CSS3

CSS布局

盒子模型的宽度如何计算？

#div1 {
	width: 100px;
	padding: 10px;
	border: 1px solid #ccc;
	margin: 10px;

	background-color: #f0f;
	box-sizing: border-box;
	/*
	offsetWidth = width + padding + border(没有margin)
	没加box-sizing: border-box; offsetWidth = 122px
	加了box-sizing:border-box; offsetWidth = 100px
	*/
}

margin纵向重叠问题

  • 相邻元素margin-top 和 margin-bottom会发生重叠
  • 空白内容的<p></p>也会发生重叠

margin负值的问题

  • margin-top为负值 自身向上移动
  • margin-left为负值 自身向左移动
  • margin-right为负值 右侧元素左移，自身位置不变
  • margin-bottom为负值 下方元素上移，自身位置不变

BFC理解与应用

理解

  • Block Format Context 块级上下文
  • 一块独立渲染的区域，内部元素不会影响到边界以外的元素

形成BFC的常见条件

  • float不是none
  • position是absolute或fixed
  • display是flex inline-block等
  • overflow不是visible(hidden scroll auto)

常见应用

  • 清除浮动
    • BFC清除浮动原理？BFC会渲染 独立区域，因此不会让内部元素跑到外头作乱。

float布局问题，以及clearfix

常用语法

  • flex-dirction
  • justify-content 主轴对齐
  • align-items 与主轴垂直的轴对齐
  • flex-wrap
    • 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
    • flex-wrap: nowrap | wrap | wrap-reverse;
  • align-self 自己特立独行
    • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

如何实现圣杯布局和双飞翼布局

目的

  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随着宽度自适应
  • 虽然现在都用flex，但是有些旧系统还是用到这些布局，要知道原理才会维护

技术总结

  • 都是用了float布局
  • 两侧使用了margin负值
  • 防止中间内容被覆盖，双飞翼布局使用padding，圣杯布局使用margin

手写清除浮动

.clearfix:after {
  clear: both;
  content: ' ';
  display: table;
}

flex画色子

CSS-定位

absolute和relative分别依据什么定位

  • relative依据自身定位
  • absolute依据最近一层的定位元素定位

定位元素

  • absolute relative fixed
  • body

居中对齐有哪些实现方式

水平居中

  • inline元素：text-align: center
  • block元素：margin: auto
  • absoulte元素：left: 50% + margin-left: 负值 元素的宽度的一半

垂直居中

  • inline元素：height等于line-height
  • block元素：margin: auto
  • absolute元素：top: 50% + margin-top: 负值 元素的高度的一半
  • absolute元素：top,left,bottom,right = 0 + margin: auto

CSS-图文样式

line-height如何继承

  • 写具体数值，则继承该值
  • 写比例，如2/1.5，则继承该比例
  • 写百分比，200%，则继承计算出来的值（考点）
body {
  font-size: 20px;
  line-height: 1.5;
}

p {
  font-size: 16px;
  /* 继承的line-height: 1.5; 
  结果是16px * 1.5 = 24px;
  */
}

body {
  font-size: 20px;
  line-height: 200%;
}

p {
  font-size: 16px;
  /* 继承的line-height: 40px; 
  结果是20px * 200% = 40px;
  */
}

如何实现响应式

rem是什么

rem是一个长度单位

  • px 绝对长度单位 常用
  • em 相对长度单位 相对父元素 不常用
  • rem（root em） 相对长度单位 相对根元素 常用于响应式布局

根元素的字体大小

响应式的常用方案

  • media-query 根据不同的屏幕宽度设置根元素font-size
  • rem，基于根元素的相对单位

rem的弊端：“阶梯”性，vw和vh可以避免该弊端

网页视口尺寸

  • window.screen.height // 屏幕高度
  • window.innerHeight // 网页视口高度 砍掉header
  • document.body.clientHeight // body 高度

  • vh 网页视口高度（window.innerHeight）的1/100
  • vw 网页视口宽度（window.innerWidth）的1/100
  • vmax取两者(vh、vw)最大值 vmin取两者最小值

CSS-CSS3

关于CSS3动画

变形(transform)、转换(transition)和动画(animation)

  • transition允许css的属性值在一定的时间区间内平滑地过渡。
  • transform属性允许你旋转，缩放，倾斜或平移给定元素。
  • animation
  • 画一个宽度为0.5px的线
border: 1px solid #f0f;
transform: scaleY(0.5)
avatar
文章
阅读
粉丝