HTML1(HTML结构、规范、标签)
标记(标签)---<单词>
挨着<是标记
表型:每一个标签都有一定的表现形式
表意:每一个标签都有一定的意义
双标签---语法:<标签 属性名="属性值">...内容...</标签>
单标签---语法：<标签 属性名="属性值">
Html基本骨架结构
<html>
<head>
<meta content="text/html;charest=UTF-8"/>
<title></title>
</head>
<body>
</body>
</html>
<html>含义:告诉浏览器，网页的代码用什么格式来解析
<head>含义：告诉浏览器网页的汉字用什么字符集
gb2312简体中文，gbk国标码，utf-8多国语言
<title>:便于搜索引擎
<body>:网页内容
Html书写规范
1、不区分大小写，2、顺序嵌套，不能交叉，3、一定要闭合（/），4、标签的属性和个数是w3c规定好的，5、属性值要用双引号（""）引起来。
Html文本标签
1、Font设置文本的颜色/大小/字体
<font>设置的内容</font>
属性：color，size，face
<b></b>与<strong></strong>
<i></i>与<em></em>
<u></u>与<ins></ins>
<sup></sup>与<sub></sub>上下标
Html段落标签
<p></p>
段落的属性
ALign取值left，center，right <h1 align="center">
<h1></h1>...<h6></h6>
Pre:标签:预定义标签
Div:本身无含义，自己独占一行，划分网页结构，结合Css样式一起使用。
Span:本身无含义，结合Css样式一起使用构成功能。
块标签--<h1></h1> <p></p> <div></div>
行内标签--<u></u〉<em></em> <span></span>
---通常块标签里包括行内标签---
列表:Ul属性--Type类型：设置列表前面符号的样式，取值circle disc默认square
无序列表:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表:<ol></ol>
自定义列表:
<dl>
<dt></dt>
<dd></dd>
</dl>
特殊字符:
©
<和>和¥和™和&
HTML2（图片、表格、链接和meta标签 ）
图片标签（单标签，行内标签）
图片语法：<img 属性名="属性值"/>
图片属性
图片路径：src="图片的地址"(同一站点或同一文件夹)
图片宽度：width="数值"（像素px，不写单位）
图片高度：height="数值"（像素px，不写单位）例height="200"
图片边框：border="数值"
图片解释说明：alt="对图片的描述内容"
图片和内容左右、上下之间的距离:hspace="数值",vspace="数值"
注意：图片等比例变化只需要设置宽度或高度。
表格:
语法---
<table>
<tr>
<td>内容</td>
<td> </td>
</tr>
</table>
表格属性：
1、表格边框border="数值"，默认是0；
2、表格的宽度、高度width="",height=""
3、表格居中方式align="水平对齐方式"left，right，center
4、内容和单元格距离cellpadding="数值"默认数值是2像素
5、单元格和单元格距离cellspacing="数值"默认数值是2像素
6、bgcolor=""，background="图片的地址"注意：背景图片的优先级高于背景颜色
<tr>的属性：Height，Bgcolor，Background，Align水平对齐方式，Valign（top,middle,bottom）
<td>单元格属性：Bgcolor，Background，width，height，align
表格的扩充:
合并单元格的问题
横向合并：左右合并Colspan="数值"
纵向合并：rowspan="数值"
链接
语法：<a 属性="属性值">内容</a>
属性---链接的地址 href="链接的地址url"url绝对地址和相对地址
Target，_blank新的，_self默认打开方式
<a href="http://www.XXX.com" target="_blank">打开一个网页</a>
Name定义锚点的位置
绝对地址：1、<a href="http://www.XXX.com">网页</a>,2、本地的地址<a href="E:\CZwj\CZwenjian\lianxi\lianxi2-1.html">本地</a>
相对地址：在同一个站点，同一个文件夹或父文件或子文件：直接写文件名，../文件名，XX/文件名...
<a href="../../链接.html">首页</a>登录 添加新闻
特殊链接：下载链接（无需下载和必须.zip、.exe）
邮件链接：<a href="mailto:gongfuxiong@whereit.cn">功夫熊</a>
空链接:<a href="#">首页</a>或<a href="javascript:void(0)">首页</a>
Javascript链接：<a href="javascript:window.close()">关闭</a>
Name定义锚点的名称
同一页面不同区域跳转
定义锚点
<a name="自定义名称"></a>在<a></a>不加内容，给链接中的target用。
跳转锚点
<a href=”#锚点名称”>内容</a>
颜色代码：
英文 red green blue
十六进制 #ff0000 #00ff00 #0000ff
十进制 rgb(255,0,0) green(0,255,0) blue(0,0,255)
meta标签
描述网页文档的属性
http-equiv和name
http-equiv：模拟http文件头信息，当内容从服务器端发送到客户端，告诉浏览器如何正确显示信息。
字符集:<meta http-equiv="content-type" content="text/html;charest=utf-8"/>多国语言，charest=gbk国标码，charest=gb2312简体中文
网页自动刷新
<meta http-equiv="refresh" content="5"/>
<meta http-equiv="refresh"content="8;http://www.XXX.com"/>等待8秒自动跳转网页
Name可以设置网页关键字，描述信息等
<meta name="keywords" content="关键字"/>
<meta name="description" content="网站的描述信息"/>
<meta name="author" content="网站作者"/>
HTML3（表单、表单属性和控件）
表单的介绍：获取客户端数据，有控件、输入框、复选框、按钮等
表单的功能：交互功能
表单工作原理：浏览有表单的页面，填写必要的信息，提交
对表单数据验证，是否符合要求，提交服务器，储入数据库
表单：前台的制作页面，php对数据的处理，添加数据，删除，更改，查询
表单的结构：
语法<form 属性="属性值">
控件
</form>
表单的属性：
1、Name表单的识别名称 一个页面有多个表单，通过表单名称辨别提交的哪个表单的数据
<form name="bill"></form>
<form name="game"></form>
2、Action="XX.php"对数据进行处理
Action=""对表单中的数据处理的程序就是在当前的文档
3、Method="get/post"把表单中的数据提交到服务器的方法，传递数据的方法
Get方法：默认的传递方法，通过地址来传递表单中的数据
特点：不安全，每次只能传递1024字节，不能上传附件
Post方法：数据传给文件处理程序
特点：相对安全，传递海量数据，能上传附件
控件：单行文本框、密码框、单选按钮、复选框、多行文本框、下拉列表、隐藏域、文件域、按钮
<input type="text"/>属性：
Name单行文本框的识别名称，可以自定义名称，起名要有意义，命名规则（开头字母或下划线，后面是字母数字下划线）
Size="数值"输入框宽度，以字符为单位
Maxlength="数值"最多允许输入字符数
Value="内容"设置输入框的初始值，在输入框中默认的内容
用户名:<input type="text" name="username" size="10" maxlength="30" value="请输入账号/用户名"/>
密码:语法<input type="password"/>属性:Name，Size，Maxlength，Value
Readonly只读属性，只能选中、不能修改，disabled禁止属性：不能选中、不能修改（以火狐为准）
单选按钮Radio：语法<input type="radio"/>
属性：Name,Value设置初始值，必须得写
复选框：<input type="checkbox"/>
属性：Name,Value,checked="checked"默认被选中项,
{[if in_array('1',$shuju.user_hobby)]} checked="checked" {[/if]},smarty中带判断条件的默认选中
多行文本框（双标签）:语法<textarea></textarea>---Name、Value（不要出现）、Rows、Cols
<textarea rows="10" clos="80" name="content">请输入留言，我暂时不在</textarea>
下拉列表：
语法<select name="">
<option value="">内容1</option>
<option>内容2</option>
</select>
select属性:name下拉列表识别名称，value代表每一项初始值selected='selected'默认被选中
隐藏域：隐藏起来，不是给客户看，给程序用的
<input type="hidden" name="id1"/>------outline:none(去除轮廓线)
文件域：语法<input type="file"/> 属性：Name文件域识别名称 Value：不写value，而是-选择文件就是value
按钮：
提交按钮<input type="submit" value="按钮上文字"/>，图片按钮<input type="image" src="图片的地址"/>
重置按钮<input type="reset" value="按钮上文字"/>
普通按钮<input type="button" value="按钮上文字"/>
Xhtml(可扩展的超文本标记语言)---取代html，pc机--面向移动端
语法
Xhtml语法更严格
Xhtml输入的标签和属性必须是小写
Xhtml单标签后必须加/，例如<br/>
属性必须双引号("")
必须有dtd(文档类型定义)---是一种验证机制，检验输入的xhtml是否符合规范
Dtd分类：过渡型xhtml-transitional-允许使用表现的标签和属性<b>,<i>,<font color="red">，<table bordercolor="red">
严格型xhtml-strict：不允许使用表现的标签和属性，<b><strong><u><table width=”300”>必须使用的是css样式来设置
框架型xhtml-frameset：给框架用
可以通过W3c测试dtd声明：http://wwww.w3.org
<td>请填写在工商局注册的公司/商号全称；<br/>无商号个体经营者填写执照上的姓名，如：张三（个体经营）</td>
http://www.runoob.com/相关学习网址
CSS-1（css样式、选择器、CSS属性）
问题1、样式优先级？
CSS（Cascading Style sheet）
一、
书写规范：h1{color:red;font-size:14px;}--注意;分号和单位
<style type="text/css">
p{
color:red;
font-size:20px;
}
</style>
二、书写方式：嵌入式，外链式，行内式
嵌入式：
<style type="text/css">
选择器{属性:属性值;}
</style>
外链式：
<link rel="stylesheet" type="text/css" href="CSS文件"/>
例：<link rel="stylesheet" type="text/css" href="index.css">
注意：1、可以引入多个2、一定要确认CSS文件被正确引入
行内式：
<标签名 style="格式声明语句1；格式声明语句2；"></style>
例：<div style="width:100px;height:100px;background-color:skyblue;"></div>
三、注释
格式：/*注释的内容*/
四、选择器：基本选择器、复合选择器、伪类选择器、属性选择器
并且选择器：p.test{color:red;} <p class="test">并且</p>//注意.test和p之间无空格，“并且”被选中变红色。
通用选择器：*｛margin:0px;｝
标签选择器：标签｛属性:属性值;｝
类选择器：.class属性值｛属性:属性值;｝使用：<h2 class="h">四大名著</h2>
id选择器：#h｛color:#00ff00;｝唯一性
五、CSS属性：height、width（auto、length:px、%）
CSS文本与字体样式属性:
font-size,font-style,font-family,font-weight,color,
text-align,text-decoration,text-indent(em占一汉字缩进),line-height（当文本高度与盒子一样，则垂直居中）
text-transform(uppercase,lowercase,capitalize)
复合选择器：多元素选择器---选择器1,选择器2{格式声明语句;}例：p,h1,h2{margin:0px;}
后代元素选择器：匹配子代及子代的所有后代 例：.box h3{color:#f00;}
子元素选择器：匹配子代 例：.box>h3{color:#foo;}
相邻元素选择器：只匹配同级、紧随且相邻的元素。 例：.box+h3{color:#f00;}
列表样式属性--指有序列表和无序列表
list-style-type(none,disc,square,circle)
list-style-position(inside,outside)
list-style-image(url)例：list-style-image:url(images/01.jpg)
list-style:例：list-style:none url(images/01.jpg) inside;//其中outside默认标记在外面
伪类选择器：给超级链接的不同状态设置样式。
:link{正常状态（未被访问状态）},:visited{访问过后状态},:hover{鼠标放上状态},:active{激活状态}
注意：超级链接的不同状态是有顺序的，不遵守则失效。
超级链接的美化：去除下划线，给超级链接设置一个颜色
a:link,a:visited{text-decoration:none;color:blue;}
a:hover{color:red; text-decoration:none;}
属性选择器：与标签的属性名和属性值有关
[attr]所有attr,[attr="val"]等于，[attr^="val"]开头,[attr$="val"]结尾,[attr*="val"]包含。例:font[color*="00"]{border:1px solid:red;}
CSS选择器两特性：继承性和优先级
继承性：1内层元素会将外层元素的样式继承2如果内层元素设置的样式一样时，内层元素会将外层元素样式覆盖。
3只有文本与字体样式能够被继承。
优先级：行内样式1000>id选择器100>类选择器10>标签选择器1
CSS-2（背景、列表、盒子、布局）
一、背景的属性
Background-color背景颜色，Background-image:url(图片的路径);
Background-repeat:图片平铺，no-repeat,tepeat-x,repeat-y,repeat(默认横纵平铺)
Background-position:图片的展开位置 例：background-position:水平 垂直方向;
水平：left,center,right 垂直：top,center,bottom
数值：正值 负值--例：background-position:30px 20px;
Background-attachment:背景附件，背景是否随着上方的内容一起滚动
取值：fixed 背景固定 scroll滚动
可以简写：Background:背景颜色 背景图片 背景图片是否平铺 （附件通常仅用body标签）水平 垂直;
例：background:blue url(images/01.jpg) no-repeat fixed 30px 20px;
Background-size:宽度,高度;
二、列表
1、去掉列表前面的项目符号list-style-:none;---简写list-style:none;
2、用小图代替列表前面的符号list-style 例:ul ol{list-style-image:url(images/li01.jpg);}
合并表格边框线
之前rules="all"在<table>中合并边框线
Css样式如何实现---Border-collapse:collapse; 合并表格的边框线
边框线（html标签就可以加边框线）
上边框top右right下bottom左left
1、Border-top-color:颜色值;上边框的颜色
2、Border-top-style;线型;线型有 solid 实线 dashed 虚线 dotted 点状线
3、Border-top-width;
简写为：border-top:粗细 线型 颜色;例：border-bottom:1px solid red;
上右下左四条边框的样式一样--简写为border:粗细 线型 颜色；
例：border:none;//边框消失 outline:none;//点击输入框，边框颜色无蓝色出现。
三、盒子模型
内容区：width和height
边框：border
内边距Padding：内容和边框之间的距离--Padding-top:数值;(right,left,bottom)
内边距简写：Padding:10px 20px 30px 40px;上边距10px，右20px，下30px，左40px
Padding:10px 20px 30px;上边距10px，左右20px，下30px
Padding:10px 20px;上下边距10px，左右20px
Padding:20px;上右下左20px
外边距Margin：边框以外的距离----Margin-top:数值;(right,left,bottom)
四、网站布局的一个思想
网站的结构就是两部分（横向和纵向）如果是纵向的就是正常的文档流，设置内容器的宽度和高度，
设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以
如果是横向排列，我们就要使用浮动
浮动Float:left;或right;
浮动的特点：设置浮动的元素，
1不占空间；2浮动元素层级高于普通元素；
3如果在一行中的元素想横向排列，都设置浮动就可以
如何让盒子水平居中：Margin: xx auto;例如：margin:10px auto;
4设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素；
注意：用margin来水平居中，需给盒子设置宽度，并且只能给块元素可以设置居中，文本、行内元素是不能实现居中的
CSS-3（行内和块、Overflow、定位 ）
清除格式：
清除所有html标签的格式，后期如果使用，再重新设置：
*{margin:0;padding:0;}或Body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,i,b,div,a...{margin:0;padding:0;}
网页的布局思想
1、清除格式
2、设置页面属性 body{}
Body{font-size:14px;font-family:宋体;color:#ooo;background-color:gray;}
Body{背景颜色/背景图片 文本的大小 文本的颜色 文本的字体 行间距}
3、把整个页面划分结构
行内元素和块元素
行内元素：输入完标签之后，不是自己占一行；行内元素的宽度和高度是由内容来决定，宽
度和高度width height不能用：span b i u a...；
Css样式：display:inline; //还可以li{display:inline;}使元素横向排列，但块大小会不同
块元素：输入完标签之后，自己独占一行，可以设置宽度和高度width和height
Css样式 display :block; ---div p table ul li ol dt dl dd h1...
块---转换---行内：Display:inline;
行---转换----块：Display:block;
Overflow
当内容溢出，如何显示。例：overflow:hidden;（溢出的部分隐藏）
1、Hidden;隐藏-2、Auto;如果盒子装不下，出现滚动条-3、Scroll,无论是否能装下都有滚动条边框
继承：
外层元素的样式，会被里面的元素所继承
文本的属性的可以继承 font-size font-family font-weight font-style:italic;text-decoration:none/underline; color:red;
注意：自己有的属性，不向外继承，不会继承祖先元素的属性，自己没有的属性则向外继承。
优先级：
单个选择器的优先级：标签选择器<类选择器<id选择器<行内样式表(style="color:#000000")
盒子深入--注意：里面所有的值加到一起一定不能大于父盒子的内容区的宽度width
总的宽度=内容区的宽度width+border(左右)+padding（左右）+margin(左右)
如果是上下的结构，正常的文档流，设置margin，如果有叠加取叠加部分的最大值
如果设置了浮动，不是正常的文档流，要把所有的margin值相加，之间的距离是两盒子之和。
清除浮动（清除的是浮动带来的不利影响）
经过浮动的元素
它会影响到它下面的元素的排版布局
还有浮动元素的父元素视觉上没有将浮动元素包裹着
clear 属性指定元素两侧不能出现浮动元素。
clear:left;清除左clear:right;清除右clear:both;清除左和右浮动。
撑起浮动div的两个方法：
1在父盒子里面的最下方加<div>，并给该div设置清除浮动的属性clear:both;
2浏览器的一个bug ----在父元素的样式中加overflow:hidden;（常用，但要注意内容溢出隐藏）
定位： Position:定位方式有：static默认 fixedg固定 relative相对 absolutive绝对定位
坐标的属性：left:数值;（right,top,bottom）
Fixed固定定位
1相对浏览器窗口定位；2如果不设置定位坐标，就在原来位置；3层级要比普通标签高
4结合定位坐标使用，5设置固定定位之后，一定是块元素
Relative相对定位
1相对定位占空间，2不结合定位坐标就是在原来位置，3设置定位坐标，相对于自身作为定位的原点。
4层级高于普通元素并且还占据原来空间
Absolute绝对定位
1设置绝对定位不占空间，2层级高于普通元素，3不结合定位坐标就是在原来位置（子绝父（爷……）相）
如果设置定位坐标，以祖先元素作为坐标参考点，如果祖先元素没有定位，一直往上找，直到找到body,就以body来进行定位
<style type="text/css">
.yeye{
width:600px;
height:600px;
background:yellow;
margin:0 auto;
position:relative;
}
.baba{
width:300px;
height:300px;
background:red;
margin-left:10px ;
}
.self{
width:100px;
height:100px;
background:blue;
position:absolute;
right:20px;
top:30px;
}
</style>
<body>
<div class="yeye">
<div class="baba">
<div class="self"></div>
</div>
</div>
</body>
CSS-4（Html5，视频，选择器深入、阴影）
Html5 广义-html5+css3+javascript+api
Html5结构：
<!doctype html>
<html>
<meta charest="UTF-8">
<head>
<title>网站标题</title>
</head>
<body>
</body>
</html>
Html5语法更宽松：可以把所有标签看成双标签。向下兼容。
Html5新增标签：使用时需要设置样式CSS：
<header>网页的头部，<nav>导航，<section>代表网页的一个块--div相似，
<article>网页文章内容，<aside>网页文档的侧边栏，<footer>网页的页脚-版权
Sublime:div.box>ul>li*4，再按Tab键
Html5新增的input属性值：提示placeholder="用户名/邮箱/账号"，required="required"设置必填项， autofocus="autofocus"设置自动获取焦点
Html5新增的表单属性email、url、date、month、time、week、number、search、color、range亮度
具体如最下边示例：示例H5
例：<input type="email" name="emailc">
<input type="search" name="searchnews">
视频---.ogg .mp4 .webm 音频---.ogg .mp3 .wav
格式：1、<video src="视频路径" autoplay="autoplay" controls> 格式：1、<audio src="音频路径" autoplay="autoplay" controls>
2、<video autoplay="autoplay" controls> 2、<audio autoplay="autoplay" controls>……video换为audio其余一样
<source src="xx.mp4">
<source src="xx.ogg">
<source src="xx.webm">
</video>//以上
autoplay="autoplay"均可省
Css3
选择器：类选择器 id选择器 标签选择器
属性选择器：E---element元素 data -----属性
<标签属性="属性值"></标签>---html元素
E[data] 选择带有data属性的元素对象，给该元素对象加样式
E[data="one"] 选择带有data属性的元素对象，并且属性值等于one的加样式
E[data^="o"] 选择器带有data属性的元素对象，并且属性值以o开头的 ^开头
E[data$="e"] 选择器带有data属性的元素对象，并且属性值以e结尾的 $结尾
E[data*="n"] 择器带有data属性的元素对象，并且属性值包含n，*包含
例：.box li[class]{color:red;}/*带有class属性的给加红色*/
.box li[class$="o"]{color:blue;｝/*结尾带有class属性为o的给加蓝色*/
css伪类结构
E---element元素
E:first-child{ }第一个孩子，E:last-child{ }最后一个孩子，E:only-child{ }只有一个孩子
E:nth-child(n){ }第n个孩子 n=1 2 3 4 5 …li:nth-child(3){ }
E:nth-child(2n+1)或E:nth-child(odd)获得奇数孩子，n=1 3 5 7 …，E:nth-child(2n){ }或E:nth-child(even){ }获得偶数孩子 n=2 4 6 8
例：li:last-child{color:blue;}
css伪元素选择器
E:first-letter{ }设置第一个文字，E:first-line{ }设置第一行
E::after{content: ;}(或E:after)在盒子的里面的后面插入内容，E::before{content: ;}(或E:before)在盒子的里面的前面插入内容
http://iconfont.cn/---小标都可以上这里来找
设置文本的阴影
Text-shadow:水平 垂直 模糊强度 颜色;
正值朝右负值朝左，垂直正值下负值上，可以有多组值，之间用逗号相隔
例：text-shadow:2px 2px 2px blue,-2px -2px 2px green;
设置盒子的阴影
Box-shadow:水平 垂直 模糊强度 模糊尺寸 颜色 内外阴影insert;(默认是外阴影outset)
例：box-shadow:1px 1px 2px 3px red insert;
盒子变圆角
border-radius:左上右上右下左下；//例25 px或者25%
颜色的值：rgba(a透明度) 例：color:rgba(255,0,0,0.3)
用css3修改背景图尺寸：Background-size:500px 400px;
Background-size:cover;背景图片会把整个盒子（宽度和高度）都用背景覆盖上
Background-size:contain背景图片会把盒子的宽度或高度覆盖就停止
Html5 兼容
-webkit- 谷歌浏览器chrome 和safari，-o- 欧朋浏览器，-moz火狐浏览器，-ms- ie浏览器，例：-ms-background-size:400px 500px;-webkit-background-size:cover;
<body>//示例H5
<form>
用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱号/账号" required="required" autofocus="autofocus"> <br>
邮箱：<input type="email" name="emailc" ><br>
网站地址:<input type="url" name="address" ><br>
日期：<input type="date" name="dat"><br>
周：<input type="week" name="we">
面包:<input type="number" name="mianbao">个
颜色<input type="color" name="co"><br>
亮度<input type="range" name="ld">
搜索:<input type="search" name="searchnew" >
<div><!-- movie.mp4，白狐.mp3等文件放在images/ -->
<video src="F:/PHP视频/基础文件汇总/css_day04/01-视频&笔记&代码/代码/images
/movie.mp4" controls>
<!-- <video controls>
<source src="images/movie.mp4">
<source src="images/movie.ogg">
<source src="images/movie.webm" >
</video> --><!-- ctrl+shift+/ 块注释的快捷键 -->
</div>
<audio controls >
<source src="images/白狐.mp3">
<source src="images/白狐.OGG">
</audio>
<input type="submit" value="提交">
</form>
</body>
CSS略
静态网页书写
一、静态页书写
1
、 清除默认样式
【方式1】*{margin:0;padding:0;text-decoration:none;list-style:none;border:none;font-size:12px;font-family:Arial,Microsoft Yahei;}
img{display:block}
禁用了CSS的继承
【方式
2
】
*{margin:0;padding:0; list-style:none;border:none;}
body{text-decoration:none; font-size:12px;font-family: Arial,Microsoft Yahei;}
img{display:block}
2
、 设置常用类
将经常使用的一些类定义在
css
文件中，想要设置相应属性只需要将类名加在标签的
class
属性中（代码复用，样式与结构分离）
3
、 页面布局
l
整体布局
图片：网站论坛
页面布局最外层是全屏和居中两种样式，需要全屏的使用全屏，然后全屏里面使用居中，
不需要全屏的直接使用居中
【全屏】
width:100%;min-width:
版心宽度
; //
如上图蓝框部分
【居中】
width:
版心宽度
;margin:0 auto; //
如上图的红框部分
l
内部格局划分
1.
在居中块里面划分各自的结构，先垂直，再水平，将各个地方的结构先用
div
搭建出来
2.
计算各个盒子的计算方式
3.
然后在往各个
div
中填写内容
二、常用方法
1、垂直居中
【单行文本】
设置行高等于目标元素高度。
【多行文本】
将外面的父盒子设置
display:table;
和子元素设置
display:table-cell;
，然后可给子元素设置
vertical-align:center;
就可以实现居中。
【块元素】
设置垂直居中，可以将其定位，
left
和
top
设置
50%
，将左上角点置于屏幕中间，然后设置
margin
，上是负的高度的一半，左是负的宽度的一半
2、水平居中
【文本】
text-align:center;
【行内元素】
行内元素宽是由内容撑起来的，设置居中没有意义。
【块元素】
margin:0 auto;
3、元素横排
【
1
】设置浮动，一浮全浮【全部的弟弟元素必须也一起设置浮动】，一浮一清。（对于同一个父元素）【在父元素设置
overflow
属性，或者将该属性抽离出
o
类，为父元素加上
o
类】
【
2
】清除浮动
1
、额外标签法。
2
、浏览器
bug
法（自然高法）
4、尺寸设置
【块元素】外层块：设宽不设高（内容高度未知，由内容将高度撑起）
内层块（紧挨内容的盒子）：设置宽高
【行内元素】设置宽高不生效
,
如想设置最好先变成块元素
5、盒子模型
【
1
】盒子尺寸
= 2
个
margin + 2
个
border + 2
个
padding +
内容
【
2
】盒子模型的
padding
和
margin
最好应用在块元素上，用在行内元素上可能不生效，行内元素可以先变成块元素再使用这些属性
【
3
】
margin
的两个弊端：
1
、不同文档流和元素排列方向时，设置
margin
取值方式不同，只有正常文档流的上下
margin
取最大值，其余情况下都取和
2
、父元素塌陷
6、浮动
【
1
】设置浮动后元素变为块元素，不占空间，横向排列，层级升高，不占空间故不能撑开父元素
【
2
】清除浮动后可以撑开父元素，且仍能保持横向排列
【
3
】清除浮动（父元素获取自然高）：
1
、 额外标签法：弟弟设
clear
：
both
（常用）
/left/right;
清除哥哥们不占空间的特点
（正规但不常用）
2
、 浏览器
bug
法（自然高法）：父亲设置
overflow:hidden;
（常用）
【
4
】设置浮动，一浮全浮【全部的弟弟元素必须也一起设置浮动】，一浮一清。（对于同一个父元素）【在父元素设置
overflow
属性，或者将该属性抽离出
o
类，为父元素加上
o
类】
7、继承
【
1
】父代文本属性
【
2
】注意：自己有的属性，不向外继承，不会继承祖先元素的属性
8、优先级
【
1
】标签选择器
<
类选择器
< id
选择器
<
行内样式表（一票否决权）
【
2
】同优先级情况下，后写的覆盖前面的【无论是外部样式，还是内嵌样式，还是导入样式】
三、注意事项
1
、 块元素默认宽度为父元素宽度的
100%
，高度为零
块元素不设高度时，高度由内容撑起来
设置之后不论内容多少都会保持固定值，不会再被撑开
2
、 行内元素默认宽度和高度都为
0
，宽高由内容撑起来，设置宽高没有意义
3
、 浮动元素一定要设置宽度（否则必出问题）
4
、 因为浮动元素不占空间，所以不会撑开父元素，当设置清除浮动之后可以撑开。
5
、 浮动要保证浮动元素和其弟弟都设置浮动，然后在父元素设置
overflow
属性，以获取自然高
6
、![]()
上图的正确做法是一个
img
和
div
平级，都设置浮动，然后
div
里面有四个
p
，而不是
img
和四个
p
是平级，都设置浮动，是达不到想要的效果的
7
、 在没有边框和背景（颜色或图片）时
padding
和
margin
作用相同
padding
和
margin
作用相同时推荐使用用
padding
（
margin
的两个弊端）
子元素
margin
和父元素
padding
随时可互换
8
、 边框
1px solid black
需同时设置才能生效
9
、
img
自带宽高可以设置，但在浏览器中显示的尺寸会比设置的大，最好转换成块元素再设宽高。
10
、 样式设置优先级相同时，冲突样式取在
css
文件出现的顺序最晚的
11
、 子绝父相
扫一扫
5273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
