css结束2

 

 


一 解决浮动带来的影响

  当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。

  解决方法:

  1.自己加一个div设置高度

  2.利用clear属性

#d4 {
    clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
}

  3.通用的解决浮动带来的影响方法,在写html页面之前 先提前写好处理浮动带来的影响的 css代码

 
.clearfix:after {
  content: ‘‘;
  display: block;
  clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
 
css结束2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #l3{
            border:5px solid black;

        }
        #l1{
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;

        }
        #l2{
            height:200px;
            width: 200px;
            background-color: green;
            float: left;
        }
        .clearfix:after{
            content: ‘‘;
            display: block;
            clear: both;
        }
        /*#l4{clear: left!*z左边不能有浮动的*!}*/
    </style>
</head>
<body>
<div id="l3">
    <div id="l1"></div>
    <div id="l2"></div>
    <div id="l4" class="clearfix"></div>
</div>

</body>
</html>
操作理解

 

二 溢出属性

visible默认值。内容不会被修剪,会呈现在元素框之外。

hidden内容会被修剪,并且其余内容是不可见的。

scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承 overflow 属性的值。

 
p {
  height: 100px;
  width: 50px;
  border: 3px solid red;
  /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
  /*overflow: hidden;  !*溢出部分直接隐藏*!*/
  /*overflow: scroll;  !*设置成滚动条的形式*!*/
  /*overflow: auto;如果内容溢出在设置成滚动条*/  
}
 

三 定位

  • 静态

    所有的标签默认都是静态的static,无法改变位置

  • 相对定位(了解)

    相对于标签原来的位置做移动relative

  • 绝对定位(常用)

    相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

    eg:小米网站购物车

    当你不知道页面其他标签的位置和参数,只给了你一个父标签的参数,让你基于该标签左定位

  • 固定定位(常用)

    相对于浏览器窗口固定在某个位置

    eg:右侧小广告

  • css结束2
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;
            }
            #d1 {
                height: 100px;
                width: 100px;
                background-color: red;
                left: 50px;  /*从左往右   如果是负数 方向则相反*/
                top: 50px;  /*从上往下    如果是负数 方向则相反*/
                /*position: static;  !*默认是static无法修改位置*!*/
                position: relative;
                /*相对定位
                标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
                虽然你哪怕没有动 但是你的性质也已经改变了
                */
            }
    
            #d2 {
                height: 100px;
                width: 200px;
                background-color: red;
                position: relative;  /*已经定位过了*/
            }
            #d3 {
                height: 200px;
                width: 400px;
                background-color: yellowgreen;
                position: absolute;
                left: 200px;
                top: 100px;
            }
    
            #d4 {
                position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
                bottom: 10px;
                right: 20px;
    
                height: 50px;
                width: 100px;
                background-color: white;
                border: 3px solid black;
            }
        </style>
    </head>
    <body>
    <!--    <div id="d1"></div>-->
    
    <!--<div id="d2">-->
    <!--    <div id="d3"></div>-->
    <!--</div>-->
    
    <div style="height: 500px;background-color: red"></div>
    <div style="height: 500px;background-color: greenyellow"></div>
    <div style="height: 500px;background-color: blue"></div>
    <div id="d4">回到顶部</div>
    
    </body>
    </html>
    
    定位的案例
    定位的案例

     

     

四 验证浮动和定位是否脱离文档流(原来的位置是否还保留)

 
<!--<div style="height: 100px;width: 200px;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;</div>-->

<!--<div style="height: 100px;width: 200px;"></div>-->
<!--<div style="height: 100px;width: 200px;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;"></div>-->

<div style="height: 100px;width: 200px;"></div>
<div style="height: 100px;width: 200px;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;"></div>
 

  相对定位不脱离文档流

  浮动,绝对定位和固定定位脱离文档流

五 z-index模态框

  eg:百度登入界面,三层结构

  最底部的正常内容z-index=0

  黑色透明区z-index=1

  白色的登入区z-index=2

css结束2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

案例
案例

 

六 透明度opacity

  它不单单可以修改颜色的透明度还同时修改字体的透明度

  rgba只能影响颜色 

  而opacity可以修改颜色和字体

  opacity:0.5

七 JS

  1.js也是一门编程语言 它也是可以写后端代码的,用js一统天下 前后端都可以写,nodejs 支持js代码跑在后端服务器上

  2.js跟java一毛钱关系都没有,纯粹是为了蹭当时java的热度 

  JavaScript 是脚本语言
  JavaScript 是一种轻量级的编程语言。
  JavaScript 是可插入 HTML 页面的编程代码。
  JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  JavaScript 很容易学习


  7.1 注释

 
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
 

  7.2两种引入方式

  1.script标签内部直接书写js代码
  2.script标签src属性引入外部js代码


  7.3 语法结构

  js是以分号作为语句的结束
  但是如果你不写分号,问题也不大 也能够正常执行 但是它就相当于没有结束符


  7.4变量

  在js中在首次定义一个变量名的时候需要用到关键字声明

  1.var

var name=‘jason‘

 

  2.let:e6s推出的新语法

let name=‘jason‘
如果你的编辑器支持的版本是5.1那么无法使用let
如果是6.0则向下兼容 var let

  var和let的区别

  var在for循环里定义也会影响到全局

  let在局部定义只会在局部生效


  7.5常量

  python中没有真正意义上的常量 默认全大写就是表示常量
   js中是有真正意义上的常量的
  const pi = 3.14

css结束2

上一篇:jquery对单选框或多选的常规操作


下一篇:53 webpack概念、webpack核心介绍、webpack使用