html+css总结

表单:

input中的属性:

placeholder:提示用户输入信息

value:输入框数据值

maxlength:输入数据最大长度

readonly:只读

disabled:禁用

type:

+ text(文本)

+ submit(提交)

+ button(按钮)

+ password(密码)

+ radio(单选)

+ checkbox(复选)

+ file(文件)

+ reset(清空)

下拉列表:

北京

上海

广州

深圳

label绑定:

女

css引入方式:

选择器{样式}

引入外部css文件:

浏览器标题小图片:

id和class常见命名方式:

+ 驼峰命名法,eg: topMain;

+ 中划线命名法,eg: top-main;

+ 下划线命名法,eg: top_main;

注:为了避免class命名的重复性,命名时一般去父元素class为前缀

网页中常见命名:

wrapper(一般用于包裹整个页面)  最外层

header                        头部

content                        内容

sidebar                        侧栏

column                        栏目

hot                              热点

news                          新闻

download                    下载

logo                            标志

nav                              导航条

main                            主体

footer                          底部

login                            登录

register                        注册

menu                          菜单

css的相关单位:

1.数字值

* 相对值

+ em

+ 百分比

* 绝对值

+ in(英寸),cm(厘米),mm(毫米),pt(点),pc(皮卡),px(像素)

2.颜色值

* 颜色名 (eg: red,green,lime)

* 十六进制颜色(#RRGGBB或#RGB)

+ #000000 #ff0000 #00ff00 #0000ff

* rgb()颜色值

+ rgb(r,g,b) 每种颜色的颜色值 0~255

rgb(0,0,0)

+ rgb(%,%,%) 每种颜色的颜色值 0~100%

rgb(10%,10%,10%)

* HSL(色相,饱和度%,亮度%)

3.Alpha 通道 (0~1)

RGB和HSL都支持 Alpha 通道

字体设置:

font-size: 20px;(字体大小)

font-family: Arial,Verdana,Sans-serif;(文本字体)

font-weight: 500;(设置文本粗细)

font-variant: small-caps;(小型大写字母 小写字母的尺寸显示大写字母样式: normal,small-caps)

文本设置:

text-align:(文本对齐方式 默认居左  还有设置居右  居中 justify两端对齐 不常用)

text-indent: 2em;(设置文本首行缩进)

text-transform: capitalize;(文本转化:normal 默认 按原样显示,capitalize 首字母大写,uppercase 字母全部大写,lowercase 字母全部小写)

line-height: 50px;(设置行高 行高 = 字体高度 + 行距 调整字体垂直居中显示)

direction: rtl;(文字书写方向 从左到右 ltr  rtl (不常用))

letter-spacing: 2em;(正值时增加字符间距,负值时缩小间距,无论字体大小使用的是什么单位,设定字符间距一定使用相对单位)

word-spacing: 2em;(单词间距)

text-decoration: underline,overline,line-through,none;(文本描述)

vertical-align: baseline,sub,super,top,text-top,middle,bottom,text-bottom(以基线为参考标准上下移动文本,但是这个属性只影响行内元素)

background设置:

background-color: 背景颜色;

background-image: url('背景图片');

background-repeat: no-repeat;(repeat 默认 横向和纵向平铺,repeat-x  只沿x轴方向横向平铺,repeat-y  只沿y轴方向纵向平铺,no-repeat  背景图片不进行平铺)

background-attachment: scroll;(图片随页面滚动)

background-attachment: fixed;

list设置:

设置列表标志项类型  可以设置circle square decimal(表示数字类型 只在CSS 里面起作用)(list-style-type: decimal;list-style-type: none;)

设置列表项标志位置 outside inside 表示标志项在内容内部还是外部 默认是外部(list-style-position: outside;)

自定义列表项标志  图片(list-style-image: url('images/up.jpg');)

属性连写 decimal和url二选其一(list-style:decimal inside url(image/up.jpg);)

轮廓与边框:

设置轮廓宽度(outline-width: 2px;)

设置轮廓颜色(outline-color: red;)

设置轮廓线样式 solid实线 double双线 dashed虚线 dotted点状线(outline: 10px solid red;)

根据方向设置不同边框 上 右 下 左 在属性缺失的情况下（1，3） （2，4）{border-style: solid double dashed;}

属性连写(border: 1px solid red;)

css特性:

继承性:

(1) 文本相关属性: font-family , font-size , font-style , font-weight , font , line-height , text-align , text-indent , word-spacing;

(2)列表相关属性: list-style-image , list-style-position , list-style-type , list-style;

(3)颜色相关属性: color;

注意点:并不是所有的属性都有继承性;

层叠性:

指的是样式的覆盖

css盒子模型:

所有的元素都可以看成 盒子模型

2.盒子模型可以从两个方面理解:

一是理解单独盒子的内部结构( 内容区(content),内边距(padding),边框(border),外边距(margin))

二是理解多个盒子之间的相互关系(W3C标准盒子 width = content;IE盒子 width = border+padding+content)

外边距合并:

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上下外边距也会发生合并;

解决方法:

1、给父元素加边框:border: 1px solid red;

2、给父元素设置overflow:hidden 溢出部分裁剪

外边距叠加的三种情况:

1.同级元素

当两个垂直方向的元素外边距相遇时

会发生合并合并之后的外边距高度取较大者

2.父子元素

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上下外边距也会发生合并

3.空元素,指是没有子元素或者没有文字内容的元素,例如
,

等,在一个空元素有上下边距时,如果没有border或者padding,则元素上下边距也会发生合并

注意点:

1>.水平外边距不会发生叠加

2>.外边距叠加只针对block以及inline-块元素,不包含inline元素.因为inline元素的margin-top和margin-bottom设置无效

块级元素:

常见块级元素:div,h1^h6,p,,hr,ol,ul

块级元素特点:

1>.独占一行

2>.可以包含其他块级/行内元素

3>.可以定义宽高

4>.可以定义四个方向的margin属性

行内元素:

常见行内元素:strong,span,em,u,a

行内元素特点:

1>.与其他行内元素同行显示

2>.行内元素可以包含其他行内元素,但是不能包行块级元素

3>.不能改变宽高

4>.可以定义margin-left和margin-right,但是不能定义margin-top,margin-bottom

display属性:

1.元素之间类型的转换使用display属性

display常见属性: inline/block/inline-block/table/table-cell(以表格单元格形式显示,类似于td)/none(隐藏元素)

2.inline-block: 行内块级元素

+ 特点: 同行 ; 能够定义宽高 ; 能定义四个方向的margin

+ 常见的标签: img , input

+ 去除行内块级元素默认的间隙:父元素设置font-size:0

3.table-cell

图片垂直居中元素

4.none

+隐藏元素对比 v i s i d i l i t y 属性

居中:

1:'text-align:center'实现的是文字,inline元素和inline-block元素的居中

2:'margin:0 auto'实现是块级的居中

3:'text-align:center'定义在父类元素,'margin:0 auto'定义在自身元素

浮动布局:

float: left/right/none;(当一个一个元素设置浮动之后,不管这个元素之前是inline,inline-block或者其他类型,都会变成block;设置浮动之后,会脱离文档流)

清除浮动:

方式一:额外标签法(clear: left/right/both;)

方式二:它在div内容的后面插入内容.

clearfix:after {

content: '';

display: block;

height: 0;

clear: both;

}

方式三:table表格样式,显示在一行

.clearfix:before,.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

zoom: 1;

}

方式四:在父元素中添加overflow: hidden

元素溢出处理:

overflow: visible 默认值,溢出内容可见

hidden  溢出内容隐藏

scroll  溢出滚动条显示

auto    自动,需要的时候自动添加滚动条