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

随机推荐

Mono for Android 篇二使用Spinner 实现下拉列表读取Browser.BookmarksUri
http://www.cnblogs.com/ivanyb/archive/2013/03/05/2944818.html 1.首先在VS2010里面创建一个Android Application 简 ...
【BZOJ】1503: [NOI2004]郁闷的出纳员（Splay）
http://www.lydsy.com/JudgeOnline/problem.php?id=1503 这题没有看题解就1a了-好开心,, 其实后面去看题解发现他们的都很麻烦,其实有种很简单的做法: ...
Java实现队列
class Element{ int id; String name; Element(int a,String n){ id=a;name=n; } } class SeqQueue{ int fi ...
java利用JFreeChart实现各种数据统计图（柱形图，饼图，折线图）
最近在做数据挖掘的课程设计,需要将数据分析的结果很直观的展现给用户,这就要用到数据统计图,要实现这个功能就需要几个第三方包了: 1. jfreechart-1.0.13.jar 2. ...
李洪强 - C语言8-Scanf函数
C语言的scanf函数一.变量的内存分析 (一)字节与地址 ①. 内存以字节为单位每个字节都有自己的内存地址,根据地址就可以找到该字节.整个内存相当于一整个酒店,而酒店以房间为单位,在这里每个房间 ...
zabbix企业级监控概述和部署
官方网站:http://www.zabbix.com/ zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案 zabbix能监视各种网络参数,保证服务器系统的安全 ...
hdu Pie
这道题是一道二分搜索的题,首先计算出最大的平均体积:mx=V总/f:然后去left=0,right=mx,mid=(left+right)/2进行二分搜索,当所有pi分割出的mid的个数是大于等于f时 ...
[IT新应用]农民朋友的电子商务
今天通过http://olympiawa.gov/visitors.aspx olympia市的官网,到 http://www.olympiafarmersmarket.com/vendors-1/到 ...
web-content和web-info目录问题
1.资源文件只能放在WebContent下面,如 CSS,JS,image等.放在WEB-INF下引用不了. 2.页面放在WEB-INF目录下面,这样可以限制访问,提高安全性.如JSP,html 3. ...
css 强制换行
强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...

CSS知识点补充

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

随机推荐

热门专题