html+css总结
图片引入标签:
超链接标签:
base标签:
base标签可以给页面的链接加上默认的路径，或者默认的打开方式。
表格:
列表:
表单:
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 自动,需要的时候自动添加滚动条
