css基础

W3C(World Wide Web Consortium[kn'stm])

由万维网联盟制定的一系列标准,包括:

结构化标准语言:html/xml

表现标准语言:css

行为标准语言:DOM/ECMAScript


css排版

下划线:text-decoration:underline;

删除线:text-decoration:line-through;

斜体:font-style:italic;

段落缩进:text-indent:2em; //文字前空两格


white-space

wKiom1ea1hywlRYmAABeVZFQc3E667.jpg


中文字间距 和 字母之间的间距 letter-space:2px;

英文单词,词与词之间的间距:word-spacing:2px;


font样式缩写  

font:12px/25px "宋体",sans-serif   至少要指定 font-size 和 font-family 属性


长度值

em:就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。

下面注意一个特殊情况:

但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}

span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

百分比:p{font-size:12px;line-height:130%}  设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。


内联元素:display:inline  

内联块状元素:display:inline-block 

块级元素:display:block


css层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。(就近原则)

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。


css权值计算

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。


水平居中

行内元素:给父元素设置text-align:center

定宽块级元素:设置宽度,并且margin:0 auto;

不定宽块状元素:3种方法

第一种:table把它包围,text-align:center;

第二种:使用display:inline 设置成行内元素,按行内元素的方法做

第三种:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。


垂直居中

父元素高度确定的单行文本:height:25px;line-height:25px;

父元素高度确定的多行文本:两种方法

第一种:table把元素包围,然后设置vertical-align

第二种:(不推荐)设置块级元素的display:table-cell 这样就可以激活vertical-align属性 但是ie6,7不兼容


隐性改变display类型

元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

 1. position : absolute 

 2. float : left 或 float:right 

简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。


三列布局两边固宽中间自适应

如果是3列布局,左右固定宽,中间自适应,可以如下:

左边:position:absolute; left:0;top:0;width:300

右边:position:absolute; right:0; top:0;widht:200px;

中间:margin:0 200px 0 300px;


横向两列布局

一列是固宽,另一列自适应宽

方法:一列设置固定宽度值,另一列父元素设置position:relative  自己position:absolute  但要注意固定宽度列的高度>自适应宽度的列


css三种定位机制

  1. 标准文档流(normal float) 从上到下从左到右  position:static 也被认为是普通流(标准文档流)

  2. 浮动(float)

  3. 绝对定位(position:absolute)

wKioL1ebH7fS8j7VAAEOBm38tR4070.jpg


清除浮动两种方法

  1. clear:both(常用) clear:left  clear:right  

  2. width:100%;overflow:hidden;缺一不可

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章