众所周知,前端内容多而杂,经过查阅各种资料,总结了一些知识点,以备后续复习使用。
html篇
html应该是前端中最简单的知识点了,标签用着用着就熟记于心,话不多说,上干货。
- 一行显示一个;
- 宽度默认为容器的100%;
- 可以设置高度宽度内外边距
- 块级元素可以包含其他的块级元素和文本(如div下可包含div)
- 一行显示多个
- 宽度为内容的宽度
- 不可以设置高度和宽度
- 标签内一般不包含标签(如a标签内包含a标签)
行内块元素包含块级元素和行内元素的特征
- 语义标签(header,footer,nav,artice,section,aside)
- 音视频标签(audio,video)
- 画布(canvas)
- 地理(geolocation)
- web存储api(localstorage,sessionstorage)
- alt属性为了给不能看到图片的人提供文字说明,图片加载失败时
- title属性可以实现鼠标悬停时提示的内容
css篇
学习css重点就是清楚的了解布局,给你一个页面,你能一眼知道这个页面如何布局。
- 标准盒模型 :height/width = content(默认)
- IE盒模型:height/width = content+padding+border
- 通过css3的box-sizing属性设置,设为content-box即为标准盒模型,设为border-box即为IE盒模型
- 优先级!important(infinite)>id(1000)>class(100)>伪类选择器(:first-of-type)>伪元素选择器(::after)元素选择器(div)
- 如果优先级相同,选择最后出现的样式
- 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
含义:是页面中的一块独立渲染区域,并有一套渲染规则。它决定了其子元素如何定位,以及其它元素的关系和相互作用。(属于普通流)
- overflow不为visible
- float不为none
- position不为static或者relative
- display属性为inline-block、flex、table-cell等
- 可以避免外边距重叠的问题,将两个元素放在不同的BFC容器中即可。(或者把其中一个margin改为padding)
- 解决高度塌陷
- 阻止元素被浮动元素覆盖
原因
- 很多情况父盒子不方便给高度,子盒子浮动脱离文档流不占位置,使父盒子高度为0
解决方案
在浮动元素末尾加一个空标签,设clear:both
父级添加overflow:hidden
使用after伪元素
:after {
content:’’,
dispaly:block,
height:0,
visibilty:hidden,
clear:both,
}
- 左边左浮动,右边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符号两边一定要有空格
箭头向下的三角为例
width : 0
height : 0
border : 6px solid transparent
border-top : 6px solid red
display:none //不显示对应元素,在文档中不占位置
visibilty:hidden //隐藏对应元素,在文档中仍保留位置
opacity:0 //隐藏元素,占位置,可添加事件
scroll //必会出现滚动条
auto //子元素内容大于父元素,显示滚动条,超出显示,不超出不显示
visible //溢出内容出现在父元素之外
hidden //溢出隐藏
单行文本
white-space: nowrap //(强制一行显示)
overflow: hidden //(溢出隐藏)
text-overflow: ellipsis //(显示省略标记)
多行文本
-webkit-line-clamp:2 //(用来限制在一个块元素显示的文本的行数)
display: -webkit-box//(将对象作为弹性伸缩盒子模型显示)
overflow: hidden;
-webkit-box-orient: vertical; //(设置对齐模式)
text-overflow: ellipsis //(以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本)
- 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没有初始化CSS,往往会导致页面在不同浏览器之间出现差异。
- 初始化css的方式
* {
padding:0;
margin:0;
}
word-wrap:break-word。
<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%);
}
<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;
}
<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;
}
- px和em都是长度单位,两者的区别是:px的值是固定的,指定为多少就是多少,计算比较容易;em的值不是固定的,是相对于容器字体的大小,并且em会继承父级元素的字体大小。
- 浏览器的默认字体高都是16px,所以未经调整的浏览器都符合lem=16px,那么12px=0.75em,10px=0.625em。
- 与em对应的另一个长度单位是rem,是指相对于根元素(通常是HTML元素)字体的大小。
- vw和vh:都是针对当前浏览器窗口大小而言,1vw就等于可视窗口宽度的百分之一,1vh 就等于可视窗口高度的百分之一。
触发条件: 根层叠,html本身的层叠 position非static css3的新特性:
- flex
- transform
- opacity
- filter z-index设置为
auto
或者0
时,后出现的覆盖前面的;
行内元素给父元素设置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,
transform: scale(0.7);相对于12px缩小0.7
暂无评论内容