display:”block” 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...取值方式： left：向左浮动 right：向右浮动 none：默认值，不浮动 详情参考： clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。...-- 顶部导航栏 结束 --> View Code 后台管理布局 将整个页面分为特定的几个区域分别进行编辑 常用的布局方式之一 重要 <!
浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。...实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管把元素的宽度设置多窄。...浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。...如果取值为 0，那么边框线将会被隐藏；如 果取值为 1，边框线将会显示。在 frameset 中设置将会对整个框架有效，在 frame 中设置则 只对当前这个框架有效。...但是在 浮动框架中，是插入到普通 HTML 页面中的，可以调整整个框架的大小。
CSS进阶内容——布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容，但仍有一些内容我们没有涉略，这篇文章就是为了补充前面没有涉及的内容，为我们的知识做出补充并且介绍一些布局技巧 当然...： vertical-align：bottom；（默认） 以上vertical-align常用于使表单内的图片与文本对齐 图片底部空白问题 问题来源： 当我们插入图片时，图片并非紧贴框架，当你设置border...这时我们就可以采用margin方法使整体向左移动，使边框进行覆盖，从而减小边框粗细程度 我们给出案例解释： 变色压制性 在上方我们使用margin去除掉边框变粗问题后 如果我们希望在hover该盒子后使边框发生颜色变化，但后方边框会压住前方边框导致效果失效 所以我们给出两种方法来解决： 使用相对定位... 文字围绕浮动元素 当我们文字和图片同时使用时，为了防止图片压住文字导致文字显示不全，我们常常采用文字围绕图片的形式 而实现这一目的的主要解决方法是采用float的浮动原理
浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。...浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。...如果取值为 0，那么边框线将会被隐藏；如 果取值为 1，边框线将会显示。在 frameset 中设置将会对整个框架有效，在 frame 中设置则 只对当前这个框架有效。...玛亚的遭遇使她无法面对与罗伊的婚姻及罗伊家族的显赫地位。她来到滑铁卢桥，毫无畏惧地向一辆辆飞驰的军车走去。 完成了两个页面文件之后，就开始设置浮动框架页面的内容。...但是在 浮动框架中，是插入到普通 HTML 页面中的，可以调整整个框架的大小。
Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流） 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。...absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。...（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3....放在 head 中 你能看到 html 第一时间被加载进来，但页面 body 内容迟迟没有渲染出来。因为在等待 head 标签中 script 脚本的加载，3 秒后，整个页面渲染完成。...总结： 脚本会阻塞页面的渲染，所以推荐将其放在 body 底部，因为当解析到 script 标签时，通常页面的大部分内容都已经渲染完成，让用户马上能看到一个非空白页面。
相对定位:position: relative; 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...绝对定位:position: absolute; 绝对定位使元素的位置与文档流无关，因此不占据空间。...因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。...固定位置:position:fixed; 直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止...img{ float:right; } left -> 元素向左浮动 right ->元素向右浮动 none ->默认值。元素不浮动，并会显示在其在文本中出现的位置。
space以相同的间距平铺且填充整个容器 背景图片定位background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动 background-attachment...垂直对齐文本的上标，和sup标签一样的效果 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐...边框颜色outline input文本框自带边框，且样式丑陋 outline:none清除边框 样式重置 清除元素的margin和padding 去掉自带的列表符 去掉自带的下划线 盒模型样式 块状元素...下描边border-bottom 上描边border-top 右描边border-right 左描边border-left 间距margin 内填充padding 浮动float 浮动原理：浮动使元素脱离文档普通流...，漂浮在普通流之上的 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或向右浮动， 知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它 浮动会产生块级框
值 意义 display:"none" HTML文档中元素存在，但是在浏览器中不显示，一般用于配合JavaScript代码使用 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止； 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。...三种取值： left：向左浮动 right：向右浮动 none：默认值，不浮动 参考示例 4.4 clear clear属性规定元素的哪一侧不允许其他浮动元素。...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。...这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是定位流，但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 参考示例 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。...这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。...这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
浮动的特性： 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。...如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上...块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上 clear属性 clear属性：确保当前元素的左右两侧不会有浮动元素。...不会触发其点击事件 visibility:hidden 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。...和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动?...3 . fixed（固定）不管页面怎么动，都在整个屏幕的某个位置 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动...这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。 CSS 语法 先来实例。...在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表。...+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 浏览器的兼容性问题 一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容...position:absolute; left:0px; top:0px; z-index:-1; } CSS Float(浮动) CSS 的 Float（浮动），会使元素向左或向右移动...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。
{ margin-left: 30%; /* 导航栏下的ul标签与左侧距离为导航栏宽度的30% */ } .nav li{ float: left; /* 导航栏下的li标签整体向左浮动 */ list-style...>ul{ display: block; /* 点击导航栏下的第一级li时显示隐藏的第二级li标签内容，行内元素变块元素*/ } .article{ width: 80%; /* 主体内容宽度为整个网页...，达到使右边内容栏与左侧菜单栏同在一行的目的*/ background-color: #c4abca; /* 左侧菜单栏的底色为#c4abca */ } .aside ul{ margin-top: 20%...section{ width: 80%; /* 右侧内容宽度为主体内容宽度的80%*/ height: 600px; /* 右侧内容栏高度为600像素 */ float:right; /* 右侧菜单栏整体向右浮动...>特性： 1) 与其他行内元素共享一行空间 2) 默认宽高由内容决定 3) 不能为其指定宽和高 4) 行内元素中不可以嵌套块元素 但块元素中可以嵌套行内元素
> 1 2 3 ul> 7、dispaly属性 none...Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。...） CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...position 属性的四个值： static relative fixed absolute 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。
头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods 导航 nav 导航左侧 dropdown 包含 .dd .dt 导航右侧 navitems 页面底部...footer 页面底部服务模块 mod_service 页面底部帮助模块 mod_help 页面底部版权模块 mod_copyright 1). nav 导航栏制作 ?...nav 盒子通栏有高度 而且有个下边框 1号盒子 左侧浮动 dropdown 下拉导航 里面包含 dt dd 2号盒子右侧浮动 navitems 导航栏组 ? 2). footer 底部制作 ?...footer 页面底部盒子 通栏 给一个高度 灰色的背景 footer 里面 首先一个 大 的版心 版心里面包含 1号盒子 mod_service 服务模块 module 模块的意思 版心里面包含 2号盒子...注意，这里我们 分为 上下两个模块， 但是 两个模块 都用div 1号 盒子 news-hd 新闻头部模块 给一个 高度 和 下边框 2号 盒子 news-bd 新闻主题部分 里面 包含 ul 和 li
元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。...浮动的影响 浮动元素会使得父级元素高度塌陷 html: ul> ul> css: * { // 实际项目中不要用通配符...由于浮动元素脱离文档流，不再占据原来的文档流空间，不能撑开父级的内容，所以父级的高度就不存在了。 下面我们将介绍清浮动的两个大类。...html: ul> ul> css: * { margin...{ overflow: auto; // 使浮动元素的父级成为BFC就行可以实现清浮动 } 效果如下图： ?
绘制矩形框中的部分 : 一、网页底部盒子模型测量及样式 ---- 1、盒子布局说明 底部盒子主要由如下部分组成 : 红色盒子 : 最外层盒子 水平方向 充满整个 浏览器 , 背景是白色 ; 蓝色盒子...在 网页底部右侧 , 这里设置右浮动 ; /* 整个链接模块盒子 右浮动 */ .links { float: right; } 列表项 标题 16 像素 , 颜色值 #666666 ; /* 列表项...} /* 导航栏内部 的 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中的链接样式 */ ....nav ul li a { /* 显示模式 块级元素 */ display: block; /* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */ height: 40px...此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为 50 像素高度*/ height: 50px; /* 设置底部边框
浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行...4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸...首先将基本页面写出来瞧瞧先，如下： ? 可以从上图看到，里面的两个div是挨在一起的，那么如何设置两个div左右两边对齐呢？...首先先把基本页面写上，这次使用ul配合超链接a标签来编写，如下： ? 下面来改改li标签的样式，例如去掉小点，设置一下浮动左右对齐，如下： ?...其实第一步就是要设置图片 float 起来，然后文字设置好边框看看即可，下面先搭好框架来看看，如下： ? 给图片设置float:left来看看效果： ?
--底部--> 然后再使用CSS的样式规定具体的布局颜色: *{...> 然后通过CSS样式来调整 /*先去掉列表前的小圆点*/ .nav ul { list-style-type: none; } /*让列表项左浮动，以便导航项可以横向排列，同时设置右外边距，...这个时候很容易就产生一种想法，随着边框的加粗，最终上下或者左右边框完全占据元素的所有空间，而另一侧为空，那么就可以产生一个类似于箭头的效果，根据这个想法，我们再修改一下上面的CSS代码 .div1{...下面是箭头最终的CSS代码 /*方向向右的小箭头*/ .arrow{ float:left; background-color:#fff; width:0; height...，但是也是有一些不足的地方： 页面中几乎每一个元素写了它的属性，而且有的属性是几乎类似的，代码只是简单的完成了页面没有考虑到重用 页面是静态的，简单的利用HTML+CSS来做展示，没有交互的东西，而原始的模板是有的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
