RED

CSS float的相关图文详解(二)

时间秒杀一切 提交于 2020-05-07 18:39:29
   最近这段时间有些忙,一直没有写关于如何清除浮动的,现在终于抽出时间了,还是那句话,如果哪里有错误或者错别字,希望大家留言指正。我们一起进步!    在CSS中,我们通过float属性实现元素的浮动。浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框,因此,创建浮动可以使文本围绕图像:    例如:      如果想要阻止行框围绕浮动框,就需要对该框应用 clear 属性。 clear属性规定元素的哪一侧不允许有其他浮动元素,也就是说表示框的哪些边不应该挨着浮动框。其值有:   left:元素左侧不允许有浮动元素   right:元素右侧不允许有浮动元素   both:元素左右两侧不允许有浮动元素   none:默认值,允许浮动元素出现在两侧 为了实现这种效果,在被清理的元素的上外边距删添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:    那么为什么要清除浮动? 我们知道浮动的本质是用来做一些文字混排效果的,但是,被拿来做布局用则会有很多的问题出现。由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。为了解决这些问题就需要在该元素中清除浮动。准确来说并不是清除浮动,而是清除浮动后造成的影响。 清除浮动本质 :清除浮动主要是为了解决父元素因为子级浮动引起内部高度为0的问题(父级元素没有设置高度)。        清除浮动就是把浮动的盒子圈到里面

详细解读css中的浮动以及清除浮动的方法

冷暖自知 提交于 2020-05-07 18:35:06
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家。 导读: 1.css块级元素讲解 2.css中浮动是如何产生的  3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文: 1. css块级元素讲解   常见的块级元素主要有以下几种:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 、 <dir> 、 <hr>。   css中块级元素的特点:块级元素可以设置宽高,如果不设置的话,默认为父容器的宽高;总是在新行上开始并且独占一行;高度,行高以及外边距和内边距都可控制;可以容纳内联元素和其他块元素;   2.css中浮动是如何产生的    在网页布局中为了布局更美观,布局更方便,于是我们不可避免的要使用元素浮动,在css中我们使用float来设置浮动。下面我们来详细讲解浮动:   请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。 如果把所有三个框都向左移动,那么框 1

addEventListener 和 onclick 简单比较

此生再无相见时 提交于 2020-05-07 18:34:35
首先说一下addEventListener 语法: element.addEventListener(event, function, useCapture) 这里的event是事件名,function是相应的事件,这个useCapture是一个布尔值,默认是 false ,就是说在 冒泡阶段 执行,如果为 true ,就在 捕获阶段 执行 利用addEventListener可以简单复现网页中对一个对一个元素操作之后 从window-->document-->html-->body-->...-->目标元素 的捕获,然后反过来冒泡的过程 addEventListener 是DOM2版本中加入的 绑定事件有几种方式 Event Listeners (包含addEventListener和IE的attachEvent) IE 8 以及更低版本的 IE 中,需要用 attachEvent 方法: element.attachEvent('onclick', function() { /* do stuff here*/ }); 对于 IE 9 和更高版本的 IE,以及其它浏览器,则要用 addEventListener 方法: element.addEventListener('click', function() { /* do stuff here*/ }, false);

addEventListener的click和onclick的区别

心不动则不痛 提交于 2020-05-07 18:32:25
前两节都和addEventListener的click有关,于是在想它与onclick有什么区别呢,自己调试了一下,网上也有相关资料 事件绑定 onclick绑定方式 优点: - 简洁 - 处理事件的this关键字指向当前元素 缺点: - 不能对事件捕获或事件冒泡进行控制,只能使用事件冒泡,无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序,当使用window.onload属性时,会覆盖采用相同方法所绑定的事件代码 // this 与 event 查一不大 推荐使用event对象 这样你总是可以拥有全部的可用信息 dd.onclick = function (event){ console.log(event.target.innerHTML); // event.target指向的是dd元素,以及他的所有信息 console.log( this .innerHTML); // this也是指向dd元素,包含他的可用信息 } // 注意:有时也会有需要使用this的情况 // 当需要鼠标移入和移出的时候 event会触发该事件每一个子元素 dd.onmouseover = function (event) { this .style.backgroundColor = "red"; // 不会改变子元素 event.target.style

Navicat Premium 15 for Mac(数据库开发工具) v15.0.15

限于喜欢 提交于 2020-05-07 18:18:02
Navicat Premium Mac破解版 是一个可多重连接的数据库开发工具,Navicat 的功能足以符合专业开发人员的所有需求,但是对数据库服务器的新手来说又相当容易学习。它可让你以单一程序同時连接到目前世面上所有版本的主流数据库并进行管理和操作,支持的数据库有: MySQL、SQL Server、SQLite、Oracle 及 PostgreSQL。让管理不同类型的数据库更加方便。 地址:https://www.macw.com/mac/49.html 来源: oschina 链接: https://my.oschina.net/u/4471886/blog/4269483

Unity插件DoTWeen学

喜夏-厌秋 提交于 2020-05-07 17:43:40
DOTWeen是一个动画插件,为Unity添加一些简单的动画。 简单的使用DOTween的一些API,在使用时要引入命名空间 1:DOTween.To(()=>myValue,x=>myValue=x,Value,2.0f)//把MyValue值变化到Value值,时间为2秒,他是用插值运算,把MyValue变化到Value值上的 2:transform.ToMove(Vector3 target,duration,true/false) //让游戏对象移动到target目标位置,第二个参数是设置动画的时间 3:Tween dotween=transform.ToMove(Vector3 target,duration,true/false)//创建Tween对象 dotween.setAutoKill(false)//把自动销毁创建的动画的功能关闭 保存了创建的DTWeen动画后,可以直接用transform.play()播放创建的动画 transform.pause()//暂停动画的播放 transform.DOplay()//播放动画,播放完后销毁动画 transform.DOPlayforward()//正向播放动画,播放完不销毁动画 transform.DOPlayBackword()//反向播放动画,播放完不销毁动画 using UnityEngine; using

前端笔记之CSS(上)语法&文本属性&块/行内元素&选择器&盒模型

感情迁移 提交于 2020-05-07 17:40:01
层叠样式表 ( 英文全称: Cascading Style Sheets) 是一种用来表现 HTML (标准通用标记语言的一个应用)或 XML (标准通用标记语言的一个子集) 等文件 样式 的计算机语言 。 CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 基本语法 在 head 标签里面,写入一下标签:    < html > < head > < style type ="text/css" > css代码 </ style > </ head > < body ></ body > </ html > CSS 代码 规则由两个主要的部分构成:选择器,以及一条或多条声明。 选择器 { 属性 : 属性值 ; 属性 : 属性值 ;···} , 我们称这种形式叫做 键 (key) 值 (value) 对 形式 。 注释: /*css注释内容*/ 文本属性 文本属性 文本属性值 意义 color 英文 ,16 进制 ,rgb 文本颜色 text-align left,center,right 对齐元素中的文本 text-indent px,em 缩进元素中文本的首行 line-height px 设置行高 font-size px 字体大小 font-weight 100-900,bold,normal,lighter 文本的粗细 font

[原][译]关于osgEarth::VirtualProgram

淺唱寂寞╮ 提交于 2020-05-07 17:09:29
英文原文: http://docs.osgearth.org/en/latest/developer/shader_composition.html Shader Composition 着色器的合成系统 Shader Composition(使用组合着色器的原因) osgEarth在其几种渲染模式中使用GLSL着色器。 默认情况下,osgEarth将检测图形硬件的功能并自动选择合适的模式使用。 由于osgEarth依赖着色器,因此作为开发人员,您可能希望自定义渲染或在GLSL中添加自己的效果和功能。 使用着色器的任何人都会遇到相同的挑战: 着色器程序是整体的。 添加新的着色器代码要求您复制,修改和替换现有代码,以免失去其功能。 使您的更改与原始代码的着色器的更改保持同步是维护的噩梦。 维护着色器main()的多个版本既麻烦又困难。 随着GLSL代码库的复杂性增加和添加更多功能,维护可怕的“超级着色器”变得难以管理。 着色器合成( Shader Composition )通过将着色器管道模块化来解决这些问题。 您可以在程序中的任何位置添加和删除功能,而无需复制,粘贴或修改其他人的GLSL代码。 接下来,我们将讨论osgEarth的着色器合成框架的结构。 Framework Basics(基础框架介绍) 组合着色器的框架自动提供main()函数。 您无需编写它们。 而且

Unity---DOTween插件学习(2)---设置参数、Ease曲线、回调函数、动画控制函数

北慕城南 提交于 2020-05-07 16:38:33
DOTween插件学习(1) [Toc] 本文及系列参考于Andy老师的DOTween系列 欢迎大家关注**<font color=Red> Andy老师 </font>** 6、Set设置参数 在 Unity 中添加一个 Cube ,并挂载这个脚本 <font color=Red>SetLoops():设置循环</font> //参数1.循环次数(-1表示无限循环) //参数2.循环方式 //Yoyo:来回运动 //Restart:重新开始(运动完马上返回原来状态再接着运动) //Incremental:一直朝着一个方向运动 transform.DOMove(Vector3.one, 2).SetLoops(-1,LoopType.Yoyo); <font color=Red>SetAutoKill():设置自动杀死动画</font> transform.DOMove(Vector3.one, 2).SetAutoKill(true); <font color=Red>From():反向</font> //from(反向运动,从目标点运动回起始点) //true为增量运动,false则为目标值运动。无参默认为目标值运动 transform.DOMove(Vector3.one, 2).From(true); <font color=Red>SetDelay():设置延时执行<

JavaWeb第二天--CSS

半世苍凉 提交于 2020-05-07 16:37:03
CSS CSS简述 CSS是什么?有什么作用? <br/> CSS(Cascading Style Sheets):层叠样式表。 CSS通常称为CSS样式或层叠样式表。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽度、边框样式、边距等)以及版式的布局等外观显示样式。<br/> CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构。 CSS的代码规范 放置规范 <br/> 在<style>标签内容体中书写CSS样式代码,<style>标签放置在<head>标签中。 格式规范 <br/> 选择器名称 {属性名:属性值; 属性名:属性值;......}<br/> 选择器:即指定CSS样式作用在哪些HTML标签上。 代码规范 <br/> 属性名和属性值之间是键值对关系。 属性名和属性值之间用”:“连接,最后”;“结尾。(例如:font-size:10px) 如果一个属性名有多个值,多个值之间用空格隔开。(例如:border:5px solid red;) CSS注释:/*注释内容*/ <!DOCTYPE html> <html> <head> <title></title> <style> span{ font-size:120px; color:red; border:1px solid