开发工程师必备————【Day19】CSS盒子模型与JavaScript基本语法

皮糖小王子

已于 2022-08-25 22:20:28 修改

阅读量267

点赞数

分类专栏：前端文章标签： css javascript 前端

于 2022-08-24 23:53:40 首次发布

本文链接：https://blog.youkuaiyun.com/DiligentGG/article/details/126510433

版权

前端专栏收录该内容

5 篇文章

订阅专栏

今日内容概要

盒子模型
浮动布局
定位属性
z-index
课堂练习
JavaScript基础语法

盒子模型

1.盒子模型简述
我们把所有的标签都可以看成是一个快递盒的话：

比喻描述描述名称
两个快递盒之间的距离标签之间的距离外边距（margin)
快递盒的厚度标签的边框边框（border）
盒子内物体距离盒子内壁内部文本与边框的距离内边距（padding）
物体自身大小标签内部的内容内容（content）

比喻描述	描述	名称
两个快递盒之间的距离	标签之间的距离	外边距（margin)
快递盒的厚度	标签的边框	边框（border）
盒子内物体距离盒子内壁	内部文本与边框的距离	内边距（padding）
物体自身大小	标签内部的内容	内容（content）

2.margin外边距

.margin-test{
	margin-top:5px;
	margin-right:10px;
	margin-bottom:15px;
	margin-left:20px;
}

简写格式：
.margin-test{
	margin:5px 10px 15px 20px;
}

body标签自带8px的外边距。

margin:0;               简写形式作用顺序为上下左右；
margin:10px 20px;       上下     左右
margin:10px 20px 30px;  上  左右  下
margin:10px 20px 30px 40px;  上   右   下    左

margin还可以让内部标签居中展示：
margin:0 auto

3.padding内填充

.padding-test {
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 15px;
 padding-left: 20px;
}

简写格式：
.padding-test {
 padding: 5px 10px 15px 20px;
}

padding:0;               简写形式作用顺序为上右下左；
padding:10px 20px;       上下     左右
padding:10px 20px 30px;  上  左右  下
padding:10px 20px 30px 40px;  上   右   下    左

浮动布局

在CSS中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
1.关于浮动的两个特点：
特点一：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
特点二：由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

2.三种取值

取值作用
left 向左浮动
right 向右浮动
none 默认值，不浮动

取值	作用
left	向左浮动
right	向右浮动
none	默认值，不浮动

3.clear属性
clear属性规定元素的哪一侧不允许其他浮动元素。

值描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认值，允许浮动元素出现在两侧
inherit 规定应该从父元素继承clear属性的值

clear属性只会对自身起作用，而不会影响其他元素。

浮动会造成父标签塌陷这是一个不好的现象因为会引起歧义
解决浮动造成的父标签塌陷：
方法一：固定高度
方法二：伪元素清除法（使用较多）
.clearfix:after {
           content: '';
           display: block;
           clear: both;
       }
       
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可
方法三：overflow:hidden
敲重点：浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在两侧
inherit	规定应该从父元素继承clear属性的值

溢出属性

值描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
头像实例
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

   <style>
       div {
   height: 200px;
   width: 200px;
   border: 5px solid gold;
   border-radius: 50%;
   overflow: hidden;
}
div img {
  max-width: 100%;
}
   </style>
</head>
<body>
<div>
   <img src="https://img2.baidu.com/it/u=1204473175,3676263147&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661446800&t=0fe61dfa8ee1dee237d641c82663e8ad" alt="">
</div>
</body>
</html>

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

定位

1.所有标签默认为static(静态)
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

标签定位的三种方式：
2.relative(相对定位)
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
       #d1{
           background-color: red;
           height: 200px;
           width: 200px;
           position: relative;
           left: 100px;
       }
3.absolute(绝对定位)
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
#父标签（d1）：
       #d1{
           height: 100px;
           width: 200px;
           background-color: red;
           position: relative;
       }
       #d2{
           height: 200px;
           width: 500px;
           background-color: orange;
           position: absolute;
           top: 100px;
           left: 200px;
       }
4.fixed(固定定位)
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
       #d3{
           height: 100px;
           width: 100px;
           border: 5px solid red;
           position: fixed;
           right: 100px;
           bottom: 100px;
       }

z-index

1.z-index
浏览器界面其实是一个三维坐标系其中z轴指向用户！！！
#i2 {
 z-index: 999;
}

2.设置对象的层叠顺序。
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

3.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .cover{
           background-color: rgba(127,127,127,0.6);
           position: fixed;
           left: 0;
           right: 0;
           bottom: 0;
           top: 0;
           z-index: 999;
       }

       .modal{
           height: 200px;
          width: 500px;
           background-color: white;
           position: fixed;
           left: 50%;
           top: 50%;
           margin-left: -250px;
           margin-top: -100px;
          z-index: 1000;

       }
   </style>
</head>
<body>
<div>我在最下面</div>
<div class="cover"></div>
<div class="modal">
   <form action="">
       <p>username: <input type="text"></p>
       <p>password: <input type="text"></p>
   </form>
</div>
</body>
</html>

4.补充知识点之透明度——opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
<div style="opacity: 0.5">又快干饭</div>

纯手搭页面练习

1.步骤
1.先分析页面结构
然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
html文件、css文件、js文件

2.html代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>my first html</title>
   <link rel="stylesheet" href="book%20html.css">
</head>
<body>
   <div class="blog-left">
       <div class="bolg-avatar">
           <img src="https://img0.baidu.com/it/u=4277531701,3295668924&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=379" alt="">
       </div>
       <div class="blog-title">
           <span>jason老师的博客</span>
       </div>
       <div class="blog-desc">
           <span>这个人很帅，已经没有任何形容词来形容他的帅~</span>
       </div>
       <div class="blog-info">
           <ul>
               <li><a href="">关于我</a></li>
               <li><a href="">微博号</a></li>
               <li><a href="">微信公众号</a></li>
           </ul>
       </div>
       <div class="blog-link">
           <ul>
               <li><a href="">#Python</a></li>
               <li><a href="">#Golang</a></li>
               <li><a href="">#JavaSceipt</a></li>
           </ul>
       </div>
   </div>
   <div class="blog-right">
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
              <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
       <div class="article-list">
           <div class="article-title">
               <span class="title">Python小白成长日记</span>
               <span class="date">2022-8-25</span>
           </div>
           <div class="article-desc">
               <span>好好学习，天天向上，端正学习态度，赶紧冲啊！！！</span>
           </div>
           <hr>
           <div class="article-info">
               <span>#《从零开始学Python》</span>
               <span>#《Python基本数据类型》</span>
           </div>
       </div>
   </div>
</body>
</html>

3.CSS样式代码展示

/*这是简易版本博客园首页的样式*/
/*页面通用样式*/
body{
   margin: 0;
   background-color: #eeeeee;
}
a{/*去除a标签下划线*/
   text-decoration: none;
}
ul{/*去除无序列表首部点号*/
   list-style-type: none;
   padding-left: 0;
}
.clearfix:after{
   content: '';
   display: block;
   clear: both;
}
/*左侧页面样式*/
.blog-left{
   background-color: #4e4e4e;
   float: left;
   position: fixed;
   height: 100%;
   width: 20%;
   left: 0;
   top: 0;
}
.bolg-avatar{
   border: 5px solid white;
   height: 250px;
   width: 250px;
   border-radius: 50%;
   margin: 10px auto;/*水平居中*/
   overflow: hidden;/*设置图片*/
}
.bolg-avatar img{
   max-width: 100%;
}
.blog-title,.blog-desc{
   color: darkgrey;
   font-size: 18px;
   text-align: center;
   padding: 10px;
}
.blog-link a,.blog-info a{
   color: darkgrey;
   font-size: 28px;
}
.blog-link a:hover,.blog-info a:hover{
   color: red;
}
.blog-link ul,.blog-info ul{
   text-align: center;
   margin: 100px auto;
}
.blog-link li,.blog-info li{
   padding: 5px;
}
/*右侧页面样式*/
.blog-right{
   float: right;
   width: 80%;
}

.article-list{
   background-color: white;
   margin: 20px 40px 20px 10px;
   /*设置边框阴影*/
   box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.8)
}
.article-title {
   border-left: 5px solid red;
}
.article-title .title{
   font-size: 32px;
   padding-left: 16px;
}
.article-title .date{
   float: right;
   font-weight: bolder;
   margin: 10px 20px;
}
.article-desc{
   font-size: 15px;
   /*padding-left: 23px;*/
   padding: 10px 0 10px 23px;
}
.article-info{
   padding-left: 32px;
}
.article-info span{
   padding: 20px;
}

4.最终效果显示

JavaScript简介

1.js与java没有关系，只是为了当时蹭热度
2.JavaScript与ECMAScript区别
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
3.版本迭代
版本还在不停的更新换代
4.JavaScript是一门编程语言(NodeJS)
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
5.html页面两种引入js的方式

Script标签内写代码
<script>
 // 在这里写你的JS代码
</script>
引入额外的JS文件
<script src="myscript.js"></script>
6.两种注释语法
// 这是单行注释

/*
这是
多行注释
*/
7.建议的结束符号是分号

JS变量与常量

1.支持编写js代码的地方
（1）pycharm
（2）浏览器

2.变量声明

JavaScript 的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用var变量名；的格式来进行声明。
在JS中声明变量和常量都需要使用关键字。
var name = "jason";
var age = 20;
名称作用效果
var 全局有效
let 如果在局部名称空间中使用那么仅在局部名称空间有效
const 定义常量

敲重点：
变量名是区分大小写的；
推荐使用驼峰式命名规则；
保留字不能用作变量名。

名称	作用效果
var	全局有效
let	如果在局部名称空间中使用那么仅在局部名称空间有效
const	定义常量

JS数据类型之数值类型

1.JS也是动态类型:
变量名绑定的数据值类型不固定。
  var name = 'jason'
	name = 123
  	name = [11, 22, 33, 44]

2.数值类型（number）
在js中查看数据类型可以使用typeof。
JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123
还有一种NaN，表示不是一个数字（Not a Number）。
常用方法：
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

JS数据类型之字符串类型

1.字符串类型（string）
定义字符串的三种方式：
1.单引号：
var name = 'jason'

2.双引号：
var name = "jason"

3.数字1左边的符号键（模板字符串）：
var name = `
我很好
`
关于模板字符串：
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
与python中f字符串替换差不多！！！

var name = 'jason'
undefined
var age = 20
undefined
var s1 = `my name is ${name} my age is ${age}`
undefined
s1
"my name is jason my age is 20"
如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

2.内置方法
js中涉及到字符串拼接推荐使用+
var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

3.常用方法

方法说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, …) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, …)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割