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上下无效果,左右会起作用, ...

随机推荐

Redis中7种集合类型应用场景
StringsStrings 数据结构是简单的key-value类型,value其实不仅是String,也可以是数字.使用Strings类型,你可以完全实现目前 Memcached 的功能,并且效率更 ...
td也可以溢出隐藏显示
或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了. table真的过时了么?你真的了解 ...
ITK 4.8.1 Qt 5.4 MinGW 4.9.1 Configuration 配置
Download ITK 4.8.1 Download Qt 5.4 with MinGW 4.9.1 Download CMake 3.2.0 I assume you've already ins ...
[zt]给你的Mp4大换血，精选Touch里3年收集的900多首歌，"经典不忍去的""最新近流行的"，与你共享~~
如果你是音乐爱好者: 这些歌, 请戴上耳机, 调大音量, 一个人听 ,全世界都是你的!!!!! (一)这些歌很温暖,没有金属味,适合有阳光的午后,很悠闲... [Anaesthesia]Maximi ...
在vs2013中配置openGL（绝对可靠！）
首先要下载glut.h glut32.dll glut32.lib.(这个在glut-3.7.6-bin的包里面,可以直接下载 ) 然后: glut.h:放到 D:\vs2013\VC\include ...
hdu-acm steps Common Subsequence
/*这道题是很明显的dp题,状态方程有点不大好想,也许是我刚刚接触dp的缘故吧.dp[i][j]表示字符串s1取前i个字符s2取前j个字符时最大公共子序列的大小,这样的如果s1[i]==s2[j],d ...
javascript中的function
function / 对象所有的变量和方法名的:以字母,$ _开头其他随便,尽量使用英文字母命名,见名知意注意点:不允许使用关键字定义变量和方法的名称====函数即方法,方法即函数====百度:ja ...
【新产品发布】【EVC8001 磁耦隔离式 USB 转 RS-485】
EVC8001 是 XiaomaGee 团队打造的精品级 USB 转 RS-485 隔离转换器,全部采用最优方案,每个细节均做到最优化.最佳化.亮点举不胜举: ==================== ...
内存调试工具Electric Fence
源码下载地址注:官方地址下载不了,可能不再维护了,此是一个老项目 efence中相关环境变量控制: 302 /* 303 * See if the user wants to allow mallo ...
Ubuntu 12.04 LTS 及ubuntu14.10 -- NFS安装
在Linux 服务器上配置好NFS 根文件系统后,在单板侧挂载NFS 文件系统,具体操作如下:ifconfig eth0 hw ether 00:10:85:18:01:84 /*配置MAC地址*/i ...

CSS知识点补充

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

随机推荐

热门专题