CSS知识点补充

一、css框模型概述

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

1、css内边距属性（padding）

　　定义元素边框与元素内容之间的空白区域

2、css外边距属性（margin）

　　margin 可以设置为 auto。margin后面是有4个参数的。例如：margin:1px 1px 1px 1px。分别表示上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px 那么着是代表上下都为1px，左右都为2px. 居中标准的写法是：margin:0 auto ；

3、边框（border）

　　每个边框有 3 个方面：宽度（border-width）、样式（border-style），以及颜色（border-color）。可以单独定义边框某一边的宽度、样式或属性。

　　样式（border-style）可能的值：

4、外边距合并

　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

　　**只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

　　eg:

二、css定位(position)

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

1、定位属性

2、position的值：

　　（1）static：

　　　　元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

　　（2）relative：相对定位: 　　元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对定位会按照元素的原始位置对该元素进行移动。
　　（3）absolute：绝对定位: 　　元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。通过绝对定位，元素可以放置到页面上的任何位置
　　（4）fixed：固定定位: 　　元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>定位</title>

 <style type="text/css">

     .static1{position:static;left:20px;}

     .static2{left:20px;}

     .relative1{position:relative;left:20px;}

     .relative2{left:20px;}

     .absolute1{position:absolute;left:20px;}

     .absolute2{left:20px;}

     .fixed1{position:fixed;left:20px;}

     .fixed2{left:20px;}

 </style>

 </head>

 <body>

     <p class="static1">这是static的效果</p>

     <p class="static2">这是static的对比效果</p>

     <p class="relative1">这是相对定位relative的效果</p>

     <p class="relative2">这是相对定位relative的对比效果</p>

     <p class="absolute1">这是绝对定位absolute的效果</p>

     <p class="absolute2">这是绝对定位absolute的对比效果</p>

     <p class="fixed1">这是固定定位fixed的效果</p>

     <p class="fixed2">这是固定定位fixed的对比效果</p>

 </body>

 </html>

3、浮动（float）

　　（1）浮动

　　　　*如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

　　　　*如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

　　（2）行框：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：

　　（3）清除浮动（clear）

　　要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

　　（4）实例：

　　　　A、带有标题的图像浮动于右侧

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>浮动</title>

 <style type="text/css">

     .image{

         float:right;

         border:medium #FF9 solid;

     }

 </style>

 </head>

 <body width="100px">

     <div class="image" align="center">

         <img width="100px" src="图片/6.png" /><br />小可爱

     </div>

     <p>樱花在樱花城中，静静的绽放了数月，每天都看到很过情侣在樱花树下，聊天，谈心，樱花的花瓣渐渐的飘落下来，美及了。所以，樱花就成为了爱情的象征。但是，每个人都希望自己得到爱情，得到幸福，樱花树上的妖精(樱の花)也一样，她看到别人是那么的幸福，自己也想得到，就独自离开了樱花树.樱花的花瓣仍然在飘落，樱の花在人群中，寻找着自己的另一半，她找了好久好久，当她想放弃而回到樱花树上时，他出现了，他开始为她带来快乐，他开始照顾她，他们一起聊天到深夜。这才得知他是从遥远的国家，因船迷失了方向而来到了这里，樱の花听了，知道，他一定会走的，一定会回到自己的国家。樱の花为了珍惜这段时光，她每天都和他相遇在樱花树下，天天聊天……但是，好时光总是短暂的，他要离开了，他来和樱の花道别了。樱の花虽然早有准备，可还是禁不起这个打击，她背对着他，只说了一个字“哦”。他走了，在茫茫的海上，走了。樱の花一个人在樱花树下，哭泣着，樱花的花瓣为了安慰她，而飘落下来，微风吹过，满地的花瓣飘了起来，樱の花的心碎了，她哭了几天几夜，最终决定了，她是该回去的时候了。她看着樱花树，想到：我是樱花的妖精，我最终是樱花树上的一片花瓣，最终是只能看着别人有情人忠诚眷属的，自己是不会得到的……就这样，她消失了，有人说，她回到了树上，有人说，她因为过度的失落，而化为花瓣，随着风一起去寻找他了.兰是一种植物，又是一种文化。兰叶绰约多姿，终年常青，花清雅高洁，幽香四溢。兰因生于山涧泉边，树木繁茂之地而享有“空谷佳人”的美誉。松竹梅，驰誉而有缺憾：竹无花，梅无叶，松无香。而兰“独并有之”有节，有花，有叶，有香。兰以叶动人，以花悦人，以韵怡人。</p>

 </body>

 </html>

　　效果：

　　B、使段落首字母悬挂在左侧

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>浮动</title>

 <style type="text/css">

     span{

         float:left;

         line-height:80%;

         font-size:30px;

         font-family:"Courier New", Courier, monospace;

         color:#FC6;

     }

 </style>

 </head>

 <body width="100px">

     <p><span>樱</span>花在樱花城中，静静的绽放了数月，每天都看到很过情侣在樱花树下，聊天，谈心，樱花的花瓣渐渐的飘落下来，美及了。所以，樱花就成为了爱情的象征。但是，每个人都希望自己得到爱情，得到幸福，樱花树上的妖精(樱の花)也一样，她看到别人是那么的幸福，自己也想得到，就独自离开了樱花树.樱花的花瓣仍然在飘落，樱の花在人群中，寻找着自己的另一半，她找了好久好久，当她想放弃而回到樱花树上时，他出现了，他开始为她带来快乐，他开始照顾她，他们一起聊天到深夜。这才得知他是从遥远的国家，因船迷失了方向而来到了这里，樱の花听了，知道，他一定会走的，一定会回到自己的国家。樱の花为了珍惜这段时光，她每天都和他相遇在樱花树下，天天聊天……但是，好时光总是短暂的，他要离开了，他来和樱の花道别了。樱の花虽然早有准备，可还是禁不起这个打击，她背对着他</p>

 </body>

 </html>

　　*<span> 标签被用来组合文档中的行内元素

　　效果：

　　C、创建水平菜单栏

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>浮动</title>

 <style type="text/css">

     ul{list-style:none;}

     li{display:inline;}

     a{

         text-decoration:none;

         background-color:#309;

         color:#CCC;

         padding:0.3em 0.6em;

         float:left;

         border-right:#FFF solid 1px;

     }

     a:hover,a:active{background-color:#F03;}

 </style>

 </head>

 <body width="100px">

     <ul>

         <li><a href="#">菜单一</a></li>

         <li><a href="#">菜单二</a></li>

         <li><a href="#">菜单三</a></li>

         <li><a href="#">菜单四</a></li>

         <li><a href="#">菜单五</a></li>

     </ul>

 </body>

 </html>

　　效果：鼠标放上去或者点击时，链接的背景颜色会变为红色：

　　*代码分析：

*padding:0.3em 0.6em;     
  　　　　*float:left;       
  　　　　*border-right:#FFF solid 1px;

三、css高级

1、css尺寸属性

　　CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。可以使用数字、百分比和像素值来设定。

2、css分类属性

　　CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

3、css伪类属性

4、css伪元素

CSS知识点补充的更多相关文章

css知识点补充、css属性、
1.媒体查询的css代码的优先级要比其他的高! 2.text-overflow: 定义文本溢出父级元素如何处理! clip/ellipsis/string 3.overflow: visible ...
从零开始的全栈工程师——html篇1.8（知识点补充与浏览器兼容性）
知识点补充一.浏览器的兼容问题(关于浏览器的兼容问题有很多大佬已经解释的很清楚了这个得自己百度去多花点时间去了解这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题 ...
这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No5-No7
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No8-No9
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
第八十五节，css布局补充一
css布局补充一图片边框问题注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法水平居中的text-align:center 和 margin: ...
css知识点
css知识点一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...
css杂项补充
css杂项补充一.块与内联 1.块独行显示支持宽高,宽度默认适应父级,高度默认由子级或内容撑开设置宽高后,采用设置的宽高 2.内联同行显示不支持宽高 margin上下无效果,左右会起作用, ...

随机推荐

CSS3 Media Queries在iPhone4和iPad上的运用
CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...
snowflake
snowflake在分布式系统中生成全局id
【翻译】西川善司的「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，后篇
http://www.4gamer.net/games/216/G021678/20140714079/ 连载第2回的本回, Arc System Works开发的格斗游戏「GUILTY G ...
Gmail 启用 POP 标准配置说明：
接收邮件 (POP3) 服务器 - 要求 SSL:pop.gmail.com使用 SSL:是端口:995 发送邮件 (SMTP) 服务器 - 要求 TLS 或 SSL:smtp.gmail.com使用 ...
PhpStorm中文教程
PhpStorm中文教程 | 浏览:15972 | 更新:2014-06-10 21:14 1 2 3 4 5 分步阅读 PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供 ...
laravel 部分路由取消csrf
// app/Http/Middleware/VerifyCsrfToken protected $except = [ 'webhook/*' ];
mysql默认字符集修改
(1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值,添加 [mysql] default-character-set = utf8 [mysqld] character_se ...
Windows注册表(持续更新)
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Zoom 下, 设置DWORD 值 ZoomDisabled 等于 1.
linux卸载php
卸载: rpm -qa | grep php 所以正确的卸载顺序是:# rpm -e php-mysql-5.1.6-27.el5_5.3 --allmatches #同名全部卸载# rpm -e ...
Comparable与Comparator
转载 Comparable与Comparator的区别 (转载) Comparable & Comparator 都是用来实现集合中元素的比较.排序的,只是 Comparable 是在集合内部 ...

CSS知识点补充

CSS知识点补充的更多相关文章

随机推荐

热门专题