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

随机推荐

BZOJ 1036 && 树链剖分
还是太弱啊..各种数据结构只听过名字却没有一点概念..树链剖分也在这个范畴..今天来进一步深化一下教育改革推进全民素质提高. 性质忘了在哪里看到的一篇blog有一句话讲得非常好,树链剖分不是一种数据 ...
Centos下设置静态IP
使用VirtualBox装了很多虚拟机,默认采用的DHCP的方式,但是随着虚拟机越来越多以后,这种方式很不方便,所以需要将机器的IP都设置为静态IP 需要添加的几项内容的解释:IPADDR IP ...
c++模版函数
1.定义可以使用class或者typename字段来申明 template <class T> template <class T1, class T2, ...class TN& ...
Stack and Heap 堆和栈的区别
在和计算机内存打交道时,我们一定会碰到堆和栈,这两个东西很容易搞混,那么现在就来梳理一下二者的关系. 栈是用来静态分配内存的而堆是动态分配内存的,它们都是存在于计算机内存之中. 栈的分配是在程序编译的 ...
安装rkhunter
#!/bin/bash if [ ! -d /soft ];thenmkdir /soft fiwhich rkhunterif [ $? -eq 0 ];then echo "rkhunt ...
单词游戏-基于SQLite+Qt的C++项目
SQLite文件数据库的操作 Qt插件的安装配置 1.VS2008下安装Qt开发包解压缩4.7.3.rar到C:\Qt\4.7.3\ Qt for VS addin2.安装并配置Visual Ass ...
HDU 4825 Xor Sum（经典01字典树+贪心）
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others) Total ...
IO的生命周期
● 将来自cache的数据封装成bio submit_bh->submit_bh_wbc 此时IO还在fs层 ● 进入block IO层 submit_bh_wbc->submit_io- ...
PHP 表单添加隐藏 Token 阻止外部提交
Token 法:通过一个隐藏可变的 Token 加大攻击的难度,每次提交都需要和服务器校对,如果不通过,则为外部提交(也可以通过 session + 隐藏域来验证). 代码: form.php < ...
在UI线程之外显示Toast
new Thread(){ public void run() { Looper.prepare(); Toast t = Toast.makeText(mContext, R.string.cras ...

CSS知识点补充

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

随机推荐

热门专题