CSS高级

 块级元素:block element

 1.  每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外);

 2.  两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素 ;

 常见块级元素:

 <1> div - 常用块级容易,也是css layout的主要标签

 <2> dl - 定义列表  

 <3> h1 - h6 标题标签 

 <4> hr - 水平分隔线  

 <5> menu - 菜单列表  

 <6> ol - 排序表单  

 <7> p - 段落  

 <8> table - 表格  

    <9> ul - 非排序列表  

行内元素:inline element 

 1. 也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”

常见的行内元素:

 a - 锚点

 b - 粗体(不推荐)  

 br - 换行  

 em - 强调  

 i - 斜体  

 img - 图片  

 input - 输入框  

 label - 表格标签  

 select - 项目选择  

 span - 常用内联容器,定义文本内区块  

 strong - 粗体强调  

 sub - 下标  

 sup - 上标  

 textarea - 多行文本输入框  

 u - 下划线

 

 文档流

1.  将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流 ;

2.    CSS的定位机制有3种:普通流、浮动和定位 ;

3.    文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局 ;

4.    定位:(position)

Static:保持文档流 ;

Relative:相对本身的原始位置发生位移且保持文档流,占空间 ;

Absolute:脱离文档流,不占空间且相对于其包含块来定位 ;

5.     浮动:(float)脱离文档流,不占空间 ; 

6.    以前总是觉得position:static这个属性很多余,它的作用就是让元素保持文档流的;

 我们默认是按流体布局

css定位机制 普通流:自上而下(有些行内元素默认从左至右的也算普通流)  浮动:从左至右或从右至左对齐
定位 position 
Static:保持文档流
Relative:相对本身的原始位置发生位移且保持

浮动脱离文档流,不占空间;

显示:display 

1.  none - 此元素不会被显示 ;

2.  block - 显示为块级元素,此元素前后会带有换行符 ;

3.  inline -  默认 , 此元素会被显示为内联元素,元素前后没有换行符 ;

 CSS overflow属性

1.   overflow 属性规定当内容溢出元素框时发生的事情 ;

2.  这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要用户代理都会提供一种滚动机制 ;

3.  有可能即使元素框中可以放下所有内容也会出现滚动条 ;

 CSS样式(五)- CSS高级

 

两列布局

1.两列自适应宽度

2.由于div为块状元素,默认情况下占据一行的空间,想要下面的div跑到右侧就需要借助css的浮动来实现

3.两列固定宽度

4.两列固定宽度居中
CSS样式(五)- CSS高级

 三列布局 

1.   三列自适应宽度 (左列和右列固定,中间列根据浏览器宽度自适应);

2.   三列固定宽度 ;

3.   三列固定宽度居中 ;

 CSS样式(五)- CSS高级

 定位布局 position

CSS样式(五)- CSS高级

 透明:opacity

1.  opacity:0.9;filter:alpha(opacity=90) ;

2.filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#BFFFFFFF',endColorstr='#BFFFFFFF';)

background: rgba(255,255,255,.75);

3. background-color: rgba(0,0,0,0.5);

body{background:url("images/1.png") top center;} 上下居中对齐
opacity:0.5;(0~1)
filter:alpha(opacity=50);(1~100)(兼容写法,与上面的opacity对应)
background

 

相关文章: