标签：static   hit   是你   简介   溢出   idt   问题   oct   使用   

一、解决浮动带来的影响

1.1、问题点

　　浮动会导致父标签（上一级的边框）塌陷问题

1.2、解决方案

　　往边框里面添加一个标签，使其撑起来

　　1.利用clear属性

　　　　#d1 {clear：left；}　　标签的左边不能有浮动元素

　　2.利用clearfix属性

　　　　在clearfix这个类后面建立一个空的内容，使其具有块级的特性，并且两边都不能有浮动元素

　　　　这是面对浮动塌陷问题最常用的方法，在编写HTML时直接写入，当遇到塌陷问题时，给标签添加一个clearfix的属性即可

　　　　.clearfix:after {content:" ";

　　　　　　　　　　display:block;

　　　　　　　　　　clear:both:}

二、溢出问题

　　当块级标签的大小，小于内容的大小时，会造成溢出现象

2.1、文本溢出

　　overflow：visible　　默认溢出可见

　　overflow：hidden　　溢出部分隐藏

　　overflow：scroll　　溢出部分，通过上下滑动可见

　　overflow：auto　　溢出部分，用过上下以及左右滑动可见

2.2、图片溢出

　　将图片设置成溢出部分隐藏，并且宽度为标签宽度的100%

　　#d1{overflow：hidden；}

　　#d1>img{width:100%}

三、定位

3.1、静态定位　　static

　　所有标签都会默认为静态的static，不可改变位置，即position：static

3.2、相对定位　　relative

　　相对于原标签移动relative

　　　　在使用相对定位时，需要先将静态定位改为相对定位，否则无法移动。position：relative；之后添加移动的数据

3.3、绝对定位　　absolute

　　在知道父类定位的情况下，进行移动absolute

　　　　在使用绝对定位时，如果父类是默认定位的情况下，需要先将父类改成相对定位position：relative，在将子类进行绝对定位position：absolute，之后进行移动

3.4、固定定位　　fixed

　　固定在浏览器的某个位置，例如小广告

　　　　默认固定定位在右下角，直接输入固定定位position：fixed，之后移动，设置边框的大小以及样式

{
            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;
        }
    











回到顶部

四、验证浮动和定位是否脱离文本流（是否还保留原本位置）

　　不脱离文本流：相对定位

　　脱离文本流：浮动、绝对定位、固定定位

五、z-index模态框

　　如百度登录页面，设置三层结构，使用z-index：99，数值越高，层级越高

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)  最远的
  2.黑色的透明区(z=99)          中间层
  3.白色的注册区域(z=100)  离用户最近







{
            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;

        }
    


这是最底层的页面内容


    
登陆页面
    
username:
    
password:
    点我点我~

六、透明度的设置

　　opacity：0.9；同时修改颜色以及字体

　　background-color：rgba（0,0,0,0.5）；只能修改字体的透明度

七、页面的搭建

7.1、书写顺序

　　1.先试用div进行站位，在填写基本内容，最后调整样式

　　2.在编写HTML时，id和class要求见名知意

7.2、页面的搭建　　

　　https://www.cnblogs.com/jingpeng/p/12892183.html 

八、JavaScript简介

　　JavaScript和Java没有任何的关系，也是一种语言，可以写后端

　　是一种脚本语言，可以插入HTML页面的代码，并且可以使用浏览器执行

　　JavaScript是ecmascript的一种体现，后者是前者的规格

8.1、注释

　　单行注释：/单行/

　　多行注释：/*多行*/

8.2、引入方式

　　1.直接在script标签里面编写js代码

　　2.通过script标签src属性属性引入外部js代码

8.3、js语法结构

　　以分号为结束语句

8.4、变量

　　需要使用关键字声明

　　1.es6前：var

　　　　var name=‘a’；　　局部和全部由分隔开

　　2.es6之后：var和let

　　　　let name=‘b’；　　局部和全局未分隔

8.5、常量

　　python中：未明确的定义常量，默认大写为常量

　　js中：使用const声明是常量，const pi=3.14

53、页面的搭建与js简介

标签：static   hit   是你   简介   溢出   idt   问题   oct   使用   

原文地址：https://www.cnblogs.com/jingpeng/p/12892112.html