CSS代码结构
选择器 { 属性:值 }
使用方法有
· 行内样式 例:<p style="color:blue"></p>
· 内嵌样式 例:p { color:red; } 定义在 <head> <style type="text/css"/> 在这里 </style> </head>
· 链接样式 例:<link rel= "stylesheet" type="text/css" href="3.5.css">定义在<head></head>中
· 导入样式 例:<!-- @import "1.css" --> 定义在 <head> <style type="text/css"> 在这里 </style> </head>
ps:使用<!-- -->标记是为了防止在低版本的IE浏览器中无法识别@import
优先级从上往下
块级元素:<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block
就是将元素显示为块级元素。
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素:<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline
将元素设置为内联元素。
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block
就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
在网页中,元素有三种布局模型:
1、流动模型(Flow) (默认)
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置.
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
3、层模型(Layer)
层模型有三种形式:
1、绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
代表的是向右100向下50
2、相对定位(position: relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
3、固定定位(position: fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同
#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; }
tip:参照其他元素进行定位
1、参照定位的元素必须是相对定位元素的前辈元素:
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
2、参照定位的元素必须加入position:relative;
#box1{ width:200px; height:200px; position:relative; }
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{ position:absolute; top:20px; left:30px; }
盒子模型代码简写:(margin,border和padding一样)
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
(原来是margin-left。。。。等等)
1、如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代码:
margin:10px 20px 10px 20px;
可缩写为:
margin:10px 20px;
3、如果left和right的值相同,如下面代码:
margin:10px 20px 30px 20px;
可缩写为:
margin:10px 20px 30px;
颜色代码简写:#336699可简写为369
字体简写
body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }或者是:
body{ font:12px/1.5em "宋体",sans-serif; }
颜色表示方法:
1,p{color:red;}
2,p{color:rgb(133,45,200);}
3,p{color:rgb(20%,33%,25%);}
4,p{color:#00ffff;}
长度单位:
目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
em就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
特殊情况:<p>111<span>000</span>></p>
如果span设置了text-indent的话是使用<p>的font-size
百分比p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center
来实现的。
块状元素时用 text-align:center 就不起作用了,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
不定宽:如网页的分页导航
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
- 加入 table 标签
- 设置 display;inline 方法
- 设置 position:relative 和 left:50%;
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>
css代码:
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。
html代码:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ text-align:center; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
垂直居中-父元素高度确定的单行文本
垂直居中-父元素高度确定的多行文本(方法一)
垂直居中-父元素高度确定的多行文本(方法二)
隐性改变display类型