CSS总结

最新推荐文章于 2024-11-01 10:52:38 发布

nqykl

最新推荐文章于 2024-11-01 10:52:38 发布

阅读量817

点赞数

分类专栏： css+html 文章标签： css layout opera 浏览器 div border

css+html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

A.页面元素：分为两类

1. 块状元素：如 div table p ul form center h1等；特点：每个元素占一行，具有宽度和高度的属性，width 和 height;

2. 内联元素：如span a br image input lable等。特点：按顺序显示，不会换行，没有宽带和高度的属性。

B．CSS中的特列：

1.margin：0 auto；居中。

2.height：xxpx;line-height:xxpx; 中部居中；

3.clear：both 清除所有浮动

4. display:block 就是将元素显示为块级元素。block 元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

5.display:inline 就是将元素显示为行内元素。inline 元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和 <em> 是 inline 元素的例子。

inline 和 block 可以控制一个元素的行宽高等特性，需要切换的情况如下：

· 让一个 inline 元素从新行开始；

· 让块元素和其他元素保持在一行上；

· 控制 inline 元素的宽度（对导航条特别有用）；

· 控制 inline 元素的高度；

· 无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari 在 IE 中对内联元素使用 display:inline-block，IE 是不识别的，但使用display:inline-block 在 IE 下会触发 layout，从而使内联元素拥有了 display:inline-block 属性的表症。从上面的这个分析，也不难理解为什么 IE 下，对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如 Opera 中块元素呈递为内联对象。

IE 下块元素如何实现 display:inline-block 的效果？

有两种方法：

1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个 display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（...为省略的其他属性内容）：

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性 display:inline ），然后触发块元素的 layout（如：zoom:1等）。代码如下：

div {display:inline; zoom:1;...}

C．伪类

a:link { color: red } /* unvisited links 设置元素在未被访问前的样式。*/

a:visited { color: blue } /* visited links 设置 a 对象在其链接地址已被访问过时的样式 */

a:hover { color: yellow } /* user hovers 设置对象在其鼠标悬停时的样式 */

a:active { color:#000000; } /* active links 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式 */

顺序必须是lvha;

D.浮动

Float:

none:默认值。对象不飘浮

left :文本流向对象的右边

right :文本流向对象的左边

浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。

clear:

none :默认值。允许两边都可以有浮动对象

left :不允许左边有浮动对象

right :不允许右边有浮动对象

both :不允许有浮动对象

E.定位：

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

Position:

Static: 默认值。无特殊定位，对象遵循HTML定位规则

absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义.绝对定位。

fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative:对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。相对定位。

重点介绍 absolute 和 relative

1.贡献的绝对定位absolute

如果元素被赋予绝对定位，那么就等于把元素从页面中拔出来，元素原来的位置会被其他元素自动填补(绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对包含该元素的父级元素进行定位设定，那么该元素位置不会再受父元素位置影响，父元素怎么移动，该元素还是放在原来位置，至于元素要怎放，则以页面左上角(body左上角)为准，用left，right，top，bottom值来定位。

<html>

<head>

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

</style>

</head>

<body>

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

</body>

</html>

2.自私的相对定位(relative)

相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的(相对对象本身偏移)。

实例代码：

<html>

<head>

h2.pos_left

{

position:relative;

left:-20px

}

h2.pos_right

{

position:relative;

left:20px

}

</style>

</head>

<body>

<h2>这是位于正常位置的标题</h2>

<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>

<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

<p>相对定位会按照元素的原始位置对该元素进行移动。</p>

<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>

<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

</body>

</html>

3. 总结两种定位的特征

　　绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积(父级)有关。相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。

　 4.对特殊情况的补充

　　在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，它就会神奇般地跑出墙外去了，当然现实中可没有这种惊险而又神奇的事发生。

F:盒子模型：

盒子模型.png

· element : 元素。

· padding : 内边距，也有资料将其翻译为填充。

· border : 边框。

· margin : 外边距，也有资料将其翻译为空白或空白边。

· 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

· 提示：背景应用于由内容和内边距组成的区域。

· 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

· * {

· margin: 0;

· padding: 0;

· }

· 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

· 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

· CSS 框模型实例

· #box {

· width: 70px;

· margin: 10px;

· padding: 5px;

· }

· 提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

· 提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

E 用z-index进行层次堆叠：其原理是：数字较大的元素将叠加在数字较小的元素之上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

#ten_of_diamonds{

position: absolute;

left: 100px;

top: 100px;

z-index: 1;

}

#jack_of_diamonds {

position: absolute;

left: 115px;

top: 115px;

z-index: 2;

}

#queen_of_diamonds {

position: absolute;

left: 130px;

top: 130px;

z-index: 3;

}

#king_of_diamonds {

position: absolute;

left: 145px;

top: 145px;

z-index: 4;

}

#ace_of_diamonds {

position: absolute;

left: 160px;

top: 160px;

z-index: 5;

}

</style>

</head>

<body>

<h1>同花大顺Royal Flush</h1>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

nqykl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录