【HTML+CSS】（div布局）知识学习笔记

【html+CSS DIV】

 

字体控制样式：

font-size:10px（字体大小）

line-height:10px(行间距)

font-faimly:serif(字体类型)

font-style:italic(倾斜) nomal（正常）

decoration:normal underline（下划线） overline（上划线） line-through（中间删除线）

font-weight:bold(粗体)

color:red(红色) #ccc（灰色）

letter-spacing:10px（字符间距）

word-spacing:10px(单词间距)

 

文本控制：

text-indent:2em(首行文本缩进 可以为负值) 

text-align:left(左) center(中) right（右）

white-space:pre(保留文本效果) nowrap(强制在同一行显示)

text-transform（文本大小写控制）:none(正常大小) capitalize(每个单词的第一个字母转换成大写) uppercase(转换成大写) lowercase(转换成小写)

vertical-align（垂直对齐方式）:sub(下标) super（上标）top(把元素的顶端与行中最高的元素的顶端的对齐) bottom（把元素的底端与父元素的底端对齐）middle(中部对齐)

visibility:hidden;（使元素不可见）visible（可见）

 

伪类：

未访问的链接：a:link{color:#ff0000}

已访问的链接：a:visited{color:#00ff00}

鼠标移动到链接上：a:hover{color:#ff00ff}

鼠标按下的链接：a:active{color:#0000ff}

input:focus{background:blue}(当点击输入框时改变样式)

 

border(边界):2px(粗细) blue（颜色）dotted（点） solid（实线） double（双线） dashed（虚线）

 

CSS选择符类型：

*｛margin：0；padding：0｝(重置所有元素的内外边距为0) *用于定义所有的html元素

#（包含选择符）e1 e2{属性：值}嵌套使用表示样式

选择符分组：e1,e2,e3{属性：值}集体控制 用于多个选择符

h1#p1{属性：值}表示针对id为p1的h1标签（针对性强）h1.e1{}

 

盒子模型（box）：【注意：由于各个浏览器存在不同的内外边距 所以需要从0开始】

边界：border 内边距：padding 外边距：margin 内容的长：height 内容的宽：width（外边距+边界+内边距+内容=盒子长 or 宽）

margin-top/right/bottom/left

overflow:hidden（盒子溢出隐藏）

 

列表的属性介绍：（用于对ul ol前面的图标进行控制）

list-style:list-style-image || list-style-position || list-style-type

列表的样式：列表的图片||列表的符号位置||列表的样式

（一般list-style:none;）

 

********CSS小技巧：

（1）让盒子，水平居中。将对象的左右外边界，设置为auto；（text-align:center;margin:10px auto 0 ）

（2）让盒子，垂直居中。将行距大小调整为高度大小即可。（height:50px;line-height:50px）

（3）调试时适当加背景颜色

 

块状元素（div,p,ul,li,h2,h3,h4,h5）：｛display(显示)：block（块）、none（隐藏）、incline(做内联对象呈现)｝能设立宽度和高度

内联元素（span、a）：宽高不起作用

 

CSS控制背景：

background:

background-color:#ccc 

background-image:url(背景图像的位置及全称)

background-repeat:[repeat、no-repeat、repeat-x、repeat-y](背景图像的重复方式)

background-position（背景图像的位置）:top[left center right](水平值) center[left center right](垂直值)

background-attachment:[scroll（滚动）、fixed（固定）]（背景图像的依附方式）

 

布局：

float:left right none both（不允许左右有浮动）lnherit(从父元素获取float值)(块 浮动) 分离出来 无视后面对象

position(定位布局):absolute(相对于父元素定位)fixed(相对于浏览器定位)

clear:left right none both（清理浮动）

在div中对元素进行定位：left、right、top、bottom

 

不透明度：

opacity:1|inherit（从父元素继承）（用于设置div的不透明级别 默认值为1 区间为0-1）

filter:alpha(opacity=100)（用于IE老版本）

 

*******注意******浮动是记得外面添加一个div 这样对后面的元素将以块分开