float: 浮动

.t1{
float: right/left;
}

关于浮动的两个特点:

1.浮动的框可以向左或向右移动,知道他的外边缘碰到包括框或另一个浮动框的边框为止.

2.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样.

三种取值:

left: 向左浮动

right: 向右浮动

none:默认值,不浮动

clear属性

clear属性规定元素的那一侧不允许有其他浮动元素.(left,right,both(左右两侧均不允许浮动),none,inherit(从父元素中继承clear属性的值))

清除浮动:

  浮动的副作用: 父标签塌陷的问题,所以要先清除浮动

主要有三种方式:

  1.固定高度 在父标签中加入一个其他的标签

  2.伪元素清楚法 css解决

  3.overflow:hidden

伪元素清除法:

.t1:after{
content:' ';
display:block;
clear: both;
}

overflow溢出属性

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

Z-index属性

#i2 {
z-index: 999;
}

1, z-index值表示谁压着谁,数值大的压盖住数值小的.

2.只有定位了的元素,再能有z-index,也就是说.不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素float不能使用z-index

3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压着没有定位的元素.

4.从父现象: 父亲怂了,儿子再厉害也没用.

opacity

用来定义透明效果.取值范围是0-1,0是完全透明,1是完全不透明.

练习: 写一个小米商城页面

day044 cssy其他样式 js初识的更多相关文章

  1. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  2. 转载 yii2-按需加载并管理CSS样式/JS脚本

    一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAsset.php namespace backend\asset ...

  3. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...

  4. .NET程序员也学Node.js——初识Node.js

    清明在石门休了八天假,一眨眼,4月又到中旬了...看到.NET在天朝彻底沦陷而又无能为力,我开始尝试去学习一些新的东西来充实自己,我自然是打死不会去学java的,没有为什么,于是乎,最近开始学习一些前 ...

  5. js初识

    01-Javascript简介   Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) ...

  6. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)

    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...

  7. [Web 前端] 021 js 初识 Javascript

    1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...

  8. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  9. Node.JS初识

    对Node.JS的认识 1.Node 是一个服务器端 JavaScript 解释器: 2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码.处理高 ...

随机推荐

  1. Codeforces 797A - k-Factorization

    A. k-Factorization 题目链接:http://codeforces.com/problemset/problem/797/A time limit per test 2 seconds ...

  2. android -------- android studio 中设置创建类时的说明信息(包含 作者 ,创建时间,注释说明等)

    今天简单来说一下android studio开发工具中的 一个小设置功能: 在开发过程中我们习惯给新建的类添加一些注释信息,创建日期.时间和作者等. 设置信息 File—>Settings—&g ...

  3. Myeclipse项目中Source、Projects、Libraries、Order and export含义

    Myeclipse 新建一个项目时,会出现如下界面 输入项目名,点击next Source source folder:存放.java源文件的根目录:output folder:.class编译输出的 ...

  4. memcached的部署

    window下memcached注册服务 cmd:在学习Memcached时,为了模拟分布存储,常常需要建多个Memcached服务,如何建呢,只能使用命令行了 以管理员身份运行cmd,输入如下命令 ...

  5. 关于react16.4——错误边界

    过去,组件内的 JavaScript 错误常常会破坏 React 内部状态,并导致它在下一次渲染时产生神秘的错误.这些错误总会在应用代码中较早的错误引发的,但 React 并没有提供一种方式能够在组件 ...

  6. Java异常及错误

    java提供了两种异常机制,可以分为运行时异常(RuntimeException)与检查式异常(checked Exception). 检查式异常:java编译器对于这种异常需要我们对其用try... ...

  7. hdu-3671-tarjin/割点方案

    http://acm.hdu.edu.cn/showproblem.php?pid=3671 给出一幅无向图,询问有多少种移除点对的方案使得剩下的连通分量个数大于1. 和上一题差不多的思路直接做n次t ...

  8. hdu-5889-最短路+网络流/最小割

    Barricade Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  9. Leetcode 131

    class Solution { public: vector<vector<string>> partition(string s) { vector<string&g ...

  10. Linux在shell中输入历史命令

    在Linux的shell中,经常输入的命令有很多雷同,甚至是一样的, 如果是长命令,再次敲一遍效率真的是很低, 不过可以通过Ctl+r,  查找history中以前输入的命令,很是好用. 按Ctrl+ ...