结构(HTML、XHTML、xml) 表现(css) 行为(js)
【代码调试】
浏览器中的f12
【HTML5的基本结构】
声明文档类型
跟标签
头部
网页标题
编码格式
主体内容
<标签 属性=”” 属性=”” >标签>
空标签(单标签)
<标签 属性=”” 属性=”” />
尖括号里的第一个单词叫做:标签、标记、元素
属性与标签或者属性之间有空格隔开,
属性值与属性用等号连接,属性值必须写在引号里边
属性可有多个不分先后顺序
单标签必须有结束的反斜杠(XHTML)
标题:h1-h6 默认是黑色字体加粗效果,h1最大 h6最小
段落标签:p 段与段之间默认空一行
加粗 b strong
倾斜 i em
下划线 u
删除线 del
上角标sup
下角标sub
空格:
版权图标:©
大于号:>
小于号:<
向下小三角:∨
强制换行 br(单标签)
水平线hr(单标签)
有序列表:
列表符号的类型type
列表符号从哪里开始start
路径:同一文件下直接写文件名+拓展名
目标文件所在文件夹与当前文件在同一目录下写目标文件夹名称/目标文件名+拓展名
当前文件所在文件夹与目标文件在同一目录下 …/目标文件名+拓展名
相同的:都有利于SEO(搜索引擎的优化)
不同的:alt是当图片出现错误时显示的文字信息
Title是当鼠标放在图片上时显示的提示信息
【超链接】
显示效果
超链接的打开方式target:值_self 默认值在当前页面打开
_blank在新的窗口打开
空连接
”http://www.baidu.com” target=””>具体网址
Div 外围结构
Span 设置某个节点
"1" width="300" height="500" cellspacing="0" cellpadding="10" align="center">
表格标题
列标题
列标题
列标题
"2">1
"3">3
4
5
7
8
"center" valign="top">
1
2
3
"center">1
"bottom">2
3
表格标题caption
表格列标题把td换成th 文字默认水平垂直居中加粗
单元格与单元格的间距cellspacing
内容和边界之间的距离cellpadding
列合并colspan 同一行的不同列 与谁合并将谁删除
行合并rowspan 同一列的不同行 与谁合并将谁删除
水平对齐方式align:值left center right
如果align给table写,指整个表格的水平对齐方式
Align给tr写,指这一行内容的水平对齐方式
Algin给td写,指这一个单元格内容的水平对齐方式
垂直对齐方式:valign:值top middle bottom
Valign不能给table写
Valign给tr写,指这一行内容的垂直对齐方式
valign给td写,指这一个单元格内容的垂直对齐方式
表单的作用:收集用户信息
表单域:form
表单域form(如果没有form不影响显示效果,但是影响提交按钮)
Form里边可以设置:
name 表单的名称
method 表单的提交方式方法(值 get 、post)
Get:从服务器上获取
Post:向服务器上传 安全性高
Action:表单的提交路径
Target:表单提交时的打开方式
表单控件(表单元素):input
文本框text
密码框password
单选按钮radio(名称name一定要有一组保持一致)
复选框checkbox
按钮button
提交按钮submit
重置按钮reset
值 | 含义 |
---|---|
Type=“email” | 限制用户输入必须为Email类型 |
Type=“url” | 限制用户输入必须为URL类型 |
Type=“date” | 限制用户输入必须为日期类型 |
Type=“time” | 限制用户输入必须为时间类型 |
Type=“month” | 限制用户输入必须为月类型 |
Type=“week” | 限制用户输入必须为周类型 |
Type=“number” | 限制用户输入必须为数字类型 |
Type=“range” | 产生一个滑动条的表单 |
Type=“search” | 产生一个搜索意义的表单 配合results="n"属性 C |
Type=“color” | 生成一个颜色选择表单 |
属性 | 值 | 说明 |
---|---|---|
Required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
Autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
Pattern | 正则表达式 | 输入的内容必须匹配到指定正则 pattern="\d{3}" |
autocomplete | 历史记录 |
pattern="\d{3}"输入的是数字不能超过3个
novalidate:不进行验证直接提交
Autocomplete="on"自动补全列表
"search" name="move" list="search" >
output的使用
表单元素的属性: 禁用disabled 默认选中checked 下拉菜单的默认选中selected 长度size 最大输入字符数maxlength 多行文本域 输入字符数cols 输入多少行出现滚动条rows
1、 视频的插入(两种方式)
(type必加属性)
2、 Width height设置视频的宽高
3、 Autoplay 视频就绪自动播放
4、 Controls 向用户显示播放控件
Controls在谷歌快进不兼容,火狐兼容
5、 Poster 加载等待的画面图片
6、 Loop 播放完是否继续播放该视频,循环播放
(有意义的div)ie8不支持需要添加兼容的js代码
Header 顶部
Nav 导航
Section 内容区域
Main 内容区域
Footer 底部
Aside 侧边栏
Article 文章
Hgroup 标题组
Figure 》figcaption 媒体组
Mark 默认选中
Details 详细信息
Ruby rp rt 注释标签
视频支持的格式:mp4,webm,ogg
音频支持的格式:mp3,mp4,ogg
flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.
其他浏览器:
"transparent" />
IE浏览器:
给
说明:
behavior(行为)="scroll(滚动)/alternate(晃动)
direction(方向)="up(从下向上)/down(从上向下)/left(从右向
左)/right(从左向右)“
scrollamount(滚动速度)="value"
height="value(上下滚动范围)"
width=""(左右滚动范围
Css的语法由两部分组成:选择器和声明,其中声明又包括属性和属性值
选择器{属性:属性值;}
选择器表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.
属性和属性值用冒号连接,分号结束,属性可以有多个,不分先后顺序,如果是最后一个属性值,分号可以省略(不建议省略)
放在head与head直接用style包裹
"Color: red;border: 1px dashed black" >内联样式表
"目标文件路径" rel="stylesheet" type="text/css" />
说明:
写在head与head之间。
rel:用于定义文档关联,表示关联样式表;
type:定义文档类型;
(2)导入写法import
说明:@和import之间没有空格 url和小括号之间也没有空格;括号内部加引
号,必须结尾以分号结束;
4、css样式表的优先级:
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0;padding:0; }
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA;
background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:0;}
body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0
auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}
ID:结构化 header footer
class: .border0 . red .font12 .clear
2、CSS命名规则
类型选择符是根据html语言中的标记来直接定义
语法:标签名称 {属性:属性值;}
实例: div { width: 30px}
所有的页面元素都可以作为选择符;
用法:
(1)如果想改变某个元素的默认样式时,可以使用标记选择符;
(2)当统一文档某个元素的显示效果时,可以使用标记选择符;
类选择器使用必须要通过引用才能生效
语法:.class名称{属性:属性值;}
用法:class选择符更适合定义一类样式;
(1)当我们使用类选择符时,应先为每个元素定义一个类名,
(2)类选择符的语法格式:
如:
.top{属性:属性值;}
起名规则:不能用汉字、数字开头,最好不要使用HTML的关键字(HTML的标签)
一个标签可以引用多个class名称中间用空格隔开
语法:
例如: #id名{属性:属性值;}
说明:
(1)可以给每个元素使用id选择符,但id是元素的唯一标识符,不可出现重复的id名;
如:"top">
(2)id选择符的语法格式是“#”加上自定义的id名
如:#box{width:300px; height:300px;}
(3) 起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)
如:head标记
(4)一个id名称只能在文档中出现一次,因为id是唯一的
(5) 最大的用处:创建网页的外围结构。
语法:*{属性:属性值;}
说明:
通配选择符的写法是“*”,其含义就是所有元素;表示该样式适用所有网页元素;
用法:常用来重置样式。
语法:选择器1,……,选择器5 {属性:属性值;}
说明:当有多个选择器应用相同的样式时,可以将每个选择器用“,”分隔的方式,合并为一组。
实例:.div, #div, p{width:100px;}
语法:选择器1 选择器2{属性:属性值;}
说明:选择器1和选择器2用空格隔开,含义就是选择器1中包含的所有选择器2
实例: div ul li { height:200px; }
子选择器
语法:选择符1>选择符2{属性:属性值;}
作用:只对选择符1下的子元素选择符2起作用;
子选择器与后代选择器的区别
①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} 【ul和li之间用空格隔开】子选择器的标识为:>
如:ul>li{width:150px;}【ul和li之间用>隔开】
②功能不一样:后代选择器是选择ul包围的 所有元素中的 所有li元素,包括子元素、孙元素、曾孙元素等等等。子选择
器仅仅选择ul包围的 子元素中的 li元素,不包括孙元素、曾孙元素等等等。
③兼容性不一样:后代选择器是所有浏览器都兼容的,都可使用。子选择器在IE6、IE7、IE8中则是不被支持的选择
a:link {color: #FF0000;} /* 未访问的链接 */
a:visited {color: #00FF00;} /* 已访问的链接 */
a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */
a:active {color: #0000FF;} /* 选定的链接 */
后代选择器 空格
子代选择器 大于号
相邻兄弟选中 加号 (向下找相邻的第一个兄弟)
通用选择权 波浪线 (向下找所有的这类兄弟)
:link
:hover
:visited
:active
:focus
:target (指超链接锚点所指id所在元素)
:checked :enabled :disabled
:first-child :last-child 整个结构中的第一个和最好一个
:first-of-type :last-of-type 这个类型的第一个和最后一个
:nth-child(n) 这个结构中的第几个 可写2n或者even偶数 奇数2n+1或2n-1 或者odd
:nth-of-type(n) 这个类型的第几个
:nth-last-child(n) 整个结构中倒数第几个
:nth-last-of-type(n) 这个类型的倒数第几个
:only-child 整个结构中只有这一个标签其他任何标签都不存在
:only-of-type 这个类型只存在一个的时候
:empty当元素内容为空时的设置
值 | 含义 |
---|---|
input[value]{background: #ff0;} | 含有指定属性 |
input[value=“abc”]{background: #00f;} | 含有指定属性值 |
input[value^=“abc”]{background: #0f0;} | 属性值起始位置存在的元素 |
input[value$=“abc”]{background: #0ff;} | 属性值结束位置存在的元素 |
input[value*=“abc”]{background: #f0f;} | 属性值任意位置存在的元素 |
:first-line
:first-letter
:before
:after
按照以上顺序编写都可正常显示样式,否则有些状态不能正常显示
当对同一个元素设置不同的样式表每个样式表都有相同的属性时内联样式表的优先级最高,内部和外部与书写顺序有关,谁在后边谁生效
当给一个元素同时设置多个选择器时,每个选择器都有相同的属性
继承的权重是最小的0000
标签选择器的权重是0001
Class选择器的权重是0010
ID选择器的权重是0100
内联样式表的权重是1000
后代选择器的权重是包含之和
如果属性值后边有空格+!important则其变成正无穷大
值: 可以是直接写颜色的英文单词 color:red;
六个十六进制数(常用方式在ps里查找) color:#ff0000 如果两两相同可以缩写成三个值 color:#f00;
三原色设置颜色 color:rgb(255,0,0)
三原色加透明度 color:rgba(255,0,0,0.5) a透明度取值0-1 (css3.0 低版本浏览器不支持)
网页中常用文字大小是偶数12、14、16、18、
单位px(常用) pt(打印单位) rem(移动端用的单位) em
默认情况下1em=16px=1rem(网页默认文字大小是16px) 9pt=12px
如果由psd源文件可以使用快捷键t点击文字在最上边的菜单栏即可查看文字大小,没有源文件用选框工具去测量
如果是汉字字体需要添加引号font-family:”楷体”;
如果是由一个英文单词组成的字体不需要添加引号font-family:Verdana;
如果是由一组英文单词组成的字体需要添加引号font-family:“Times New Roman”;
可以为一个标签同时设置多个字体,用逗号隔开,浏览器会优先解析第一个字体,如果第一个字体不存在那么向后解析第二个,第二个不存在继续向后解析第三个…如果设置的所有字体都不存在,将按照系统默认字体去解析。
值 加粗bold 更粗bolder 不加粗normal
100-500不加粗 600-900加粗
值 倾斜italic /oblique 不倾斜normal
将小写字母变成小型的大写字母font-variant
值 小写字母变成小型的大写字母small-caps 默认normal
值: 可以是直接写颜色的英文单词 color:red;
六个十六进制数(常用方式在ps里查找) color:#ff0000 如果两两相同可以缩写成三个值 color:#f00;
三原色设置颜色 color:rgb(255,0,0)
三原色加透明度 color:rgba(255,0,0,0.5) a透明度取值0-1 (css3.0 低版本浏览器不支持)
值:可以直接写数字代表的是倍数(文字大小的倍数)line-height:2;
可以是具体的像素值 line-height:24px;
如果单行文字垂直方向居中显示可以设置line-height与元素的height的值是一样的
font:font-variant font-weight font-style font-size/line-height font-family;(文字大小及字体一定在最后)
例:font:normal italic bold 30px/60px “楷体”;
值 下划线underline 上划线overline 中划线(删除线)line-through
没有线none -> 应用于超链接最多,因为超链接默认带下划线
三条线都存在;text-decoration:underline line-through overline
值: 取决于文字大小,如果文字大小16px 那么两个字是32px(如果设置负值则前两个字往前走两个字的长度)
字符间距:letter-spacing(可以设置负值)(字与字之间的距离,默认设置是0)
词间距:word-spacing(可以设置负值)(在编辑的时候中间写个空格,编译器才认为这个是一个词,如果不带空格那不生效)
值:首字母大写capitalize
全部大写uppercase
全部小写 lowercase
值:左left 中center 右right
两端对齐justify(针对英文单词好用)
垂直对齐方式:vertical-align(只针对图片生效)
值:上top 中middle 下bottom 基线baseline
值:水平偏移 垂直偏移 模糊半径 阴影颜色
可以为一个元素设置多个阴影中间用逗号隔开
可以单独设置某一个方向border-top/right/left/bottom
线型:实线solid 虚线dashed 点状线dotted 双实线double 没有线none
边框属性border是border-width、border-style、border-color的缩写
用边框制作三角形 transparent透明
Div{
Width:0;
Border:20px solid transparent;
Border-left-color:#f00;
}
Border-image:图片路径 裁切位置/边框宽度 重复方式
图片做背景图片边框:
border-image : url( img/border1.png) 27 27 27 27/27px;
等于下面这几个属性
border-image-source: url( img / border1.png);
border-image-slice: 27;/*图片的裁切位置*/
border-image-width: 27px;
border-image-repeat: stretch;
背景图片background-image:url(路径) 默认水平垂直平铺直到铺满
background-repeat:repeat\ no-repeat\repeat-x\repeat-y
background-position:值1 值2(先左右 上下)(可设置负值)
可以是具体的方向值:left、center、right top、center bottom,如果上下左右都处于居中的位置那么可以写成background-position:center;
可以写具体的数值,正值是向右向下 负值向左向上。如果是图片整合会用到负值,那么就可以写成background-position:-图片所占视觉宽度 0;(图片左右整合的情况下);background-position:0 -图片所占视觉宽度 ;(图片上下整合的情况下)
background-attachment:scroll(默认值不固定)、fixed(固定)
背景颜色和背景图片可以同时存在
list-style-type:none无 disc 实心圆
list-style-image:url(路径);
list-style-position:inside(里边) outside(默认值外边)
list-style-type:none;或者list-style:none;
网页中的图片有两种方式加载:插入图片、背景图片
背景图片上可以写字,插入的图片不可以
Jpg:有损压缩格式,不支持透明和动画
Png:有损压缩格式,支持透明不支持动画
Gif:有损压缩格式,支持透明和动画
Float: left/right/none(默认值)
效果:
可以将自上而下排列的元素变成自左向右在一排显示,浮动的元素后边一个紧跟着前边一个显示(向右浮动时可能会造成反向),如果父元素的宽度不够,那么浮动的子元素会自动换行显示,元素一旦float就会脱离正常的文档流,但是会占据自身的空间,造成文字环绕效果
Clear:left、right、both
清除上面浮动对自身的影响,一般情况下想让某一个模块换行显示就可以直接 clear:both;
盒模型的组成:margin border padding 内容(content)
一个值:上下左右 padding:10px;
两个值:上下 左右 padding:10px 20px;
三个值:上 左右 下 padding:10px 20px 30px;
四个值:上 右 下 左 padding:10px 20px 30px 40px;
可以设置具体某一个方向padding-left/right/top/bottom:10px;
Padding会影响盒子的实际大小,padding区域可以出现背景颜色和背景图片,padding不可以设置负值
一个值:上下左右 margin:10px;
两个值:上下 左右 margin:10px 20px;
三个值:上 左右 下 margin:10px 20px 30px;
四个值:上 右 下 左 margin:10px 20px 30px 40px;
可以设置具体某一个方向margin-left/right/top/bottom:10px;
margin区域不可以出现背景颜色和背景图片,margin可以设置负值
如果单独一个盒子时margin不会影响盒子的实际大小,
如果一个大盒子里边摆放多个小盒子,此时小盒子有margin会影响盒子的摆放(此时会影响盒子的实际大小)
宽=(margin-left)+(border-left)+(padding-left)+width+(padding-right)+(border-right)+(margin-right)
高=(margin-top)+(border-top)+(padding-top)+height+(padding-bottom)+(border-bottom)+(margin-bottom)
1、给父元素添加padding,padding会影响盒子的实际大小
2、给父元素添加border,border会影响盒子的实际大小
3、给父元素添加float,float会脱离正常文档流,导致margin:0 auto不生效
4、给父元素添加overflow:hidden; overflow会将溢出的内容裁切
5、给自身写float,float会脱离正常文档流
上下margin会发生重叠(上下盒子都不设置float的情况下,上margin-bottom,下margin-top 这样设置的话,只有值大的那个生效),取较大值,如果两个都有float属性那么上下margin是两者之和,上边flaot,下边清除float,那么两者之间的距离是float元素的值
左右margin两者之和
能用padding不用margin(上下)
如果没有会发生什么
IE(ie8以下)浏览器会触发怪异盒模型:怪异盒模型如何解析宽高:
实际width、height(给定的宽高)=border+padding+内容都计算在内
标准盒模型实际宽高计算方式:border+padding+width、height(给定宽高)
怪异盒模型与标准盒模型转换属性box-sizing:
值border-box 为怪异盒模型
Content-box为标准盒模型 (默认值)
值 visible:默认值,内容超出会溢出
Hidden:溢出裁切,超出内容不可见
Scorll:以滚动条形式显示超出内容,超出内容可见
Auto:超出显示滚动条,不超出不显示
Inherit:从父元素中继承overflow属性值
值 pre:将所有的空格以及回车换行都解析出来,文字遇到边界不会换行,遇到br会换行
Pre-line:将回车换行的空格解析出来,内容中间以及缩进的空格不解析,遇到边界内容会换行显示
Pre-wrap:将所有的空格以及回车换行都解析出来,文字遇到边界会换行
Nowrap:强制在一排显示,将所有空格以及回车换行都忽略,内容不会换行显示,遇到br会换行
Clip:裁切
Ellipsis:省略号
有一定的宽度:width:value;
强制在一排显示:white-space:nowrap;
溢出裁切: overflow:hidden;
显示省略号:text-overflow:ellipsis;
块状元素 内联元素
Div是块状元素典型的代表
Span是内联元素典型的代表
块状元素与内联元素的区别:
块状元素可以设置宽度和高度,内联元素不可以,内联元素的宽高就是其内容。
块状元素自上而下独占一行,内联元素自左向右在一排显示,直到遇到边界换行
块状元素与内联元素都遵循盒模型设置(border、padding、margin)但是内联元素的某些属性不能正常显示
块状元素一般作为其他内联元素的盒子使用。
常见的块状元素:div h1-h6 p ul ol li dl dt dd table tr form hr
常见的内联元素:a span b strong i em u br img input textarea select option
属性:display
值:block:变成块状元素(显示) 如果给元素添加float属性,相当于给元素添加display:block
Inline:变成内联元素
Inline-block:行内块 可以设置宽度和高度,支持vertical-align
None:隐藏
大多数块状元素的display属性值是block,li的display属性值是list-item
大多数内联元素的display属性值是inline,img、input、select、textarea的display属性值是inline-block
置换元素:通过属性值决定其显示效果的元素,比如img input select textarea
等,他们标签内部的内容通常不会直接显示到浏览器中,而很多标签比如h p div 等,他们的内容都会直接显示到浏览器中,而这些大多数元素都是非置换元素,具体看另一篇文章关于置换元素和非置换元素详解
属性position
值 static:默认值 静态的
Relative:相对定位,相对于自身原来位置的偏移,不会脱离正常的文档流,不占据空间(不影响其他元素的空间)
Absolute:绝对定位,会脱离正常文档流,不占据空间(不影响其他元素的空间),根据离其最近的有定位的父元素进行定位,如果父元素都不存在定位,那么根据浏览器窗口去定位。
Fixed:固定定位,无论窗口是否出现滚动条,用于处在给定位置保持不动
Sticky:粘性定位 做吸顶效果时top一定要为0
如果元素设置定位属性后,宽度没有设置,那么此时宽度时内容的宽度。如果想宽度是百分百那么需要手动添加
如果元素设置定位后会叠加在一起,谁在后边谁在上边显示。
属性:Z-index:显示顺序
必须与定位属性连用才能生效。值越大越在上边显示,越小越在下边,默认值是auto,值可以无穷大也可以无穷小,但是必须是整数.
div{
width: 200px;
height: 100px;
background: #f00;
position: absolute/fixed;
left: 50%;
top: 50%;
margin-top:-50px;
margin-left: -100px;
}
div{
width: 200px;
height: 100px;
background: #f00;
position: absolute/fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;}
超链接应用的一种
想跳转到哪,给对应的位置添加id选择器
定义:是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
命名锚点链接的应用:在同一页面内的不同位置进行跳转。
制作锚标记:
1)给元素定义命名锚记名
语法:<标记 id=“命名锚记名称”> 标记>
2)连接命名锚记
语法:
Rgba(css3出现,低版本浏览器不支持) 内容不会透明
Opacity值0-1 内容会透明
Filter:alpha(opacity=”值0-100”) 兼容ie 内容会透明
.triangle{
width: 0px;
height: 0px;
border-top: 200px solid #00a497;
border-bottom: 200px solid #cc7eb1;
border-left: 200px solid #165e83;
border-right: 200px solid #c85179;
}
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。
(1)宽度自适应
元素宽度设置为100%。(块元素宽度默认为100%)
(2)高度自适应
元素的高度自适应: 设置如: div {height : auto;}
元素高宽最大、最小值设置
min-height(最小高度)
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注:IE6及以下版本不识别该组属性。
1、如果不写宽度默认是(块状元素默认是浏览器的宽,内联元素默认是内容的宽度) 默认换行显示
2、设置宽度为auto(块状元素默认是浏览器的宽,内联元素默认是内容的宽度) 默认换行显示
3、设置min-width
宽度自适应可以写一个min-width,如果小于最小的宽度那么浏览器将以滚动条的形式去显示,如果大于最小的宽度浏览器默认会占一整行
Max-width元素的宽度多大可以达到的值,可以无限缩小但是不能放大
1、如果不写高度默认是内容撑开
2、设置高度为auto 也是有内容撑开
3、设置min-height 会随内容的增多而变大
12的显示效果一样,如果里边没有任何内容,那么元素就没有高度,第3种如果没有内容,那么元素的高度应该是min-height的值
Max-height:元素如果没有内容那么高度就为零,如果有内容那么高度最大会是max-height的值,内容比较多会超出(溢出)
1、min-height:value; _height:value;(下划线写法ie6识别)
2、Min-height:value; height:auto !important; height:value;
第二种方式相对来说是最好的:第一种利用的是ie6识别下划线的写法,其他浏览器不识别,如果一旦ie6不识别此属性那么此方法将不可用
产生原因:子元素float,父元素高度自适应
解决方法:
1、给父元素添加overflow:hidden;
优点:简单易记
缺点:如果父元素中有内容溢出会被裁切
2、给浮动的元素后边添加一个空div 设置:clear:both;height:0;overflow:hidden;
优点:如果父元素中有内容溢出不会被裁切
缺点:不利于SEO(SEO喜欢结构清晰的页面,结构越简单越好,能用一个标签解决不用两个标签)
3、万能清除法父元素:after{content:””; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}
优点:有利于SEO,溢出不会裁切
缺点:复杂不易记
4、父元素设置高度
都可以实现隐藏:visibility是内容隐藏,但是位置会保留,display彻底隐藏位置也不存在
将HTML,body{height:100%;}
元素本身{width:100%; height:100%;}
由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各
种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置
的种种技术壁垒,都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去
克服的。
将结束标签例如与img在同一排显示(只有ie6支持)
将图片变成块状display:block/
vertical-align:top/middle/bottom
给图片写float
给父元素设置font-size:0;
如果图片是通过超链接加载的那么在ie浏览器中会出现边框:将图片的边框设置border:0/none
当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界加
倍显示。
给float的元素添加display:inline;
描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致
50%加50%大于100%的情况。(也会受系统影响)
给浮动到右边的添加clear:right
Cursor:pointer(鼠标变成小手型)
Input写float属性
1、给按钮单独设置高度
2、用其他标签代替按钮
3、给按钮外部嵌套一个其他标签
4、用背景图片代替
Opacity:value
Filter:alpha(opacity=value)
下划线写法例如:_height(ie6支持)
星号写法例如:*height(ie6,ie7支持)
关键字过滤 !important
反斜杠9 例如:height:100px\9;
Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中,所以占有极高的市场份额,又称IE内核或是MSHTML,此内核只能应用于windows平台,且是不开源的。
Gecko(壁虎):代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台,能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
Webkit : 代表作品Safari、Chrome , 是一个开源项目。
Presto : 代表作品Opera ,Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
Blink :由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。
表单的组成:表单域form 表单控件input 提示信息label
表单字段集:fieldset
表单字段集标题:legend 放在fieldset里的第一个位置
提示信息label (提高用户体验)
表单字段集用法,例如:
"text" id="use" />
文件域:
"file" multiple>
Multiple:实现选中多个文件
图片域:"image" src="pic.jpg" width="100" title="提示信息">
表格按数据行分组:表头thead 表体tbody 表尾tfoot
rules="groups/rows/cols/all/none" 添加组分隔线
说明:
rows:位于行之间的线条
cols:位于列之间的线条
all:位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
(1) "分组列数">
(2) " " />
说明:
1)col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2)span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组。
3)可以通过给table添加rules="groups"属性来给分组列添加组的分割线。
注意:虽然col和colgroup具有相同的功能,但是,我们只能使用colgroup元素来设置表格内容部分分割线(rules)应该处于的位置,而col没有这个功能。
1、CSS文档统筹
"keywords" content="" />向搜索引擎说明你的网页的关键词;
"description" content=""/>告诉搜索引擎你的站点的主要内容;
"generator" content="">用以说明生成工具(如Microsoft FrontPage 4.0)等;
"author" content="你的姓名">告诉搜索引擎你的站点的制作的作者;
详情点击这里
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Blocklevel box(块)参与, 它规定了内部的Blocklevel Box如何布局,并且与这个区域外部毫不相干。
双飞翼布局、圣杯布局
.aside{width:100px; height:150px; float:left; background:#f66;}
.main{height:200px; background:#fcc;}
给main添加overflow: hidden;
给div添加overflow:hidden
给第二个p添加一个盒子并添加overflow:hidden
属性 | 含义 | 值 |
---|---|---|
Backgound-clip: | 背景显示的范围 | bordr-box padding-box content-box |
Bacground-origin: | 背景绘制起点 | bordr-box padding-box content-box |
Background-size: | 背景图片的尺寸 | 值cover 等比例缩放图片直到有一个方向不能再进行缩放为止,背景图不一定全部显示在元素区域,元素的所有区域都会出现背景图;值Contain:等比例缩放,背景图片可以完全显示在元素区域,但是并不一定是能够填满整个元素区域;注:可以为一个标签设置多张背景图片用逗号隔开,谁写在前边谁在上边显示(注意顺序问题) |
字体图标库
@font-face{
font-family:zi;
src:url(ESTRE.TTF);
}
p{font-family: zi;}
引用css样式表
"iconfont icon-koubeilogo">
"iconfont">;
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
display:flex;
flex-direction: row(自左向右排列 默认值)
column(自上向下排列)
row-reverse(自左向右排列翻转)
Column-reverse(自上而下排列翻转)
主轴取决于排列方式如果是自左向右排列,那么水平方向是主轴
如果自上而下排序,那么垂直方向是主轴
flex-direction:flex-start()
Center(居中)
Flex-end
Space-around(中间是两端的倍数)
Space-between(两端对齐空间分配到中间)
侧轴取决于排列方式如果是自左向右排列,那么垂直方向是侧轴 如果自上而下排序,那么水平方向是侧轴
align-items: flex-start
Center
Flex-end
如果弹性子元素的宽度超出一排显示的范围时是否允许弹性子元素换行显示
flex-wrap:wrap(允许换行)
nowrap(不允许换行 默认值)
wrap-reverse(翻转)
如果弹性子元素存在换行显示,用align-content设置换行显示后的行的对齐方式(与align-items比较像,但是他不是设置弹性子元素的对齐,而是设置各行的对齐)
align-content:Flex-start
Center
Flex-end
Space-between
Space-around
7、弹性子元素在父元素中所占份数flex(将父元素平分)
8、分配剩余空间flex-grow
9、设置弹性子元素的宽度flex-basis相当于width
10、设置弹性子元素的伸缩比例flex-shrink:1(可以缩放) /0(不可以缩放)
11、Flex是flex-basis flex-grow flex-shrink的缩写 默认值0 1 auto
12、Order弹性子元素的显示顺序值越小越靠前显示(可以设置负值)
13、某一个弹性子元素的对齐方式align-self:flex-start、center、flex-end
媒体查询为了适应不同的屏幕尺寸,时网页显示效果更佳人性化。可以去更改网页的排版,为不同的尺寸设置对于的css属性及值.
如何获取移动端屏幕尺寸:
"viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
mediatype媒体类型
§ all全部
§ screen用于电脑屏幕,平板电脑,智能手机等。
§ print用于打印机和打印预览
o and|not媒体条件 and关键字
o 媒体功能
§ min-width最小宽度
§ min-height最小高度
§ max-width最大宽度
§ max-height最大高度
§ orientation:portrait竖屏状态
§ orientation:landscape横屏状态下
o link写法
o
o 扩展,实际工作中媒体查询经常操作的属性
@media all and (orientation:portrait) {
body{background:#ff0;}
}
@media all and (orientation:landscape) {
body{background: #00f;}
}
§ display:block;display:none
§ float:none
§ width:100%
§ text-align:center
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
【css注释】
/*css注释*/