【前端】第3回 CSS页面布局与JS简介

2022/8/24 23:23:28

编程Tag： js css 元素页面定位浮动 right nbsp 富婆

本文主要是介绍【前端】第3回 CSS页面布局与JS简介，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. CSS盒子模型
- 1.1 margin（外边距）
2.浮动布局(float)
- 2.1 float简介
- 2.2 三种取值与clear
- 2.3 解决浮动造成的父标签塌陷
3.溢出属性(overflow)
4. 定位
- 4.1 static(静态)
- 4.2 relative(相对定位)
- 4.3 absolute(绝对定位)
- 4.4 fixed(固定定位)
5. z-index
6. 页面练习
7. JavaScript简介
8. JS变量与常量
9. JS数据类型之数值类型(number)
10. 字符串(String)

1. CSS盒子模型

所有的标签都可以看成是一个快递盒

值	功能	抽像理解
margin(外边框)	控制标签之间的距离	两个快递盒之间的距离
padding(内边框)	控制内容与边框之间的距离	快递盒的厚度
border(边框)	内部文本与边框的距离	盒子内物体距离盒子内壁
content(内容)	标签内部的内容	物体自身的大小

1.1 margin（外边距）

1.基础操作

.d2 {
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 100px;
      margin-right: 100px;
}

2.body标签自带8px的外边距

/*简写形式 作用于上下左右*/
body {
    margin:0;
}
/*margin还可以让内部标签居中展示仅限于水平方向*/
.d2{
    margin: 10px auto;
}
 margin: 10px 20px 30px 40px; 上 右 下 左

3.margin: 10px 20px 30px; 上左右下

2.浮动布局(float)

2.1 float简介

在CSS中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样.（浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)）

2.2 三种取值与clear

1.三种取值

属性	功能
left	向左浮动
right	向右浮动
none	默认值，不浮动

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

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

2.3 解决浮动造成的父标签塌陷

浮动会造成父标签塌陷这是一个不好的现象因为会引起歧义

/*解决浮动造成的父标签塌陷*/
/*提前写好css操作 遇到标签塌陷就给标签加clearfix类值即可*/
.clearfix:after {
         content: '';
         display: block;
         clear: both
}

3.溢出属性(overflow)

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

div {
    height: 400px;
    width: 400px;
    border: 3px solid black;
    border-radius: 50%;
    overflow: hidden;
  }
  div img {
     max-width: 100%;
  }

4. 定位

4.1 static(静态)

所有的标签默认都不能直接通过定位修改位置必须要切换成下面三种之一static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

4.2 relative(相对定位)

相对于标签原来的位置做定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

#d1{
    background-color: aqua;
    height: 200px;
    width: 200px;
    position: relative;
    left: 100px;
}

4.3 absolute(绝对定位)

基于已经定位过的父标签做定位(如果没有父标签则以body为参照)。设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

#d1 {
  background-color: aqua;
  height: 200px;
  width: 200px;
  position: relative;

}
#d2{
  height: 300px;
  width: 400px;
  background-color: lime;
  position: absolute;
  top: 200px;
  left: 200px;
}

4.4 fixed(固定定位)

相对于浏览器窗口做定位。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

#d3 {
    height: 100px;
    width: 100px;
    border: 5px solid black;
    position: fixed;
    right: 100px;
    bottom: 300px;
}

5. z-index

设置对象的层叠顺序。

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

.d1 {
    background-color: rgba(149, 144, 144, 0.65);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
  }

  .d2 {
    background-color: white;
    position: fixed;
    width: 600px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin: -200px 0 0 -300px;
    z-index: 1000;
  }

6. 页面练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

  </style>
  <link rel="stylesheet" href="mycss.css">
</head>
<body>
    <div class="my_life">
      <div class="life_head">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2F%2Fpic%2Fd%2Fc7%2F3f7ef843ea.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663932556&t=b4377047197e0a9343c6ca9f1308a91f" alt="">
      </div>
      <div class="life_title"><p>Joker的博客</p></div>
      <div class="life_synopsis">
        <p>鹅鹅鹅，</p>
        <p>曲项向天歌。</p>
        <p>白毛浮绿水，</p>
        <p>红掌拨清波。</p>
      </div>
      <div class="life_skill">
        <ul>
          <li><a href="">小丑1</a></li>
          <li><a href="">小丑2</a></li>
          <li><a href="">小丑3</a></li>

        </ul>
      </div>
      <div class="life_contact">
         <ul>
           <li><a href="">关于我们</a></li>
           <li><a href="">联系我们</a></li>
           <li><a href="">微博账号</a></li>

         </ul>
      </div>
    </div>
    <div class="my_right">
       <div class="right_info">
         <div class="right_title">
           <span class="life">小丑成长日记</span>
           <span class="right">2022-8-24</span>
         </div>
         <div class="right_introduce">
           <p>绑上富婆三大技巧：1、抓准时机，趁虚而入。2、做好情报，巧立人设。3、投其所好，震撼灵魂。</p>
         </div>
         <hr>
         <div class="right_supply"><p>#富婆通讯录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp#如何让富婆爱上我</p></div>
       </div>
      <div class="right_info">
         <div class="right_title">
           <span class="life">小丑成长日记</span>
           <span class="right">2022-8-24</span>
         </div>
         <div class="right_introduce">
           <p>绑上富婆三大技巧：1、抓准时机，趁虚而入。2、做好情报，巧立人设。3、投其所好，震撼灵魂。</p>
         </div>
         <hr>
         <div class="right_supply"><p>#富婆通讯录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp#如何让富婆爱上我</p></div>
       </div>
      <div class="right_info">
         <div class="right_title">
           <span class="life">小丑成长日记</span>
           <span class="right">2022-8-24</span>
         </div>
         <div class="right_introduce">
           <p>绑上富婆三大技巧：1、抓准时机，趁虚而入。2、做好情报，巧立人设。3、投其所好，震撼灵魂。</p>
         </div>
         <hr>
         <div class="right_supply"><p>#富婆通讯录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp#如何让富婆爱上我</p></div>
       </div>
      <div class="right_info">
         <div class="right_title">
           <span class="life">小丑成长日记</span>
           <span class="right">2022-8-24</span>
         </div>
         <div class="right_introduce">
           <p>绑上富婆三大技巧：1、抓准时机，趁虚而入。2、做好情报，巧立人设。3、投其所好，震撼灵魂。</p>
         </div>
         <hr>
         <div class="right_supply"><p>#富婆通讯录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp#如何让富婆爱上我</p></div>
       </div>
      <div class="right_info">
         <div class="right_title">
           <span class="life">小丑成长日记</span>
           <span class="right">2022-8-24</span>
         </div>
         <div class="right_introduce">
           <p>绑上富婆三大技巧：1、抓准时机，趁虚而入。2、做好情报，巧立人设。3、投其所好，震撼灵魂。</p>
         </div>
         <hr>
         <div class="right_supply"><p>#富婆通讯录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp#如何让富婆爱上我</p></div>
       </div>
      <div class="right_info">
         <div class="right_title">
           <span class="life">小丑成长日记</span>
           <span class="right">2022-8-24</span>
         </div>
         <div class="right_introduce">
           <p>绑上富婆三大技巧：1、抓准时机，趁虚而入。2、做好情报，巧立人设。3、投其所好，震撼灵魂。</p>
         </div>
         <hr>
         <div class="right_supply"><p>#富婆通讯录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp#如何让富婆爱上我</p></div>
       </div>
    </div>
</body>
</html>

/*简易博客首页*/
/*页面同用样式*/
body{
    margin: 0;
    background-color: antiquewhite;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
    padding-left: 0;
}
.clearer:after{
    content:'';
    display: block;
    clear: both;
}
/*左侧页面样式*/
.my_life{
    background-color: azure;
    float: left;
    position: fixed;
    height: 100%;
    width: 20%;
    left: 0;
    top: 0;
}
.life_head{
    border: 5px solid white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}
.life_head img {
    max-width: 100%;
}
.life_title,.life_synopsis{
    color: #9284cd;
    font-size: 20px;
    text-align: center;
    padding: 2px;
}

.life_skill a,.life_contact a {
    color: #710a0a;
    font-size: 25px;
}
.life_skill a:hover,.life_contact a:hover{
    color: red;
}
.life_skill ul,.life_contact ul{
    text-align: center;

}
/*右侧页面样式*/
.my_right{
    float: right;
    width: 80%;
}

.right_info{
    background-color: azure;
    margin: 20px 40px 20px 30px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.6);
}
.right_title  {
    border-left: 5px solid red;
}
.right_title .life{
    font-size: 32px;
    padding-left: 16px;
}

.right_title .right{
    font-size: 23px;
    float: right;
    font-weight: bolder;
    padding: 20px 40px;
}
.right_introduce{
    font-size: 18px;
    padding: 10px 0 10px 20px;
}
.right_supply{
    padding: 0 0 5px 10px;
}

7. JavaScript简介

跟java没有关系蹭热度
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
JavaScript与ECMAScript区别
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现
版本迭代
JavaScript是一门编程语言(NodeJS)
1. JavaScript 是脚本语言
2. JavaScript 是一种轻量级的编程语言。
3. JavaScript 是可插入 HTML 页面的编程代码。
4. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

html页面两种引入js的方式

1.<script>代码 </script>
2.<script src="myscript.js"></script>

两种注释语法
//
/**/
JavaScript中的语句要以分号（;）为结束符,建议加分号
支持编写js代码地方
1.pycharm
2.浏览器

8. JS变量与常量

在JS中声明变量和常量都需要使用关键字
1.var:全局有效
2.let:如果在局部名称空间中使用那么仅在局部名称空间有效
3.const:定义常量
JS也是动态类型:变量名绑定的数据值类型不固定
```
var name = 'jason'
name = 123
name = [11, 22, 33, 44]
```
在js中查看数据类型可以使用 typeof

9. JS数据类型之数值类型(number)

JavaScript不区分整型和浮点型，就只有一种数字类型，即所有的数值都是数值类型number

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

10. 字符串(String)

字符串拼接
var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

这篇关于【前端】第3回 CSS页面布局与JS简介的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！