前端基础知识

thy_19940608

已于 2023-09-16 16:50:18 修改

阅读量51

点赞数

文章标签：前端 css3

于 2023-07-26 10:05:08 首次发布

本文链接：https://blog.csdn.net/thy_19940608/article/details/123153405

版权

前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML

同级元素之间，两个水平方向的盒子相遇，最终两者之间的距离为左盒子的右外边距加右盒子的左外边距；
同级元素之间，两个垂直方向的盒子相遇，最终两者之间的距离为max(margin-top,margin-bottom)；
子元素设置了垂直方向的margin，没有效果，父元素跟着一起掉下来了，因为父元素没有设置padding与border，使父元素上方与子元素上方完全重合在一起；
块元素水平居中：设置元素的margin:0 auto; margin：上、右、下、左；margin：10 5 15 代表上10，左右5，下15；margin：5 10 上下5，左右10；margin：10 上下左右都是10；inline元素水平居中：text-align:center
单行字元素在父元素内垂直居中，设置子元素的line-height为父元素的高度；
block元素：h1、hr、p、ul、ol、li、table、form、div；inline元素：a、b、u、span、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike；inline-block元素（行内块元素，可以设置宽和高同时不会独占一行）：img

文本两端对齐：text-align:justify;text-justify:inter-ideograph;

元素设置了宽高，同时设置了padding的值，如果不想影响实际的宽和高，设置box-sizing:border-box;

display:block/inline/inline-block/none，inline元素设置width，height属性无效。可以设置margin-left margin-right padding-left padding-right

设置透明度：filter:alpha(opacity:30);opacity:0.3

css盒模型：

实际的等于这四部分相加

2.CSS

静态定位：static，默认文档流；
相对定位：relative，设置top，bottom，left，right。相对于其正常位置设置偏移量。且原本（而非偏移之后）占据的空间不变（保留文档流）；通常用作绝对定位元素的容器；
绝对定位：absolute，相对已定位（非static定位元素）的第一个父元素设置偏移量；如果没有，则相对<html>。绝对定位元素脱离文档流；
固定定位：fixed，相对于浏览器视口，即使窗口滚动也不动；
浮动定位：float，left/right，只能水平浮动不能垂直浮动。浮动元素从正常文档流中删除，块元素在浮动元素的下面，但是块元素的内联元素会围绕浮动定位的元素。清除浮动定位：设置clear属性：both/left/right。

（1）外边距让块级元素居中，需满足：
1.设置了宽度

2.盒子左右边距都设置为auto margin: 0 auto

行内元素（行内块元素）水平居中：父元素添加 text-align: center 垂直居中：line-height设置为高度

（2）问题：

使用margin定义块元素的垂直外边时，可能出现外边距合并。

对于嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

1.可以为父元素定义上边框（border: 1px soild transparent）；2.可以为父元素定义上内边距；3.可以为父元素添加：overflow：hidden；4.浮动、固定、绝对定位的盒子不会有塌陷问题

（3）行内(inline)元素尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块元素(block)和行内块元素(inline-block)就可以。inline-block 可以设置宽高，但是不会独占一行

清除内外边距:

* {

margin: 0;

padding: 0;

}

（4）如果盒子没有设置height 则padding-top和padding-bottom不会撑大盒子；如果没有设置width 则padding-left和tadding-right不会撑大盒子。

（5）设置了inline-block元素水平存在空隙，但是空隙的原因不是inline-block引起的，而是标签间空隙引起的。解决方法：
1.在父元素上设置font-size:0

2.设置letter-spacing letter-spacing属性代表字间距。在父元素上设置letter-spacing:-6px

（6）浮动定位 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动定位。float 将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动元素脱离文档流（不会保留原先的位置）；浮动元素会一行内显示并元素顶端对齐；浮动元素会具有行内块元素的特性。

块级元素没有设置宽度，默认和父元素相同宽，但是增加了浮动，则宽度由元素内容大小决定。

先用标准流的父元素排列上下位置，内部子元素使用浮动排列左右位置

CSS权重：

1、!important，加在样式属性值后，权重值为 10000

2、内联样式，如：style=””，权重值为1000

3、ID选择器，如：#content，权重值为100

4、类，伪类和属性选择器，如： content、:hover 权重值为10

5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1

6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

一个盒子里面有多个盒子，如果其中一个浮动了，那么其他兄弟也应该浮动。浮动盒子只会影响盒子后面的标准流，不会影响前面的标准流。

正常情况下：父div如果没有设置高度，则其高度由子元素撑开。如果子元素div设置300*200，则父div宽为body宽，高为200。如果子元素设置了浮动，父元素高度为0。由于浮动元素不再占用原文档流的位置，所以会对它后面的元素排版产生影响。因此需要清除浮动。

清除浮动的方法：

1.额外标签法（隔墙法）推荐；

2.父级元素添加overflow属性；

3.父级添加after伪类；

4.父级添加双伪类。

额外标签法：在浮动元素的末尾添加一个空的标签 <div style="clear: both"></div> 要求这个空标签必须是块级元素。

overflow:hidden 防止外边距合并；清除浮动;

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix{
    *zoom: 1;
}

清除浮动：1.父级没高度；2.字盒子浮动了；3.影响下面布局了。

伪类选择器：

.upper div:not(:last-child), .lower div:not(:last-child){
  margin-right: 12px;
}

3.Js

//运动
function startMove(){
    var oDiv = document....
    clearInterval(timer)
    timer = setInterval(function(){
        var speed = 1
        if(oDiv.offsetLeft >= 300){   
            clearInterval(timer)
        }else{
            oDiv.style.left = oDiv.offsetLeft + speed + 'px'
        }
        
    },30)
}

//获取非行间样式
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr] //IE
    }else{
        return window.getComputedStyle(obj,false)[attr]
    }

}

/*无缝滚动*/
div{
    width:712px;
    height:108px;
    position:relative;
    overflow:hidden;
}
ul{
    position:relative;
    left:0;
    top:0
}
li{
    float:left;
    width:178px;
    height:108px;
    list-style:none
}

/*无缝滚动*/
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

setInterval(function(){
    if(oUl.offsetLeft < - oUl.offsetWidth/2){
        oUl.style.left = '0';
    }else{
        oUl.style.left = oUl.offsetLeft - 2 + 'px'
    }
},30);

offsetWidth代表元素实际的宽度=width+padding+border+margin

offsetTop offsetWidth offsetHeight

Math.floor()向下取整 Math.cell()向上取整 Math.round()四舍五入

function sum(){

arguments[i] //不定参

}

非行间样式的函数不能获取复合样式(background)，需要设置backgroundColor

js数组：let a = [1,2,3]; let a = new Array(1,2,3); length既可以获取，也可以设置（快速清除元素）; push(elemnt)尾部添加. pop()尾部删除。shift()头部删除 unshift(ele)头部添加。splice(起点，长度)从起点删除长度；splice(起点，长度，元素)从起点先删除长度，再插入元素；a.concat(b)a数组连接b数组；a.join('-')，-连接数组；

arr.sort(function(n1,n2){

return n1-n2

})

arr[i] arr.charAt(i)兼容ie7

定时器：

setInterval(function(){},time)每隔time去执行函数。 clearInterval

setTimeout(function(){},time)延迟time去执行函数，只执行一次。 clearTimeout

定时器打开，第一次执行是在time之后。

解决：

function tick(){}

setInterval(tick,1000)

tick()

new Date() getHours() getMinutes() getSeconds() 返回整数

getFullYear() getMonth()需要加1 getDate() getDay() 星期0周天。。。

js逻辑运算符 ||

let a = b || c

只要|| 前面为false 后面不管为true or false 都返回后面

只要|| 前面为true 后面不管为true or false 都返回前面

js以下会转换为false：false undefined null 0 NaN '' ""

用户登录使用浏览器保存信息，下次访问网页无需再次登录。Cookie 是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成，储存在用户本地终端上。cookie只有在服务环境才能设置。

设置cookie

document.cookie = 'name=张三'

</script>

没有设置到期时间时，默认是会话结束，即关闭浏览器。

设置到期时间：

<script>
    let date = new Date().getTime()
    let new_date = new Date(date + 7*24*3600*1000) //7天
    document.cookie = 'name=张三;' + 'expires=' + new_date.toUTCString()
</script>

设置多条cookie 需要一条条设置，不能批量

<script>
    let date = new Date().getTime() //转换为毫秒
    let new_date = new Date(date + 7*24*3600*1000)
    document.cookie = 'name=张三;' + 'expires=' + new_date.toUTCString()
    document.cookie = 'age=19;' + 'expires=' + new_date.toUTCString()
</script>

查看所有cookie ：document.cookie

删除cookie：设置一个比当前时间小的过期时间

<script>
    let data = new Date().getTime()   //先将此时的时间转化为毫秒
    let old_data = new Date(data - 24*60*60*1000) //将过期时间设为24小时前
    document.cookie = 'name=张三;' + 'expires=' + old_data.toUTCString()
</script>

封装cookie

<script>
   
	 //设置cookie
	 function setCookies(obj, limitTime) {
	     let data = new Date( new Date().getTime() + limitTime*24*60*60*1000 ).toUTCString()
	
	     for(let i in obj) {
	         document.cookie = i + '=' + obj[i] + ';expires=' + data
	     }
	
	 }
    
    //查看cookie
	function searchCookie(cookieName) {
	    let re = new RegExp("\s?" + cookieName + "=([^;]+)(;|$)")
	    return document.cookie.match(re)[1]
	}
    
    //删除cookie
	function removeCookies(cookieList) {
	    let data = new Date(new Date().getTime() - 24*60*60*1000).toUTCString()
	    for(let i in cookieList) {
	        document.cookie = cookieList[i] + '= ;' + 'expires=' + data
	    }
	}
</script>


setCookies({
	name: '张三',
    age: 19,
    like: '羽毛球'
 }, 7)

let cookieValue = searchCookie(name)
console.log(cookieValue)

removeCookies(['name', 'age'])

js-cookie 简单的处理cookies的js-API

import Cookies from 'js-cookie'
Cookies.set('name', 'value', { 
  expires: 7, //过期时间为7天
  path: '/',
  domain: '',
  secure: false 
})

/*
name：
cookie 的变量名。

value：
cookie 变量的值。

expires：
设置 cookie 变量保存的时间，单位是天。

path：
cookie 的有效范围，默认为“/”。path 是在参数 domain 基础上的有效范围。

示例：path 设置为 ”/”，在整个 domain 都有效；path 设置为 ”/test”，则只在 domain 下的 /test 目录及子目录才有效。

domain：
cookie有效的域名。

示例：domain 设置为 googlephp.cn，那么在 googlephp.cn 以及它的所有子域都有效。假设php.googlephp.cn、css.googlephp.cn 是 googlephp.cn 的子域，则这2个子域都有效。如果domain 设置为 php.googlephp.cn，则只在子域 php.googlephp.cn下才有效。

secure：
true 或 false，表示 cookie 传输是否仅支持https。默认为 false，不要求协议必须为 https。
*/

官方文档过期时间为天，如下可处理其他时间

let seconds = 10;

let expires = new Date(new Date() * 1 + seconds * 1000);

Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效

thy_19940608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录