第九章——CSS部分:层效果与溢出管理

div称为层,更多的是因为它的z轴属性,可以实现层叠效果,例如:

<div style=”position:absolute;z-index:1;left:50px;top:50px;background-color:red;”></div>

<div style=”position:absolute;z-index:2;left:60px;top:60px;background-color:blue;”></div>

注意布局还是浮动+外边距!!!

一、CSS定位

Position:

Static(静态) 默认,无法定位和指定Z轴

Absolute(绝对) 相对于最近的一个具有定位容器绝对定位,容器没有定位距离最近一级容器元素位置绝对定位 ,

比如外部DIV嵌套内部DIV,外部DIV设置外边距内部DIV不会移动。相对就会。

示例源码:

<div style="border:1px solid black; width:200px; height:200px; margin-top:250px; margin-left:250px;">

<div style="border:1px solid black; width:100px; height:100px; position:absolute; left:50px; top:50px;"></div>

</div>

Relative(相对) 相对于父级容器相对定位

Fixed 固定,拖动滚动条始终处于视野,但是IE6不支持。

z-index Z轴 ,默认为0,正方向全是正整数;负方向为负整数,值范围-9999~9999。

示例源码:

<body style="height:600px; background-color:gray;">

<div style="border:1px solid black; width:200px; height:200px; margin-top:150px; margin-left:150px; position:fixed; z-index:1;">

</div>

</body>

二、列表样式

无序列表:

List-style-type:

Disc 默认,实心圆

Circle 空心圆

Square 实心方块

None 不实用项目符号

有序列表:

List-style-type:

Decimal 默认,阿拉伯数字

Lower-roman 小写罗马数字

Upper-roman 大写罗马数字

Lower-alpha 小写英文字母

Upper-alpha 大写英文字母

共有:

List-style-image:url(图片地址) 列表项图标(xxx.ico)

示例源码:

<style>

ul li{

float:left;

margin-right:10px;

}

li{

list-style-image:url("1.jpg");

}

</style>

 

<ul style="list-style-type:none; ">

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

<div style="clear:left;"></div> 

<ol style="list-style-type:upper-roman;">

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

List-style-position: outside(标记在文本外) inside(标记在文本内) 效果如下

22ca0003653ae58d5e37

请点击此处输入图片描述

第九章——CSS部分:层效果与溢出管理

源码:

<ul style="list-style-position:inside;">

<li style="background-color:blue;">11111</li>

<li>11111</li>

<li>11111</li>

</ul>

三、CSS溢出:内容超出容器宽高度设置

Overflow:

Hidden 溢出部分隐藏

Scroll  出现滚动条

Auto 自动

Visible 显示(默认)

Overflow-x:  横向溢出设置

Overflow-y:  纵向溢出设置

示例源码:

<div style="width:300px; height:300px; overflow-x:scroll; overflow-y:hidden;">

<img src="1.jpg" width="400px" height="400px" />

</div>

22ca000365bdbff44d4d第九章——CSS部分:层效果与溢出管理

请点击此处输入图片描述

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/2264.html

(0)
上一篇 2017年5月24日 09:50
下一篇 2017年5月25日 09:41

相关推荐

  • 第六章——css部分:基本属性与CSS

    一、标签属性与样式 1、网页内容根据想要在作用选择对应在标签 2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。 直接能够敲的出来我们成为属性(attribute),类似于字体在color等。 敲...

    2017年5月22日
    0219
  • css层叠样式表flex弹性盒模型

    1. 简介 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定Flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动称为容器成...

    2018年4月27日
    0230
  • 使用css的border属性实现三角形

    使用css的border属性实现三角形 1. border使用方法 2. border 三角形 2.1. 三角形原理,我们来看一个普通的底部边框 2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线 2.3. 我们在左边边添加一个...

    2018年5月7日
    0314
  • 学会DIV+CSS布局是否有利于找工作?

    学习了CSS布局,不会程序开发依然可以建设属于自己网站,买卖产品、装修装修淘宝均可。 可以找到什么工作呢? 1、后台开发程序员: 很多网络公司都要求程序员会CSS、熟悉CSS甚至精通CSS技术; 2、网页美工设计师: ...

    2015年12月1日
    0145
  • 为什么要学习CSS+DIV技术?

    首先要问人为什么要学习,为什么要有一技之长?答:时代不断变化各行各业日新月异不学习就会很快落后,活到老学到老,人要有一技之长,技为安身立命之根本。 学习CSS+DIV技术,可以让你认识互联网,认识我们每天接触...

    2015年12月1日
    0145
  • 我的php学习第六天之css篇

    昨日回顾 CSS的介绍 CSS,Cascading Style Sheets层叠样式表。 一个网页由三个部分:结构、表现、行为,对应的标准是:XHTML、CSS、JavaScript。 这三个标准语言,是浏览器直接可以识别的,并且能直接进行解释(翻译)...

    2015年10月14日
    0162
  • DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

    CSS边框虚线 这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。 边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例...

    2017年11月17日
    0144
  • 学习前端技术栈ServiceWorker,让你的网页变快20%。

    有些人会认为,前端不就是切图然后展示么,有什么技术含量,学前端不如学习Php,此言差矣,这些年随着互联网的发展,前端技术变得越来越重要,生态圈也越来越发达,今天我们来介绍一个前端技术栈,ServiceWorker。 ...

    2022年7月4日
    052