display属性

功能：规定网页元素如何显示；
取值：none(隐藏)，block(以块元素显示)，inline(以行内元素显示)；
block:可以实现将行内元素转换为块元素；
inline:可以实现将块元素转成行内元素；

overflow属性：当内容溢出时如何显示

overflow取值：当内容溢出时，溢出的内容该如何显示，取值：visible(可见)，hidden(隐藏),scroll(出现滚动条)，auto(自动)；

cursor光标类型

cursor:网页中光标的类型
取值：text（文本型）,help（帮助型）,wait(加载型),hand（IE浏览器支持的手形光标）,pointer(通用的手形光标)，等等

CSS定位

position:元素定位方式，取值static,fixed,relative,absolute;
static:静态定位（默认状态，不定位）
fixed:固定定位；
relative:相对定位；
absolute:绝对定位；
定位方式，要与定位属性配合使用；
定位坐标：指定定位的元素，偏移目标元素多元的距离；
top:定位元素，距离目标元素顶部边的距离；
right:定位元素，距离目标元素右边的距离；
bottom:定位元素，距离目标元素底部边的距离；
left:定位元素，距离目标元素左边的距离；

1，固定定位：position:fixed
固定定位：是相对于浏览器窗口定位的；
固定定位不占空间，层级高于普通元素，它不会随网页滚动而滚动；
如果不指定定位坐标的话，固定定位元素的位置在原地不动；
固定定位元素一定是“块元素”了，不管原来是什么元素；
2，相对定位：position:relative（相对）;
相对定位，是相对于“原来的自己”进行定位；
相对定位，依然占空间，层级高于普通元素；
如果不指定定位坐标的话，相对定位元素的位置原地不动；
提示：相对定位和绝对定位，一般情况下是配合使用的；
3，绝对定位：position:absolute
相对于祖先定位元素（相对定位，绝对定位），来进行的定位；
如果它的父元素没有进行任何的定位的话，再往上找定位元素；
如果一直找到了<body>都没有找到定位元素的话，那就相对于<body>来进行定位，
绝对定位元素，不占空间，层级要高于普通元素。
如果不指定定位坐标的话，绝对定位元素的位置在原地不动。
绝对定位元素一定是“块元素”了，不管原来是什么元素；

综合案例：今日闪价

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS限时抢购</title><style type="text/css">/* 全局CSS样式设置 */body,ul,li,img,p {margin: 0px;padding: 0px;}ul,li {list-style: none;}body {font-size: 12px;font-family: 宋体;color: #444;}/* 今日闪价模块 */.shopping {width: 800px;margin: 20px auto;background-color: white;}.shopping .title {height: 60px;line-height: 40px;border-bottom: 2px solid orange;/* 底部边框 */font-size: 24px;font-family: 微软雅黑;font-weight: bold;color: orange;}.shopping img {width: 100px;height: 150px;}.shopping .imgauto {/* 选择小图标 */width: 50px;height: 50px;position: absolute;top: -15px;right: -15px;}.shopping .content p {line-height: 150%;/* 图片描述的文本行高 */}.shopping .content li {float: left;/* 八个单元格浮动 */padding: 10px 20px;/* 内边距 */position: relative;/* 定位类型为相对定位，（此处相对的body） */}.clear {clear: both;/* 清除浮动 */}.orange {color: orange;/* 特殊文本的颜色 */}.red {color: red;/* 特殊文本的颜色 */}.gray {color: gray;/* 特殊文本的颜色 */padding-left: 20px;/* 设置左内边距 */text-decoration: line-through;/* 文本修饰：删除线 */}</style>
</head><body><div class="shopping"><div class="title">今日闪价</div><ul class="content"><li><img class="img" src="data:images\td.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td1.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td2.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td3.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td4.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td5.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td6.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li><li><img src="data:images\td7.jpg" /><br /><p>[特价款]雷朋板材光学镜架<br /><span class="orange">年终盛典 满128减30元</span><br /><span class="red">&yen:476.00</span><span class="gray">&yen:1360</span></p><img class="imgauto" src="data:images\th.jpg" /></li></ul><!-- 此处清除浮动 --><div class="clear"></div></div>
</body></html>

显示效果如下：

@沉木

前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价相关推荐

CSS display overflow 属性 cursor光标类型
display属性功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
关于CSS中position属性和overflow属性的使用小结
关于CSS中position属性和overflow属性的使用小结 position属性用于设置某个元素的位置类型.取值类型可以有:static.relative.absolute.fixed.inh ...
overflow属性（溢出）详解
目录一:什么是overflow 1.1 overflow的属性二:实例分析一:什么是overflow 在CSS中,overflow是"溢出"的意思,该属性规定当内容溢出元 ...
在css样式中隐藏元素,用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...
常用cursor光标说明
1.cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-res ...
Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位
一.选择器优先级进阶计算方式: 行间样式 1000 id 100 class 10 标签选择器 1 让每一个选择器对应的值相加,谁的值大谁的优先级就高. <!DOCTYPE html> ...
CSS overflow属性与display属性
overflow属性: visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其 ...
前端---css中的overflow属性如何使用
CSS overflow 属性属性定义及使用说明 overflow属性指定如果内容溢出一个元素的框,会发生什么. 默认值: visible 继承: no 版本: CSS2 JavaScript 语法 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...

前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价