html+css阶段总结

最新推荐文章于 2022-07-26 16:12:22 发布

余生迟语

最新推荐文章于 2022-07-26 16:12:22 发布

阅读量374

点赞数

文章标签：前端 html css3

本文链接：https://blog.csdn.net/panerge_666/article/details/103187794

版权

元素定位

Value (position属性)	Description
static	默认值。没有定位，元素出现在正常的流中。
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。
inherit	规定应该从父元素继承 position 属性的值。
sticky	基于用户的滚动位置来定位。

relative

相对于自身的定位，可以通过调节top，bottom，left right给定一定的数值完成不同方向的移动定位。再给元素添加定位之后，该元素层级会提高。

absolute

给一个元素设定absolute属性后，该元素会相对于祖元素中第一个定位元素定位（不包括static）

fixed

fixed是一种特殊的absolute，fixed总是以body为定位对象的，按照浏览器的窗口进行定位。一般网页中的小广告都是通过fixed定位实现的。

sticky

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。一般网页的导航栏会使用这样的定位。

选择器

id选择器（#加id名）
class选择器（.加class名）
style选择器（内敛属性，直接在相对应的元素添加style设置属性）
标签选择器（使用标签名选择）
后代选择器（通过一级一级向下选择，通过空格键或者>号连接）
群组选择器（具有相同属性的不同类或者不同元素是，可以在选择器之间以英文格式的逗号隔开选择）

优先级

内敛 > ID > class > 标签选择器

html的加载顺序

页面结构

HTML：不仅可以包含文字，还可以包含图片、链接，甚至音乐、程序等非文字元素的标记语言

css: 是一种用来表现HTML的计算机语言，能使HTML页面变得更加美观

JavaScript: 用来给HTML网页增加动态功能、交互行为是一种解释性脚本语言（不进行预编译）

      ①计算机不能理解高级语言，也就不能直接执行高级语言了

      ②计算机只能直接理解机器语言，所以任何语言，都必须将其翻译成机器语言，计算机才能运行高级语言编写的程序

      ③翻译的方式有两种，一个是编译，一个是解释。

            1)编译：Java语言的运行先经过编译，但是JAVA语言的编译不是直接编译成计算机能识别的语言，而是编译成JAVA虚拟机能识别的class文件
JAVA语言就是典型的翻译方式为编译的编程语言，
虽然不是编译成计算机能直接识别的语言，但是同其他以编译为翻译方式的高级编程语言的原理大体上是相同的。
最明显：C/C++，可以编译成二进制代码,以可执行文件的形式存在（exe文件）
都是先编译再运行，而且是一次编译到处运行，效率非常高。（只需要在第一次运行的时候编译一次）

             2）解释：解释性脚本语言的程序不需要编译，解释性脚本语言在运行程序的时候才翻译
解释性脚本语言有专门的解释器来负责解释，不过每次都需要翻译，效率比较低。
JavaScript就是一种解释性脚本语言

       ④JavaScript也有自己专门的解释器——JavaScript引擎，它存在于浏览器端，作为浏览器的一部分

一句话：html（超文本标记语言）、css（层叠样式表）、JavaScript脚本语言这三样东西在浏览器端相互配合、相辅相成形成了比较成熟的前端界面

css单位的种类和区别

value(单位属性)	Description
em	相对单位，基准点为父节点字体的大小，继承父类字体的大小，相当于“倍”。浏览器默认字体大小为16px=1em.
px	绝对单位，页面按精确像素展示。代表物理屏幕上能显示出的最小的一个点。
rem	相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，继承根节点的属性（即标签）。
vw	viewpoint width，视窗宽度，1vw等于视窗宽度的1%。即当前可见宽度的1%=1vw，区别是：当div中没有内容时，width=100%，则宽度不显示出来；当div中没有内容时，width=100vh，则宽度依然能显示出来。
vh	viewpoint height，视窗高度，1vh等于视窗高度的1%。即当前可见高度的1%=1vh，区别是：当div中没有内容时，height=100%，则高度不显示出来；当div中没有内容时，height=100vh，则高度依然能显示出来。
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。

PS: vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持。

颜色的表示方法

单词表示法
rgb表示法
#000000表示法

单词表示的方法: 比如red,yellow,black之类的。但是这种表示方法有两个局限性，第一：总有人的英语水平不是那么好，不是大家都能记住那么的颜色。第二：有的颜色用英语不是那么容易表达出来，比如浅黄色，深紫色。正是这两个缺点，所以用英语表示的方法比较少用

rgb函数表示颜色: rgb(数字1，数字2，数字3)，其中数字1代表的是红颜色，数字2代表的是绿颜色，数字3代表的是蓝颜色。这三种颜色被称为世界上的三原色，可以通过这三种的不同比例调配出任何一种颜色。并且这三个数字的范围在0-255之间。我们可以通过颜色拾取器获取颜色的rgb值。

使用#000000这种形似表示: 这些数都是16位进制的数，其中两位数代表一种颜色，即前两位代表红颜色，中间两位代表绿颜色，后面两位代表蓝颜色。这种表示方式使用的最多，不懂调色的可以根据帮助文档进行分配颜色,也可以通过颜色拾取器获得对应的值。

浮动，以及清楚浮动的几种方法

清除浮动的原因： 因为当父元素不设高度的情况下，如果子元素全部添加浮动的话，子元素层级提高，不能够撑起父元素的高度导致父元素高度为0，影响父元素的属性。

清除浮动的方法

为父级div设定高度

一般情况下我们不使用这种方法，不建议使用。因为我们在做项目时，并不了解我们页面总高度是多少，不能很好的判断。
在浮动盒子的后面添加一个空盒子，对该空盒子添加CSS样式：clear: both;
clear可选值：

none 默认值，不清除浮动

left 清除对左侧浮动元素的影响

right 清除对右侧浮动元素的影响

both 清除两侧浮动元素对当前元素的影响

<style type="type/css">
    .box{
        width:1000px;
        margin: 0 auto;
    }
    .box01{
        width:100%;
        background:#FF0000;
        float:left;
        margin: 0 auto;
    }
    .box02{
        width:100%;
        background:#363636;
        float:left;
        margin: 0 auto;
    }
    .clearfix{
        clear:both;
    }
    .box03{
        width:1000px;
        height:100px;
        background:#00FF00;
        margin: 0 auto;
    }
</style>
<body>
    <div class="box">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="clearfix"></div>
    </div>
    <div class="box03"></div>
</body>

一般都是将浮动的元素都放在一个大的div中，直接或间接的通过这个父级的div来清除浮动

父级div定义伪类:after 和 zoom

IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题,浏览器支持好、不容易出现怪问题

<style type="type/css">
    .box{
        width:1000px;
        margin: 0 auto;
    }
    .box01{
        width:100%;
        background:#FF0000;
        float:left;
        margin: 0 auto;
    }
    .box02{
        width:100%;
        background:#363636;
        float:left;
        margin: 0 auto;
    }
    .box03{
        width:1000px;
        height:100px;
        background:#00FF00;
        margin: 0 auto;
    }
    .clearfix:after{
        display:bock;
        clear:both;
        content:"";
        visibility:hidden;
        height:0;
    }
</style>
<body>
    <div class="box clearfix">
        <div class="box01"></div>
        <div class="box02"></div>
    </div>
    <div class="box03"></div>
</body>

父级div定义 overflow:hidden

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度,但是不能和position配合使用，因为超出的尺寸的会被隐藏。

<style type="type/css">
    .box{
        width:1000px;
        margin: 0 auto;
        overflow:hidden;
    }
    .box01{
        width:100%;
        background:#FF0000;
        float:left;
        margin: 0 auto;
    }
    .box02{
        width:100%;
        background:#363636;
        float:left;
        margin: 0 auto;
    }
    .box03{
        width:1000px;
        height:100px;
        background:#00FF00;
        margin: 0 auto;
    }
</style>
<body>
    <div class="box">
        <div class="box01"></div>
        <div class="box02"></div>
    </div>
    <div class="box03"></div>
</body>

锚链接

***锚链接是通过a标签特有属性，找到指定位置的链接。锚链接一般用于本页面的跳转。***

<body>
    <h1 id="top"><center>这是网页顶部</center></h1>
    <div style="height:3000px;background-color:#FF0000;"></div>
    <a href="#top"><center>返回顶部</center></a>
</body>

功能性链接

例：启动外部程序：

<a href="tencent://message/?uin=XXXXXXXXX&Site=&Menu-=yes">联系客服</a>

这时就会启动相应的外部程序，从而实现相应功能（其中uin=XXXXXXXXX代表发消息给对方的QQ号码）

盒子模型的使用

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

特殊字符

最常用的字符实体

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`

其他一些常用的字符实体

显示结果	描述	实体名称	实体编号
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日元	`¥`	`¥`
§	节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

块级元素和行级元素

1.块级元素

显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p,ul,form,div等

可以简单的的理解为该元素默认宽度设置宽度，不设置则是子元素高度和，没有为零；宽度为100%。

2.行级元素

也叫内联元素，内嵌元素。元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span,input等

可以简单的理解为该元素默认宽度为自动，高度也是自动，其宽度随内容的变化而变化，行内元素不可以设置宽高。

3.块级元素与行级元素切换

块元素切换内联元素：

display:inline;

内联元素切换块级元素：

display:block;

有序列表和无序列表

1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

代码：

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
</ul>

效果：

第一个列表项
第二个列表项

2.有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol>标签。每个列表项始于 <li>标签。

代码：

<ol>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
</ol>

效果：

第一个列表项
第二个列表项

3.拓展

一般我们在设计网页时，使用列表完成导航条居多，很少说在网页上显示着默认的列表形式，因此我们好多情况下并不喜欢列表上的数字排序和黑点，这时候我们要改变这些形式

<style type="text/css">
ul li{
    list-style-type:none;
}
</style>

当我们使用横向的导航栏时，需要给li设置浮动或者设为内联元素。

<style type="text/css">
ul li{
    float:left;
    //display:inline-block;
}
</style>

css样式继承，css重置

css重置

1.css内外边距的样式重置

*{
    margin:0;
    padding:0;
}

每一个浏览器都有默认的内外边距，在我们设计网页的时候往往用不到这些默认的属性，这时我们需要改变这些属性，内外边距这一属性如果不置零的话，会让网页凌乱，造成兼容性问题。

2.元素重置

<style type="text/css">
body{
    background:#fff; //重置body背景颜色为白色
     font-size:12px;
     line-height:1 ;
     font-family:"微软雅黑", "黑体","宋体";
     color:#666;
}
h1{
    font-size: 18px;   
}
h2{
    font-size: 16px;
}
h3{
    font-size: 14px;
}
h4,h5,h6{
    font-size: 100%;
}
address,caption,cite,code,dfn,em,var { //将斜体扶正
    font-style:normal;
    font-weight:normal;
} 
</style>

3.css列表元素样式

dl,ul,ol,menu,li{
    list-style:none;
}

一般我们制作的网页都不需要这些列表样式，我们很多情况下都是使用列表来做导航栏，布局网页。

4.清除浮动

.clear{
    clear:both;
}
.clearfix:after{
    content:"";
    display:block;
}

样式继承

在css中，一些元素的属性可以被其后代所继承，这样使我们编写过程中更加简便易操作。但是比不是所有的属性都是具有继承属性的，一下列出可继承属性和不可继承属性。

不可继承的： display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before、unicode-bidi

所有元素可继承： visibility、cursor

内联元素可继承： letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块元素可继承： text-indent、text-align

列表元素可继承： list-style、list-style-type、list-style-position、list-style-image

表格元素可继承 border-collapse

布局

1.flex布局

定义：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

.box{
    display:flex;
}

行内元素设置flex布局

.box{
    display:inline-flex;
}

Webit内核的浏览器必须加上-webkit

.box{
    display:-webkit-flex;
    dispay:flex;
}

当我们使用flex布局后，其子元素float,clear,vertical-align属性将会失去效果

使用flex布局导航栏是非常简便的方法，布局导航栏的方法有很多，例如：浮动布局，display:inline-block;布局导航栏等，但时候遇到很多的问题，浮动会出现高度坍塌，需要清除浮动。

	<style type="text/css">
			ul{
				height: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				padding: 0;
				flex-direction:initial;
				flex-wrap: inherit;
			}
			li{
			    list-style-type: none;
			    flex: 1;
			    text-align: center;
			    line-height: 100px;
			    border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>新闻</li>
				<li>音乐</li>
				<li>影视</li>
			</ul>
		</div>
	</body>

我们可以简单的将x轴记做主轴，默认方向自左向右；将y轴记做交叉轴，默认方向自上到下

value(容器属性)	Description
flex-direction	属性决定主轴的方向（即项目的排列方向）
flex-wrap	属性决定了一行溢出后的排列方式和位置
flex-flow	属性是flex-direction属性和flex-wrap属性的简写形式
justify-content	属性定义了项目在主轴上的对齐方式。
align-items	属性定义项目在交叉轴上如何对齐。
align-content	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

value(项目属性)	Description
order	属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow	属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink	属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis	属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex	是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

2.常见布局

单列布局
双列布局
三列布局
混合布局

单列布局

其中单列布局最为简单，一般应用于搜索引擎主页。
单列布局在于设置块状元素居中，只需设置margin:0 auto;(前面的0是上下外面局，可任意设置)。

双列布局

两列布局在于设置中间主体并排分布，在左边的块设置float:left，在右边的块设置float:right即可，当然要使两者的width之和等于某一设定值。

三列布局

在两列布局的基础上再将中间块进行二次分割，方法一致

混合布局

由于中间主体设置了float，最后的footer需要通过清除浮动来正确显示在主体下方，clear:both。

3.响应式布局

响应式布局主要是针对于不同的屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上更好的预览阅读体验。阅读尺寸不一样展示给用户的网页内容也不一样，我们利用媒体检测到屏幕的尺寸。并设置不同的css样式，就可以实现响应式的布局。

css3动画

2D转换
3D转换
过渡
动画

2D、3D转换

关键字：transform.

transform属性

translate(50px,100px);

PS:依据X轴向正方向移动50px,Y轴正方向移动100px

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

rotate(30deg);

PS:顺时针旋转30度

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

scale(2,3);

PS:X轴方向扩大2倍，Y轴方向扩大3倍

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

transform:skew( [,]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

动画

关键字：@keyframes

@keyframes 属性：创建动画

一般格式：

@keyframes myKeyFramesName{
    from{
        //开始的属性
    }
    to{
        //需要演变到的属性
    }
}

value	Description
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

animation: 动画名称动画一周期时间完成一周期的状态动画启动前的延迟播放次数是否反向播放未播放时对应的样式暂停或者播放状态;

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

余生迟语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css阶段总结

元素定位Value (position属性)Descriptionstatic默认值。没有定位，元素出现在正常的流中。absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。relative生成相对定位的元素，相对于其正常位置进行定位。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。inherit规定应...
复制链接

扫一扫