export default { data() { return {} }, methods: { moused...
width:100%; height:auto; display: block; } div...class="container"> div class="left"> div class="imageBox"> div...> div> div> 正常写个demo是可以打开且正常显示的，但是在某些时候（可能是在配置了打包编译等情况），发现图片无论如何好像都在最底下我们看不到的位置展示
div块级元素 div是一个特别重要的标签 是块级元素 上代码，看图！...red;"> div style="width: 400px;height: 400px;background-color: green;">div> div> div...可以看出div其实自带了换行效果 但是如果我们需要第一行有两个块怎么办呢 浮动和定位 浮动 常见为左右浮动 float: left/right 大家看出来英语很重要了吧 用法如下 div> div style="width: 100px;height: 100px;background-color: green;float: left;">div>...如果把每一块内容实现 就是一个页面了 一个好看的网站往往都会有好看的布局，所以学会div的使用以及浮动和定位是很重要的 有兴趣的小伙伴可以试着截你喜欢的网站的图 拼装一个去装逼哦，但是要注意不要侵权哦
(adsbygoogle = window.adsbygoogle || []).push({});
DOCTYPE html> div > div style="float:left;width:50% ;background-color:red">...key1: div> div style="float:right...> div> div style="padding-left:10%">22div> div > div style="float:left;width:50% ;background-color...:red"> key111111: div> div...> div> div > div style="float:left;width:50% ;background-color:red"> <span style="float
> div> div> div> div> div> div> <!...#fff; min-width: 1200px; /*height: 3000px;*/ } .clearfix:before, .clearfix:after { /*清除浮动...display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法
8.浮动 float float 属性值通常会用到这两个：left right 浏览器默认是按照标准文档流从上到下，从左到右布局绘制各个元素，此时这些元素可以说位于同一个层面，但当碰到元素设置了 float...然后它继续处理 div2 元素，因为之前处理的 div1 元素是浮动元素，不占用文档流，所以此时仍旧是在第一行左边绘制 div2 元素，发现它是一个块级元素，所以让其霸占一整行。...所以此时看到的效果就是，浮动元素 div3 是在块级元素 div2 下。...继续往下处理，如果发现的还是浮动元素，因为所有的浮动元素都处理同一层面，所有的文档流元素都处于一个层面，所有浮动元素 div4 并不会跟 div3 发生重叠，而是贴着它。...总结一下，这个属性有几个特性： 属性值大的位于上层，属性值小的位于下层 z-index 值没有单位，就是一个正整数。
这种方式也可以直接运行在 Github Pages 下。...总结的来说，实际的目标起码需要满足以下两点： 目标一：目录位于正文右侧（或左侧），且当内容滑动时目录位置固定不变。 目标二：目录在宽屏时自动显示，在窄屏或移动端分辨率不足时自动隐藏。...Div 布局比较让人头疼的地方是，页面中有很多浮动元素出现时，可能会出现各种各样想象不到的问题，某些布局之后被迫要清除浮动。...Flex 布局的出现为 Div 布局提出了改善，使得页面布局不再被浮动元素和 Div 层浮动时内容大小为零所困恼。 ...在没有 sass 编译环境下，此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!
当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的，行盒会缩短并给浮动元素让位。 ? 写一下我理解的行盒的概念。...4.浮动会脱离普通流 普通流中所遵循的规则是块级元素占据一行，行内元素占据内容的宽度。所有元素从上到下依次排列，普通元素可以把父元素的内容撑开。...demo链接描述 /li里面的元素全部浮动的情况下，.navbar的高度为0，所以设置背景色无效 ? 四：清除浮动 (1)clear属性 clear可以用于任何元素，无论是不是浮动元素都可以加。...clear: left; 官方解释：要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方 不正经的理解：如果我前面有左浮动元素，我必须位于它的下方 clear...: right; 官方解释：要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方 不正经的理解：如果我前面有右浮动元素，我必须位于它的下方 clear:both
CSS进阶内容—浮动和定位详解 我们在学习了CSS的基本知识和盒子之后，就该了解一下网页的整体构成了 当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS的三种布局流派...我们使用浮动当然是因为一些要求我们的标准流无法完成 我们使用浮动最常见的应用场景就是将多个块级元素div等并排放置 （纵向排列标准流，横向排列找浮动） 初见浮动 那么我们来介绍一下浮动： 浮动的目的是创建浮动框...> div>div> div>div> 浮动特性 我们再来讲解一下浮动的特性： 浮动特性会脱离标准流 脱离标准流的位置，并且盒子不再保留原本的位置...，对前面标准流盒子不做影响，但后面的标准流盒子会压住浮动盒子，所以只对后面标准流盒子做影响） 浮动清除 首先我们介绍一下为什么要清除浮动： 因为内容不同可能导致父类盒子高度不确定，只能由子盒子来撑开父亲...（top=0），导航栏不再跟着页面滑动而滑动 */ .nav { width: 200px; height: 100px;
_1 { /* fixed定位：元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说， 是固定的，无论你怎么滑动窗口，它都在那儿雷打不动。...{ /*和flex定位有些相似，但是又有些不同 sticky是粘的意思，一开始可以自由滑动，当到一定位置时就会在那里不动。...先自由滑动，到一定位置就固定在那里不动。...浮动 4.1 示例图 4.2 代码 浮动 --> div class="main"> div class="child">div> div class="child
box2跑到右边去了，box3紧跟在box1下面。...class="box box3 float-left">3div> div> 效果1：空间足够时，分别位于屏幕两侧 ?...效果2：空间不足时，位于下发的元素会另起一行 ? 浮动的元素不会“干”在一起，『手动滑稽』 清除浮动 我们知道，一个块级元素如果没有设置height，其height是由子元素撑开的。...例：上面提到仅box2浮动时，box3会紧跟在box1下方，可能被box2盖住。如下图： ? 如果不想被box2盖住，怎么怎么办？...这种情况下margin-top失效的原因 解决办法2：BFC BFC全称block formatting context，中文为"块级格式化上下文"。
内容提要： li浮动时ul高度为0，解决ul自适应高度的几种方法 在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达到预期效果...那么这里我就来讲解一下解决这个问题的几种方法。 在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达 到预期效果。...那么这里我就来讲解一下解决这个问题的几种方法。...2.添加一个空的div 添加一个空的div，这个div和浮动元素同一级别，且位于浮动元素的最后。...--新添加的空div，它和浮动元素同一级别，且位于最后--> 3.添加zoom属性，适用于IE IE支持一个CSS属性zoom，当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了
（4）相对定位 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...="box3">3div> div> 7.3 清除浮动 （1）为何要清除浮动 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响...（3）常见清除浮动方法 ①使用空标记清除浮动，隔墙放->增加一个空标签 .clear { clear:both; } div class="clear"> div> ②使用overflow...class="wrap"> 旅行 div> 8.3 CSS滑动门技术 ...（2）CSS滑动门 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
（4）相对定位 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...="box3">3div> div> 7.3 清除浮动 （1）为何要清除浮动 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响... ①使用空标记清除浮动，隔墙放->增加一个空标签 .clear { clear:both; } div class="clear"> div> ②使用overflow属性清除浮动-...class="wrap"> 旅行 div> 8.3 CSS滑动门技术 ...（2）CSS滑动门 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
在布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置的 , 为父容器的三个子元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素的宽度..., 如果子元素横向累加宽度超过 当前宽度 , 会自动换行 , 因此这里为每个子元素设置一个 1/3 宽度 , 即 33.33% ; 子元素 div> 设置浮动和宽度的样式如下 : .brand div...{ /* 设置 .brand 父容器下的 div 盒子左浮动 这样这些盒子可以在水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3...-- Banner 栏滑动图 --> div class="slider"> ...{ /* 设置 .brand 父容器下的 div 盒子左浮动 这样这些盒子可以在水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3
二、滑动门效果 概念：3个盒子浮动，左边和右边写宽高，负责加载两边的背景，中间的盒子宽度不定，让文字撑开 滑动门 .box{ height:33px; margin-left:300px; } .box div{ float:left...center.png); } .right{ width:17px; background:url(img/right.png); } div...class="box"> div class="left">div> div class="center">这是文字进来了div> div class="right">div...> div> image.png 字间距 单词间距
1、CSS的三种定位机制 CSS 规定的定位机制有三种，分别是： 标准文档流（Normal flow）： 特点：从上到下，从左到右，输出文档内容。...在三维空间中，盒子模型由上到下分为五层： 边框（border）位于第一层； 内边距（padding）和盒子中的内容（content）位于第二层； 背景图像（background-image）位于第三层；...背景颜色（background-color）位于第四层； 外边距（margin）位于最后一层。...浮动的框可以左右移动（根据float属性值而定），直到它的外边缘 碰到包含框或者另一个浮动元素的框的边缘。 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。...但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。
被埋没的志向——文字环绕 回忆一下我们一般什么时候会想用浮动呢？是多列布局还是多列布局呢:)？其实它向往的却是这个 ? ...to: all Inherited: no 当设置float:left后，元素对应的margin left edge会尽可能向所属的containing block的左边框靠近，若同一行中存在位于左侧的元素设置了...文字是以字形(glyph)的形式渲染，和它同一行的inline-level boxes均位于同一个line box中。...但位于同一个stacking context中的浮动定位的盒子虽然和常规流中的盒子拥有相同的z-index(都是auto)，但浮动定位的盒子拥有额外的优先级，导致它总位于常规流中的盒子之上。...是"浮动闭合"还是"清除浮动"？ 我想各位都看过各种版本的clearfix实现，而最简单粗暴的方式就是添加一个div style="clear:both">div>来清除浮动。
: 30px; top: 20px; } 1.1.5 sticky定位方式# 粘性定位，和fixed定位有些相似，但是又有些不同，一开始可以自由滑动，当到一定位置时就会在那里不动。...先自由滑动，到一定位置就固定在那里不动。...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...清除浮动： clear：both 因为float定位他是浮起来的嘛，这个位置就是空的，而clear：both会清除浮动，默认为正常的文档流，这样后面的元素就可正常排列了（可以自己在代码中去体验）。...-- 浮动 --> div class="main"> div class="child">div> div class="child">div> div class="clear
云服务器
ICP备案
云直播
对象存储
即时通信 IM
