Solid | 易学教程

CSS float的相关图文详解（二）

阅读更多关于 CSS float的相关图文详解（二）

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

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

阅读更多关于详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说，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

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

阅读更多关于前端笔记之CSS（上）语法&文本属性&块/行内元素&选择器&盒模型

层叠样式表 ( 英文全称： 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

JavaWeb第二天--CSS

阅读更多关于 JavaWeb第二天--CSS

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

整理高度塌陷与BFC

阅读更多关于整理高度塌陷与BFC

当面试官问道你高度塌陷时，人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 　对，没错，这是一个完美的解决方案，但是我们有考虑过这个方案的实现原理吗，或者面试管继续问你这个方法的原理是什么？是不是一脸懵，不懵的也别杠，接下来我通过排他法来展示他的原理　1. 首先 ::after 是元素的伪元素，在元素后面生成伪元素　2.content 是伪元素的内容，为空，只是让伪元素不显示，显然不是原理　3. height:0 是为了让伪元素高度为0 ，显然不是　4. visibility:hidden 是为了伪元素浏览器渲染但不显示，显然也不是　5. display: block 只是为了让伪元素成为块级元素，成为触发 clear:both 的条件，有点关系　6. clear:both 规定在左右两侧不允许出现浮动元素，这便是清除浮动的原理了那么为什么要清除浮动，最常见的原因是外层容器高度塌陷，下面简单演示一下 <style> .wrap { width: 200px; border: 1px solid #333; } .wrap:after { content: '伪元素'; } .left { float:

DelphiXE FireMonkey 如何画图

阅读更多关于 DelphiXE FireMonkey 如何画图

相关资料： https://stackoverflow.com/questions/10291330/firemonkey-penmode-equivalent-drawline https://blog.csdn.net/shuaihj/article/details/8444676 http://www.delphitop.com/html/FMX/2646.html http://docwiki.embarcadero.com/CodeExamples/Rio/en/FMXTCanvasDrawFunctions_(Delphi) CSDN代码下载： https://download.csdn.net/download/zhujianqiangqq/12394005 代码实例： 1 { 2 相关资料： 3 http://www.delphitop.com/html/FMX/2646.html 4 http://docwiki.embarcadero.com/CodeExamples/Rio/en/FMXTCanvasDrawFunctions_(Delphi) 5 6 FMX 的 Canvas 在不同的系统上会分别使用: 7 WinVista、Win7: D2D (FMX.Canvas.D2D.pas) 8 WinXP: GDI+ (FMX.Canvas.GDIP.pas)

web开发：javascript案例

阅读更多关于 web开发：javascript案例

一、浮动与定位复习二、小米菜单案例三、轮播图四、滚动轮播一、浮动与定位复习 - 浮动与相对定位 ```js // 1.两者均参与布局 // 2.主浮动布局, 相对布局辅助完成布局微调 // 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局 ``` - 浮动与绝对定位 ```js // 1.只保留绝对定位布局 // 2.脱离文档流的盒子宽可以交于内容撑开 ``` <! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title > 浮动与定位 </ title > < style > .box { /* 相对定位 */ position : relative ; /* 绝对定位 */ position : absolute ; /* 固定定位 */ position : fixed ; } </ style > < style > ul { margin : 0 ; padding : 0 ; list-style : none ; } li { float : left ; cursor : pointer ; border-bottom : 2px solid orange ; /* padding: 0 5px; */ margin : 0

C#最受欢迎功能 -- C#1至C#7

阅读更多关于 C#最受欢迎功能 -- C#1至C#7

不定时更新翻译系列，此系列更新毫无时间规律，文笔菜翻译菜求各位看官老爷们轻喷，如觉得我翻译有问题请挪步原博客地址本博文翻译自： http://www.dotnetcurry.com/csharp/1411/csharp-favorite-features 在这篇文章中，请您和我一起浏览C#的各种版本，并分享每个版本中我最喜欢的特性。我将在强调实用性的同时展示其优点。 C＃我最喜欢的功能 - V1至V7 C＃1.0版本 C＃1.0版本（ISO-1）真的是一种非常无趣的东西，没有什么特别令人兴奋的东西，而且它缺少很多开发者喜欢的语言。然而，有一种特别的特征，我认为是我最喜欢的。- 隐式和显式接口实现。接口一直在使用，并且在现代的C#中仍然很流行。以下面的IDateProvider接口为例。 public interface IDateProvider { DateTime GetDate () ; } 没有什么特别的，现在设想两个实现 - 其中第一个隐式实现如下： public class DefaultDateProvider : IDateProvider { public DateTime GetDate () { return DateTime.Now; } } 第二个显示实现是这样的： public class MinDateProvider :

前端自定义确认提示框（二）

阅读更多关于前端自定义确认提示框（二）

上一篇有自定义提示框，前端自定义弹出框-提示框（一），这篇推荐一个确认框的实现。 JS默认确认框确认框 var result=confirm('确认删除XX文件？');result为bool类型回复确认框 var result=prompt('请输入文件标题：');result返回输入的值自定义确认框下文提供一个自定义提示框的案例，通过另一种方案（样式设置）来实现： 1 <div class="confirmWindow" id="confirmwindow"> 2 <div class="body"> 3 <div class="content">确认要删除XX文件么？</div> 4 <div class="btns"> 5 <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick="cancelOnClick()">取消</a> 6 <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick="okOnClick()">确认</a> 7 </div> 8 </div> 9 </div> 通过js设置元素的display属性，来控制提示框的显示隐藏 document.getElementById(

uniapp实现微信小程序商品分类侧边栏效果

阅读更多关于 uniapp实现微信小程序商品分类侧边栏效果

前言：微信小程序的代码实现，uniapp与原生代码差异不大，语法格式可对比swiper实现的原生代码和scrollview实现的uniapp代码。参考资料：微信小程序api>> https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 获取元素/组件与顶部的距离>> https://www.jianshu.com/p/fe72cff2b808 swiper实现的简易demo>> https://blog.csdn.net/weixin_41599291/article/details/93650074 功能实现：右侧滚动，左侧会对应高亮显示；左侧是否重复点击，右侧显示相应数据，置顶；实现思路：围绕 scroll-view 组件的 scroll-into-view 和 scroll-top 属性展开巨坑： for(let i in this.topList) 中的 i 属于字符串，执行计算操作时必须先转数字 int 效果图：代码： <template> <view> <view style="text-align: center;">搜索栏</view> <view class='productNav'> <view class='left'> <view :class=

订阅 Solid