HTML5]html和css的使⽤⽅法以及样式布局步骤
第⼀步：清除默认样式
第⼆步：划分模块
第三步：设置模块的⼤⼩以及位置
第四步：划分下⼀级模块
html和css
引⼊⽹页头像
<link rel="shortcut icon" href="img/...ico">
css样式表的引⼊⽅式
css样式表的引⼊⽅式
1、外链式
<link href="" rel="stylesheet">
2、嵌⼊式
<style></style>
3、⾏内样式
<div ></div>
@import url('')
⽂件命名以及变量命名
命名规范
1、严格区分⼤⼩写
2、可以采⽤字母数字下划线$，数字不开头
3、命名语义化
4、可以采⽤驼峰命名法
清除默认样式
清楚边距
*{
margin: 0;
padding: 0;
list-style: none;
}
a标签清楚下划线和颜⾊
a{
color: black;
text-decoration: none;
}
css中颜⾊的表⽰⽅式
css中颜⾊的表⽰⽅式：
1.预定义的颜⾊【关键字颜⾊】 red pink blueyellow
2.#6位数的⾊值 #00-00-00 红绿蓝
0-1: 0全透明，1不透明
html中的标签和属性
html：
标签：
按照语法分类：
1.单标签：只有开始标签
meta img a
2.双标签：有开始标签和结束标签
<html></html>
3.属性的语法
语法：
属性名 = "属性值"
属性名 = "属性值1 属性值2"
注意:
1、标签名和属性名之间要有空格
2、多个属性之间要有空格
3、多个属性值之间要有空格
4.开始标签标签名后有空格
按照标签在页⾯中的呈现效果分类：
1、⾏内元素
⾏内元素定义：在⼀⾏内显⽰，只能设置左右间距，不可以设置上下间距。
举例：span del i em b strong a(title="⿏标移⼊时显⽰的⽂字";target=" "(新窗⼝打开的位置        _self：在本窗⼝打开;_blank：在新窗⼝打开) ...
2、块元素
块元素定义：可以设置宽⾼，独占⼀⾏。
举例：div 标题标签列表标签段落标签 ...
3、⾏内块元素
⾏内块元素定义：可以设置宽⾼，在⼀⾏显⽰。
举例：img 【title="⿏标移⼊时显⽰的⽂字" 】表单控件
元素的转换
块元素：    display:block;
⾏内块元素：display:inline-block;
⾏内元素：  display:inline;
元素的级别
块元素 > ⾏内块元素 > ⾏内元素
元素嵌套规范
1、同⼀级别可以相互嵌套
2、级别⾼的元素可以嵌套级别低的元素
3、段落标签只能嵌套⾏内元素
4、a标签不可以嵌套a标签；p不能嵌套p
盒⼦模型及其问题
四部构成：
1、margin  外间距盒⼦与盒⼦之间的距离
2、border  边框
3、padding 内填充（内间距）边框与内容之间的距离。
4、content 内容
margin-topmargin-right margin-bottom margin-left
margin:50px;  上右下左
margin:50px 100px;  上下左右
margin:0 auto; auto⾃动
margin:50px 100px150px; 上左右下
margin:50px 100px 150px200px;  上右下左
border:1px solid red;
border-top \ border-right \border-bottom \ border-left
border-top-width：上边框的宽度
padding：设置⽅法同margin
content: ;
width :  数值百分⽐ auto
height:  数值百分⽐ auto
盒⼦模型的问题：
1.⼤部分元素的margin和padding默认为0，但有⼀部分的margin和padding不为0，例如body  标题标签（h1-h6）（ul ol il等列表标签）段落标签
2.想领的两个块元素的margin会重合，值会取最⼤值
3.margin可以为[负数]  ，padding不可以设置[负数]。
4.⾏内元素margin只有左右，没有上下
5.如果（1）发⽣嵌套关系的元素，（2）⽗元素没有上边框，（3）上padding ，（4）⽗元素与⼦元素之间没有别的内容，此时⼦元素margin-top就会作⽤到⽗元素⾝上
margin-top的解决⽅式：
1.⽤⽗元素的padding-top代替⼦元素的margin-top；
2.给⽗元素添加overflow：hidden；
宽⾼的设置和计算
height：auto / 百分⽐ / px；
width：auto / 百分⽐ / px；
height：auto；参照与⽗元素
width：auto；参照与内容
box-sizing：border-box；将边框算⼊盒⼦内；
⼀个元素实际的宽⾼
实际宽度 = border-left +padding-left + width +paddint-right + border-right;
实际⾼度 = border-top +padding-top + height + padding-bottom + border-bottom;
浮动
作⽤：让块元素横排排列
样式： float：left；从左往右排列
float：right；从右往左排列
原理：让元素脱离⽂档流，让元素从⽂档层浮动到浮动层。
引发的问题：⽗元素不设置⾼度，⼦元素都浮动，浮动的⼦元素撑不开⽗元素。（浮动的元素脱离⽂档流）*解决⽅式⼀：给⽗元素添加  overflow：hidden；（超出部分隐藏）
*解决⽅式⼆：在⽗元素内容最后添加拥有清除浮动属性的元素。
clear：right/left/both ；别的浮动对它的影响清除掉
例：
.box：after{
content: "";
display:block;
width: 0;
height: 0;
clear:both;
}
*解决⽅式三：⽗元素能设置⾼度的尽量设置⾼度
浮动之后的块元素参照内容：属性值 auto
定位
定位的元素脱离⽂档层，到达定位层
定位的元素会多出5个样式：
top rightbottom left z-index：999
上右下左层级（层级越⾼，离⽤户越近）【只能在有定位属性的元素上才能⽤】
层级：
z-index：整数；
定位的⼏种⽅式：
1.相对定位：
相对于⾃⾝来定位，在⽂档层中保留原来的位置
⽤法：
position：relative；
2.绝对定位：
相对于最近的定位的祖先元素来定位，完全脱离⽂档流（其他顶替其位置）
⽤法：
position：absolute；
+⽅向值
3.固定定位：
相对于浏览器的四条边，完全脱离⽂档流
⽤法：
position：fixed；
top与bottom同时定义，那个样式会作⽤到元素⾝上的判断关系：
top的权重⽐bottom的权重⼤
left的权重⽐right的权重⼤
元素作⽤时：
1.如果是
position：relative；
left：；
margin：；
先作⽤margin，在作⽤relative；
2.如果是
position：absolute；
left：；
margin：；
先作⽤absolute，在作⽤margin；
定位元素的居中⽅式：
⽅法⼀：
1.⽔平居中：
position：absolute；
left：50%；
margin-left：-⾃⾝长度的⼀半；
2.垂直居中：
position：absolute；
top：50%；
margin-top：-⾃⾝长度的⼀半；
3.绝对居中：
position：absolute；
left：50%；
margin属性值可以为百分比top：50%；
margin-left：-⾃⾝长度的⼀半；
margin-top：-⾃⾝长度的⼀半；
⽅法⼆：
1.⽔平居中：
position：absolute；
left：0；
right：0
2D和3D
2D和3D属性：
1.平移样式
transform:translate(x,y);  向上为负，向下为正
transform:translateX(100px);
transform：rotate（180deg）；（1turn）转⼀圈
平移  transform:translate（）例⼦：translate（x，y） translateX（）
旋转  transform:rotate（）例⼦rotate（180deg）顺时针  -180deg  逆时针
transform：rotate（）空格translate（）；
transform-origin:px px；变换的中⼼点；
left center；
缩放  transform:scale（）例⼦：scale（2）放⼤为原来的2倍  scale（0.n）缩⼩为原来的0.n  scale（m，n）  x 轴m，y轴n
斜切  transform:skew（）例⼦：skew（45peg）左拉伸45° skew（45peg，m）
过渡transition
transition：all 0.5s；
全部时间
3.过渡的属性样式： transition-property: ， ;
可以为：属性的全部样式
4.过度的总时间： transition-duration：；
5.过渡的时间函数：transition-timing-function：；
linear（匀速）  ease（开头结尾慢，中间快）
cubic-bezier（1，0.07，0.54，0.21）贝塞尔曲线
6.延迟 transition-delay：；
3d效果：和2d的⼀样transition，transform；
prespective：给⽗元素加prespective（灭点的值）
prespective-origin：x y；灭点的位置调整观察的⾓度（⼤多数情况不设置）
transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）
transform：ratateY（45deg）
transform：translate3d（0-1，0-1，px）
⽗元素：transform-style：preserve-3d；
动画
动画规则：
@keyframes动画名（随便给）{
（动画规则）
from{}
to{}
}
@keyframes动画名（随便给）{
（动画规则）
0%{}
50%{}
100%{}
}
@keyframesanimation1{
from{
}
to{
}
}
挂载动画：将动画加到元素⾝上
.
元素{
animation：animation1 时间步数时间函数延迟时间次数；
}
挂载多个动画：
.元素{
animation：animation1 时间,animation2 时间,animation1 时间；
其他动画的相同的可以附件通过animation属性；
}
animation的样式
动画名：animation-name
时间：animation-duration
步数：animation-steps：8；
时间函数：animation-timing-function
延迟： animation-delay
动画次数：animation-iteration-count：infinite（⽆限次）/2；
指定下⼀次动画是否逆向：animation-direction：alternate（逆向）/ normal（常规）；
最后的状态：animation-fill-mode：backwards（默认（保持⼀开始的状态））/forwards（保持当前的状态）；状态即指定动画是否运动：animation-play-state: running（运⾏）/paused（静⽌）;
元素分类
按照在页⾯中的呈现效果：
1.⾏内元素：在⼀⾏内显⽰，不可以设置宽⾼：（存放⽂字）
span ab i strong del
2.⾏内块元素：在⼀⾏内显⽰，可以设置宽⾼：（有缝隙不常⽤）
img 表单控件
3.块元素：可以设置宽⾼，独占⼀⾏
div 标题标签（h1-h6）列表标签（ul-li ol-li dl>dt+dd 段落标签（p pre））
元素嵌套规范：
1.同⼀级别可以相互嵌套
2.级别⾼的可以嵌套级别低的元素
3.p标签只能嵌套⾏内元素
4.a链接不能相互嵌套
元素的转换：
1.块元素：display：block；
2.⾏内块元素：display：inline-block；
3.⾏内元素：display：inline；
背景图⽚以及浏览器内核
背景图
先设⼤⼩，在引background；
background: url('路径') no-repeat left bottom/contain；
//图⽚位置禁⽌重复位置（top bottom left right）
路径：background-image：url（“”），url（“”）；加载多张背景图
背景图⼤⼩： background-size：100px auto，100px auto；会重复
背景的图重复：
4.  background-repeat：no-repeat，repeat；（⽆重复）
5.  background-repeat：repeat-x（x⽅向重复）
background-repeat：repeat-y（y⽅向重复）
背景图的位置：
background-position：x y；（数值⽅位值（top/bottom left/rightcenter（可以省略）））背景开始渲染的位置： background-origin: ;
8. padding-box；（默认）从padding位置开始渲染
9. border-box；从边框的位置开始渲染
content-box；从内容的位置开始渲染
图⽚结束渲染的位置：background-clip: ;
11.padding-box；（默认）从padding位置结束渲染
12.border-box；从边框的位置结束渲染
content-box；从内容的位置结束渲染
使得背景图加载到浏览器中
background-attachment: fixed;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。