前端知识点总结(html+css)

众所周知,前端内容多而杂,经过查阅各种资料,总结了一些知识点,以备后续复习使用。

html篇

html应该是前端中最简单的知识点了,标签用着用着就熟记于心,话不多说,上干货。

1. 常见块级元素、行内元素、行内块元素的特点和区别
块级元素 (常见的块级元素div,p,h,form,li)
  • 一行显示一个;
  • 宽度默认为容器的100%;
  • 可以设置高度宽度内外边距
  • 块级元素可以包含其他的块级元素和文本(如div下可包含div)
行内元素(常见的行内元素a,span.img)
  • 一行显示多个
  • 宽度为内容的宽度
  • 不可以设置高度和宽度
  • 标签内一般不包含标签(如a标签内包含a标签)
行内块元素

行内块元素包含块级元素和行内元素的特征

2. html5有哪些新特性
  • 语义标签(header,footer,nav,artice,section,aside)
  • 视频标签(audio,video)
  • 画布(canvas)
  • 地理(geolocation)
  • web存储api(localstorage,sessionstorage)
3. img标签上的title属性和alt属性的区别
  • alt属性为了给不能看到图片的人提供文字说明,图片加载失败时
  • title属性可以实现鼠标悬停时提示的内容

css篇

学习css重点就是清楚的了解布局,给你一个页面,你能一眼知道这个页面如何布局。

1. css盒模型
  • 标准盒模型 :height/width = content(默认)
  • IE盒模型:height/width = content+padding+border
  • 通过css3的box-sizing属性设置,设为content-box即为标准盒模型,设为border-box即为IE盒模型
2. css选择器
  • 优先级!important(infinite)>id(1000)>class(100)>伪类选择器(:first-of-type)>伪元素选择器(::after)元素选择器(div)
  • 如果优先级相同,选择最后出现的样式
3. css3新增伪类
  • p:first-of-type 选择属于父元素的首个p元素
  • p:last-of-type 选择属于父元素的最后一个p元素
  • p:only-of-type 选择属于父元素的唯一p元素
  • p:first-child 选择属于属于父元素的唯一子元素 扩展: 伪元素:::before::after::first-line::first-letter::selection::placeholder
4. BFC原理(块级格式化上下文)

含义:是页面中的一块独立渲染区域,并有一套渲染规则。它决定了其子元素如何定位,以及其它元素的关系和相互作用。(属于普通流)

如何创建BFC
  • overflow不为visible
  • float不为none
  • position不为static或者relative
  • display属性为inline-block、flex、table-cell等
BFC作用
  • 可以避免外边距重叠的问题,将两个元素放在不同的BFC容器中即可。(或者把其中一个margin改为padding)
  • 解决高度塌陷
  • 阻止元素被浮动元素覆盖
5. 高度塌陷

原因

  • 很多情况父盒子不方便给高度,子盒子浮动脱离文档流不占位置,使父盒子高度为0

解决方案

在浮动元素末尾加一个空标签,设clear:both

父级添加overflow:hidden

使用after伪元素

:after {
    content:’’,   
    dispaly:block, 
    height:0, 
    visibilty:hidden, 
    clear:both,
}
6. 自适应布局
两栏布局
  • 左边左浮动,右边margin-left(float+margin)
  • 左元素float:left 右边父元素BFC(float+BFC)
  • 左元素绝对定位,left:0;右边margin-left(定位+margin)
  • 父元素display:flex;右边元素flex:1(flex)
三栏布局
  • 左元素左浮 右元素右浮,中间设置margin-left和margin-right(浮动+margin)
  • 左右元素absolute,left:0 right:0 中间margin:0 宽
  • 父元素display:flex;中间元素flex:1;(flex)
  • 表格布局:父元素display:table;width:100% 所有子元素:display:table-cell
  • calc布局:全部float:left .main:calc(100% - 两宽度) 使用calc符号两边一定要有空格
7. 如何用css创建一个三角形

箭头向下的三角为例

   width : 0
   height : 0
   border : 6px solid transparent
   border-top : 6px solid red
8. display:none、visibilty:hidden和opacity:0的区别

display:none  //不显示对应元素,在文档中不占位置
visibilty:hidden //隐藏对应元素,在文档中仍保留位置
opacity:0 //隐藏元素,占位置,可添加事件
9. css中的overflow属性
 scroll  //必会出现滚动条
 auto //子元素内容大于父元素,显示滚动条,超出显示,不超出不显示
 visible //溢出内容出现在父元素之外
 hidden //溢出隐藏
10. 溢出文字的省略显示

单行文本

white-space: nowrap //(强制一行显示)
overflow: hidden //(溢出隐藏)
text-overflow: ellipsis //(显示省略标记)

多行文本

  -webkit-line-clamp:2 //(用来限制在一个块元素显示的文本的行数)
  display: -webkit-box//(将对象作为弹性伸缩盒子模型显示)
  overflow: hidden;
  -webkit-box-orient: vertical; //(设置对齐模式)
  text-overflow: ellipsis //(以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本)
11. 为什么要初始化css
  • 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没有初始化CSS,往往会导致页面在不同浏览器之间出现差异。
  • 初始化css的方式
* { 
    padding:0;
    margin:0;
  }
12. 如何使英文单词发生词内断行

word-wrap:break-word。
13. div水平垂直居中的几种方式。
绝对定位(子绝父相)
<div class="father">
  这里是父容器
  <div class="child">
  这里是子容器
  </div>
</div>
.father {
   width: 200px;
   height: 200px;
   background: yellowgreen;
   position: relative;
 }
.child {
   width: 100px;
   height: 100px;
   background: red;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
flex布局
 <div class="father">
    <div class="child">这里是子div</div>
 </div>
.father {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
   width: 100px;
   height: 100px;
   background: slateblue;
 }
div绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中)
 <body>
   <div class="center">这里是div</div>
 </body>
.center {
   width: 200px;
   height: 200px;
   background: yellowgreen;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
 }
14. px和em的区别是什么
  • px和em都是长度单位,两者的区别是:px的值是固定的,指定为多少就是多少,计算比较容易;em的值不是固定的,是相对于容器字体的大小,并且em会继承父级元素的字体大小。
  • 浏览器的默认字体高都是16px,所以未经调整的浏览器都符合lem=16px,那么12px=0.75em,10px=0.625em。
  • 与em对应的另一个长度单位是rem,是指相对于根元素(通常是HTML元素)字体的大小。
  • vw和vh:都是针对当前浏览器窗口大小而言,1vw就等于可视窗口宽度的百分之一,1vh 就等于可视窗口高度的百分之一。
15.z-index(层叠上下文)

触发条件: 根层叠,html本身的层叠 position非static css3的新特性:

  • flex
  • transform
  • opacity
  • filter z-index设置为auto或者0时,后出现的覆盖前面的;
16.各种居中方案
水平居中:

行内元素给父元素设置text-align:center

定宽:margin:0,atuo

定宽:absolute,left:50%,margin-left:-1/2宽度

不定宽:父:flex,子:margin:0,auto

不定宽:父。flex,justify-content: center

垂直居中

单行文本:line-height:高度

定高:margin:auto , 0

定高:absolute,top:50%,margin-top

不定高:父:flex,子:margin:auto,0

不定高:父:flex,align-items: center

水平垂直居中

子元素为块级元素:父:flex,子:margin:auto

子元素未知:display:flex;justify-content: center;align-items: center

子元素用绝对定位,上下左右为0,margin:auto,父:relative,

17.如何实现小于12px的字体

transform: scale(0.7);相对于12px缩小0.7

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
文章版权声明 1 本网站名称: 智码星河
2 本站永久网址:https://wx234.cn
© 版权声明 文章版权归作者所有,未经允许请勿转载。

WX234.CN
喜欢就支持一下吧
点赞8 分享打赏
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容