前端学习总结

Posted allenhua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习总结相关的知识,希望对你有一定的参考价值。

1.背景定位

/*单一样式*/
background-color:#f1f1f1;
/*CSS注释:颜色单词(red yellow ...) 16进制(#0CC)*/
background-image:url(img/2.jpg);
/*默认状态下,背景会平铺*/
background-repeat:no-repeat;
/*
no-repeat 不重复
repeat-x 水平平铺
repeat-y 垂直平铺
*/
background-position:bottom;
/*
背景定位:x  y 
具体数值 100px 30px 10% 20% left | center | right top | center | bottom
左 中 右 上 中 下
当第二个属性值没有填写,默认居中
*/ background-attachment: fixed;/*图片固定,不会随滚动条而滚动*/ /*复合样式*/ /*前面的样式等价于*/ background:#ccc url(img/dg.jpg) no-repeat -100px -20px fixed;/*之间位置可以随便放,但是定位的x和y两个值必须连续靠近*/

  background 复合样式
     不区分属性书写顺序的
     颜色相关 图片相关 是否重复 位置 是否滚动
background-attachment 背景是否滚动
fixed 固定在浏览器可视区域
scroll 更跟随滚动条滚动

2.边框样式

/* border: 1px solid red; border: 1px dotted red; 10px 太粗了,不同浏览器兼容性问题*/
/*复合样式*/
border-top: 50px solid red;
border-left: 50px solid yellow;
border-bottom: 50px solid blue;
border-right: 50px solid green;
background: #f1f1f1;    

3.PS技术 :切图(抠图),测量,图片简单处理

如何得到一张图片:
1).设计师给你的PS图片(首页.psd)
2).印屏幕:PrtSc SysRq
3).浏览器(chrome)的插件

PS使用快捷键

Ctrl + N 新建

Alt+ 放大缩小

Ctrl + D 取消选框

Alt + Delete 铺上前景颜色

Ctrl + T 自由变换 可以抹掉文字

Ctrl + Delete 铺上背景颜色

 Alt + Ctrl + Shift + S 存储为Web应用格式

 Ctrl + Shift + i 反选

 P 裁剪

 F 展示模式

 F8 显示宽度和高度

 Ctrl + V 粘上背景颜色

 4.边框

  1).边框的形状:非矩形(即它的角不是直角), 要严谨

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
           /*width: 400px;
           height: 400px;
           border: 20px solid red;
           border-top-color: black;*/
           width: 0px;
           height: 0px;
           border: 20px solid red;
           border-top-color: black;
        }
    </style>
    <!--
        边框的形状:非矩形(即它的角不是直角), 
        要严谨
    -->
</head>
<body>
    <div></div>
</body>
</html>

  2). 内容是会撑开容器宽高

   背景不会占用容器宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框练习</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 10px solid pink;
        }
    </style>
    <!--
        内容是会撑开容器宽高
        背景不会占用容器宽高
    -->
</head>
<body>
    <div>
       这是一段文字
    </div> 
</body>
</html>

5.em 是根据字体大小来进行计算的

1em = 当前字体的大小
word-spacing 单词间距 (以空格为解析单位)
测量文字大小值,最好是使用从上到下的方式去测量文字大小

记录:
16px 8px
12px 16px
一个空格有多大?
宋体字体下文字大小的一半。
字体格式不一样,字体大小也不一样。
 
文字属性:是有顺序的
技术图片
 
6. padding 内填充
注意:设置padding 后会撑大容器的大小
padding 的四个方法
上   右      下       左 (记住小技巧:手表 顺时针,12点,3点,6点,9点)
top right bottom left

padding复合方法
只有一个属性值时:4个方向都是同一个值
设置两个属性值时:第一个属性值设置的上下两个方向,第二个属性值设置的左右两个方向。
设置三个属性值时:第一个属性值设置的上面一个方向,
第二个属性值设置的左右两个方向,
第三个属性值设置的下面一个方向。
设置四个属性值时:第一个属性值设置的上面一个方向,
第二个属性值设置的右面一个方向,
第三个属性值设置下下面一个方向,
第四个属性值设置的左面一个方向。
 
7.margin 外边距
标签于与标签之间的间隔(距离)

margin复合方法
只有一个属性值时:4个方向都是同一个值
设置两个属性值时:第一个属性值设置的上下两个方向,第二个属性值设置的左右两个方向。
设置三个属性值时:第一个属性值设置的上面一个方向,
第二个属性值设置的左右两个方向,
第三个属性值设置的下面一个方向。
设置四个属性值时:第一个属性值设置的上面一个方向,
第二个属性值设置的右面一个方向,
第三个属性值设置下下面一个方向,
第四个属性值设置的左面一个方向。
 
8.margin的问题
 
1.margin-top 传递
解决方法:仅学以学知识点可以使用border解决 具体方法:#box加上 border: 1px solid black;
2.margin上下叠压 div1和div2之间的具距离应该为200px,现在为100px
解决技巧:
1.还是使用margin,可以建某一元素方向设置成预想的值。margin叠压会取最大的margin值。
2.如果元素没有特殊特征,也可以用padding代替
把#div1的margin: 100px 100px 200px 100px
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       #box {
          background-color: red;
          border: 1px solid black;
       }
       #div1{
           height: 50px;
           background-color: pink;
           /*margin: 100px*/
           margin: 100px 100px 200px 100px;
       }
       #div2{
           height: 50px;
           background-color:yellow;
           margin: 100px;
       }
    </style>
</head>
<body>
    <div id="box">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>

 9.盒模型

盒模型大小:border + padding + width/height
宽度: 100 + 10*2(左右边框) + 20 + 40 = 160
高度: 100 + 10*2(上下边框) + 20 + 40 = 160
盒模型的宽度:
border-left-width + padding-left +width + padding-right + border-right-width
盒模型的高度:
border-top-width + padding-top + height + padding-botom + border-botom-width
技术图片

 

 

以上是关于前端学习总结的主要内容,如果未能解决你的问题,请参考以下文章

Python学习总结

[vscode]--HTML代码片段(基础版,reactvuejquery)

线程学习知识点总结

Tailwind.css 体验总结

Tailwind.css 体验总结

前端——JSON学习总结