-
css相对布局和绝对布局的案例
2018-10-31 10:41:20今天学习了一下css，感觉要记录一下常见案例。 简单的商品展示布局，如图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=&...展开全文今天学习了一下css，感觉要记录一下常见案例。
简单的商品展示布局，如图：
代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .box1{ width: 275px; height: 283px; border: 1px solid #ff7e00; margin: 100px; position: relative; } .box1 .image img{ width: 275px; height: 175px } .dtc{ width: 52px; height: 28px; background: url("assets/img/icons.png") no-repeat -108px 0; left: 9px; top: -9px; position: absolute; } .myy{ width: 52px; height: 28px; background: url("assets/img/icons.png") no-repeat -54px 0; left: 61px; top: -9px; position: absolute; } .xd{ width: 52px; height: 28px; background: url("assets/img/icons.png"); left: 113px; top: -9px; position: absolute; } .box1 h3{ width: 275px; height: 36px; line-height: 36px; background: #000000; color: #ffffff; font-size: 14px; top: 139px; position: absolute; opacity: 0.9; } .box1 h4{ font-size: 14px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .txt{ overflow: hidden; text-overflow:ellipsis; font-size: 14px; } .price{ width: 275px; height: 36px; line-height: 36px; padding: 0 15px; position: absolute; bottom: 15px; } .price .new { color: #ff7e00; } .price .new span{ font-size: 24px; } .price .old{ color: #8c939d; } .price .sold{ float: right; padding-right: 30px; color: #8c939d; } .price .sold .sold_num{ color: #ff7e00; } </style> </head> <body> <div class="box1"> <span class="dtc"></span> <span class="myy"></span> <span class="xd"></span> <p class="image"> <img src="assets/img/mm.jpg"> </p> <h3><span style="padding-left: 15px;">奶茶</span></h3> <h4><span style="padding-left: 15px;">奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶</span></h4> <div class="txt"><span style="padding-left: 15px;">奶茶奶茶奶茶奶茶奶茶奶茶奶茶</span></div> <div class="price"> <span class="new">￥<span>85</span></span> <del class="old">￥100</del> <span class="sold">已售<span class="sold_num">10</span></span> </div> </div> </body> </html>所需的图标：
-
【CSS】CSS经典布局之绝对底部布局
2018-01-09 11:48:23转载自：CSS经典布局之Sticky footer布局 何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区...展开全文
何为Sticky footer布局？
我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。
Sticky footer布局实现
一、负 margin 布局方式
<div class="detail"> <div class="wrapper clearfix"> <div class="title"> <h1>这里是头部</h1> </div> <div class="main"> <p>这里是main content区域...</p> <p>这里是main content区域...</p> <p>这里是main content区域...</p> <p>这里是main content区域...</p> </div> </div> </div> <div class="footer"> <p>© 2017 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </div>！！！特别说明！！！：使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。
* {margin: 0; padding: 0; text-align: center;} html,body,.detail {height: 100%;} body>.detail {height: 100%; min-height: 100%;} .main {padding-bottom: 64px;} .footer {position: relative; margin-top: -64px; height: 64px; clear: both; background-color: red;} .clearfix::after { /* 测试于两栏悬浮布局 */ display: block; content: "."; height: 0; clear: both; visibility: hidden; }PC端效果图：
移动端效果图：
二、flex 布局方式
<header> <h1>Site name</h1> </header> <div class="main"> <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> <p>Bacon Ipsum dolor sit amet...</p> </div> <footer> <p>© 2017 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </footer>* {margin: 0; padding: 0;} body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto;} h1{font-size: 60px; text-align: center;} p{font-size: 24px; text-align: center;} .main{flex:1;} /* 若不懂请看本文末尾的链接 */ footer{background-color: red;}PC端效果图：
移动端效果图：
flex布局结构简单，代码精简。因为flex存在着兼容性，所以在使用这种方式布局时需要注意。
若不懂flex: 1;请跳转 【CSS】由 flex: 1; 引发的思考
-
css布局绝对定位下margin失效的解决方法
2020-12-09 08:39:27如果是要垂直居中，也是一样的方法，即设置top:50%,然后margin-top的值为层的高度的一半 position:absolute; left:50%; top:50%; margin-top:-13px; margin-left:-58px; width:116px; height:25px;... -
CSS中的绝对布局
2016-10-03 21:52:30元素3 被设置成绝对定位，代码如下：一定要注意，局对定位的元素是相对于父节点而言被设置成绝对定位的元素会被流完全忽视，并且绝对定位的元素的边界不会影响其它块元素中包含的内联元素的流向FR：徐海涛（Hunk Xu)展开全文最后效果如下：
元素3 被设置成绝对定位，代码如下：
一定要注意，局对定位中上右下左是相对于父节点而言
被设置成绝对定位的元素会被流完全忽视，并且绝对定位的元素的边界不会影响其它块元素中包含的内联元素的流向
FR：徐海涛（Hunk Xu)
-
CSS网页布局
2021-01-19 19:05:03CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对... -
CSS分栏布局的方法:绝对定位和浮动
2020-09-27 10:16:50在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的... -
CSS之页面布局之四（绝对布局）
2014-11-17 13:11:59绝对布局（Absolute Layout）和冻结布局（Frozen Layout）间的就是凝胶布局（Jello Layout）展开全文绝对布局（Absolute Layout）就是指定元素的position属性为absloute，元素被指定为绝对定位后，浏览器会将其从流中删除。
与浮动布局不同（请参照前面的博文《CSS之页面布局之一（浮动布局） 》），浮动布局中浮动起来的元素，只是“半删除”。即对HTML端的块元素来说浮动起来的元素仿佛从流中被删除了。但对HTML端的内联元素来说浮动起来的元素仍旧存在。
绝对布局就不是“半删除”了，而是从HTML流中彻底删除该元素。被删除的元素和原始HTML流中其他元素，处于不同层面，这就产生了分层的概念。
实现方式：CSS端为元素的position属性设成absolute，并指定top，right，width等属性（即告诉浏览器窗口在何处显示该元素）
CSS端为<p id="absoluteLayout">设置position，top，right，width：
#absoluteLayout { position: absolute; //绝对定位 top: 100px; right: 200px; width: 280px; }
如上图中，黄色框的<p>元素，与其他元素处于不同的层面上。页面可以有多个分层，每个分层都有个z-index属性，值越大越靠近你通过z-index来控制显示哪个层。因此如果想隐藏绝对定位的元素，只需要将该元素的z-index设为负数即可。绝对定位的元素很可能会覆盖不想被覆盖的区域。而此时你无法像浮动布局（请参照前面的博文《CSS之页面布局之一（浮动布局） 》）那样指定clear属性，因为流中元素完全不知道绝对定位元素的存在。
absolute导致分层后，那该元素显示的位置该如何确定呢？即该元素该依据哪个定位点来定位？分两种情况：
1.该元素的parent元素也设置了position的ababsolute或relative，那该元素的定位点就是其parent元素左上角（准确地说是parent元素的padding的左上角，非margin的左上角）
2.除情况1外，该元素的定位点就是浏览器窗口左上角（即body的左上角），此时效果和设成fixed是相同的。因此fixed可以认为是一种特殊的absolute
PS：
position除了absolute还有：
position:static默认值，元素默认都是static，即元素在正常的流中
position:fixed是固定定位，相对于浏览器窗口进行定位，一旦用固定定位它就永远留在了该位置，即使鼠标滚动，它也原地不动。你可以这样理解：fixed是特殊的absolute，即fixed总是以body为定位对象的。
position:relative与绝对定位类似，只是它仍旧在页面流中（还在它本来的位置上），然后根据你指定的top，left，right，bottom来相对于其本来应该处于的位置进行偏移。
-
css常用布局多行多列
2020-12-29 06:59:10CSS布局常用的方法：float : none | left | right 取值： none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: <div id=warp> 这里是第... -
CSS实现网页分栏布局的方法：绝对定位和浮动
2020-09-27 17:59:42网页制作Webjx文章简介：在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置... -
CSS网页布局教程:绝对定位和相对定位
2020-12-07 10:42:07CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！ 概要： 本文主要描述XHTML中相对定位和绝对定位... -
CSS网页布局的好处与坏处
2021-01-21 12:35:55随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV CSS制作方法，jb51.net也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。 如今大部分... -
CSS相对布局和绝对布局
2015-12-23 23:10:00relative 相对布局，正常的，从上到下。绝对布局absolute，就像不占位置，透明了一样，会和别的重合 转载于:https://www.cnblogs.com/yangAL/p/5071641.html -
CSS网站布局实录 （第二版）PDF版
2012-12-10 18:46:01《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计... -
CSS实现多行多列的布局的实例代码
2020-12-29 23:18:27box1:实现两列多行布局 <li>111 <li>222 <li>333 CSS: .box1 { width: 500px; background: #EEEEEE; } .box1 ul { clear: both; overflow: hidden; } .box1 ul li { width: 48%; height: 100px; ... -
深入理解css布局之定位与浮动
2020-12-03 10:31:10在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时... -
CSS学习之五 定位布局
2020-12-03 06:55:04一、定位属性的基本情况 使用position属性对元素进行定位： position属性 值：static | absolute | fixed | relative 初始值：static运用范围：所有元素继承值：无计算值：根据指定确定 static：元素框正常生成。... -
CSS 网页布局网页制作技巧总结
2020-12-12 15:39:34CSS网页布局开发中，会有很多小技巧，这之类相关的文章在jb51.net有许多介绍，这里再扩展一下您所想要得到的知识，相信您会有很多收获！ 一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二... -
CSS网页布局开发小技巧24则
2021-01-21 12:28:21在CSS网页布局开发中，会有很多小技巧，新手朋友往往对此很不熟悉。在某一两个小问题上，或许纠缠很长时间才能搞明白，虽然在jb51.net的文档中，多次提及过这方面的内容，但依然有很多朋友在这些问题上犯错。我们... -
适合新手的CSS网页布局小技巧整理
2020-12-10 14:34:43对CSS网页布局的技巧，可谓是名目繁多。这里将适合新手的CSS网页布局的小技巧总结出来，或许对您更有实际的参考价值： 1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 2、同一个的class选择符... -
css中间自适应布局的5种解法详解
2020-12-14 01:02:17在做页面时，我们往往会碰到页面布局相关的内容，面试时也经常会被问到，那么今天我就来总结一下关于页面布局的内容。 问题：如何实现三栏布局（高度固定，左中右的结构） 假设高度已知，请写出三栏布局，其中左右... -
css常见布局
2018-01-04 23:01:56一般一个浮动，另一个设置margin，或者一个绝对定位，另一个设置margin，代码如下（浮动方法) style> .left{ float: left; width: 200px; background: green; height: 200px; } .right{ -
CSS布局基础BFC
2021-01-21 13:39:06但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素... -
CSS网页布局：关于定位（position）
2021-01-19 20:40:18使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。... -
css网站布局实录学习笔记第三部分网页布局与定位
2020-12-13 03:29:33第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位，而div首当其冲。对于其他标签而言，往往有它自身存在的目的，而div元素存在的目的就是为了浮动与定位。 3.1.1 div是什么 div是XHTML... -
CSS布局--布局模型
2018-07-05 16:19:44前言：在网页中，我们经常运用CSS来进行布局，那么，CSS常用的布局模型有哪些呢？今天，我们就来了解一下吧。在网页中，元素有三种布局模型：①流动模型（Flow）默认的；②浮动模型(Float)；③层模型（Layer）。 一...
收藏数
59,728
精华内容
23,891