Javascript

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

本文主要是介绍【前端】第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简介

  1. 在CSS中，任何元素都可以浮动。
  2. 浮动元素会生成一个块级框，而不论它本身是何种元素。
  3. 关于浮动的两个特点：
    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

设置对象的层叠顺序。

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

  1. 跟java没有关系 蹭热度
    该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
  2. JavaScript与ECMAScript区别
    ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现
  3. 版本迭代
  4. JavaScript是一门编程语言(NodeJS)
    1. JavaScript 是脚本语言
    2. JavaScript 是一种轻量级的编程语言。
    3. JavaScript 是可插入 HTML 页面的编程代码。
    4. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  5. html页面两种引入js的方式
    1.<script>代码 </script>
2.<script src="myscript.js"></script>
  6. 两种注释语法
    //
    /**/
  7. JavaScript中的语句要以分号（;）为结束符,建议加分号
  8. 支持编写js代码地方
    1.pycharm
    2.浏览器

8. JS变量与常量

  1. 在JS中声明变量和常量都需要使用关键字
    1.var:全局有效
    2.let:如果在局部名称空间中使用 那么仅在局部名称空间有效
    3.const:定义常量
  2. JS也是动态类型:变量名绑定的数据值类型不固定
    var name = 'jason'
name = 123
name = [11, 22, 33, 44]
  3. 在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简介的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航