margin | 易学教程

关于css塌陷问题及浮动清除问题的解决

阅读更多关于关于css塌陷问题及浮动清除问题的解决

关于css塌陷问题及浮动清除问题的解决一. css塌陷问题(包括边界塌陷和高度塌陷) 1.上下相邻div边界塌陷 2.父级容器和子级容器的上边界塌陷 3.子div浮动导致父div高度塌陷二.清除浮动的5种方法三.实验代码一. css塌陷问题(包括边界塌陷和高度塌陷) 1.上下相邻div边界塌陷对于上下两个相邻的div而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里较大值作为显示值。解决办法(可能还有别的)： ①.只设置上div的margin-bottom或下div的margin-top ②.使用padding代替margin实现同样的效果 ③.设置上div 或下div样式为 display: inline-block; 但不要同时设置(否则可能会并列)。 ④.设置下div浮动(尽量别用，不然可能会影响布局) 2.父级容器和子级容器的上边界塌陷如果父级div没设置border,padding或内容，子级div的margin会一直向上找，直到找到某个标签包含border,padding或内容，然后按照此div进行margin。解决办法： ①.父级设置border，可以设置为透明(transparent)。 ②.父级设置padding-top。 ③.父级设置overflow:hidden属性 3

vue 组件系列-dataloading

阅读更多关于 vue 组件系列-dataloading

// referenced: https://github.com/bedlate/vue-data-loading <template> <div class="vue-data-loading"> <div class="loading-header" :style="{height: pullHeight + 'px'}" v-show="PULL_DOWN === pull.type"> <div class="header-text" v-show="!pull.available"> <slot :name="PULL_DOWN + '-before'">下拉刷新数据</slot> </div> <div class="header-text" v-show="pull.available && PULL_DOWN !== loadingType"> <slot :name="PULL_DOWN + '-ready'">松开刷新数据</slot> </div> <div class="header-text" v-show="PULL_DOWN === loadingType"> <slot :name="PULL_DOWN + '-loading'">刷新中...</slot> </div> </div> <div class="loading-content">

少量代码设计一个登录界面（二） – .NET CORE(C#) WPF开发

阅读更多关于少量代码设计一个登录界面（二） – .NET CORE(C#) WPF开发

原文: 少量代码设计一个登录界面（二） – .NET CORE(C#) WPF开发微信公众号： Dotnet9 ，网站： Dotnet9 ，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。阅读导航本文背景代码实现本文参考源码 1. 本文背景同上篇文章《少量代码设计一个登录界面》，本篇介绍另一种登录界面设计风格。 2. 代码实现使用 .NET CORE 3.1 创建名为 “Login” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes.3.1.0-ci981。解决方案主要文件目录组织结构： Login App.xaml MainWindow.xaml MainWindow.xaml.cs 2.1 App.xaml文件引入样式文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件： <Application x:Class="Login.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx

两个同一行的元素的对齐

阅读更多关于两个同一行的元素的对齐

背景：我把两个div设置成了inline-block，于是这时是默认在同一行的，但是这时候的图片的大大小会导致两个在视觉上不在同一条水平线上。刚开始我是对单个的设置margin-top属性，但是发现两个div同时下降了，原来是inline-block会迷人这两个div会在同一个水平线上，设置了margin-top就会使两个同时下降。这时候就想到了将这个脱离文档流来设置高度，即position属性设置为absolute。来源： CSDN 作者：慢慢来呗不急链接： https://blog.csdn.net/zzj19990913/article/details/104161657

小游戏-猜数字

阅读更多关于小游戏-猜数字

效果图：游戏说明：浏览器随机生成0-100以内的一个数字，在输入框中填写你猜测的数字，猜测范围是0-100以内的正整数哦！有十次机会猜测，且在这十次猜测中都会对每次的猜测数字进行提示。。代码 html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>猜数字小游戏</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div class="content start"> 10 <h1>猜数字小游戏</h1> 11 <h4>请在输入框中填写你猜测的数字，猜测范围是0-100以内的正整数哦！</h4> 12 <div class="cont1"> 13 <label for="clientNum"><b>输入数字：</b></label> 14 <input type="text" id="clientNum"> 15 <button>监测</button> 16 <p></p> 17 </div> 18 <div class="cont2"> 19 <b>猜测提示：</b> 20 <span></span> 21 <!-- <span class="info-up"

CSS——05-核心：盒子模型1

阅读更多关于 CSS——05-核心：盒子模型1

人生苦短，要学就只学有用的【前端教学-CSS-5】 CSS核心-盒子模型盒子模型（CSS重点） css学习三大重点： css 盒子模型、浮动、定位目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 1.看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？看透网页布局的本质：首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步就是网页布局的本质我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白这个盒子有什么特点。 2. 盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。总结：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是内容区域盒子的厚度我们成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

4. int()和float()从字符串中取值误区

阅读更多关于 4. int()和float()从字符串中取值误区

<!DOCTYPE html> Untitled3 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

3. 成员运算符in 误区

阅读更多关于 3. 成员运算符in 误区

<!DOCTYPE html> Untitled1 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

少量代码设计一个登录界面（二） – .NET CORE(C#) WPF开发

阅读更多关于少量代码设计一个登录界面（二） – .NET CORE(C#) WPF开发

微信公众号： Dotnet9 ，网站： Dotnet9 ，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。阅读导航本文背景代码实现本文参考源码 1. 本文背景同上篇文章《少量代码设计一个登录界面》，本篇介绍另一种登录界面设计风格。 2. 代码实现使用 .NET CORE 3.1 创建名为 “Login” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes.3.1.0-ci981。解决方案主要文件目录组织结构： Login App.xaml MainWindow.xaml MainWindow.xaml.cs 2.1 App.xaml文件引入样式文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件： <Application x:Class="Login.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml">

CSS盒子模型1.0

阅读更多关于 CSS盒子模型1.0

CSS盒子模型什么是盒子模型网页是由多种不同的盒子构成的，所有说盒子是网页布局的关键点盒子分为哪三个部分边框（border）内边距（padding）外边距（margin）边框border -盒子的厚度宽度border-width 样式border-style 分为4种 – 没有边框border-style：none； — 边框为单实线：border-style：solid； –边框为虚线：dashed； – 边框为点线：dotted；颜色border-color 以上内容可简写为 border：7px solid red；边框还可以分为为以下四种边框 -----border-top 上边框 ----border-bottom 下边框 -----border-left 左边框 –border-right 右边框其他用到边框的地方 —表格的细线边框 border-collapse：collapse 内边距padding — 盒子内部的距离 padding: 10px;-------上下左右都为10 padding: 10px 20px-----上下10 左右为20 padding: 10px 20px 30px----上为10 左右为20 下为30 padding: 10px 20px 30px 40 px ----上为10 右为20 下为30 左为40 注意

订阅 margin