html基础知识Tips

最新推荐文章于 2022-01-27 16:59:15 发布

Sun_小杰杰哇

最新推荐文章于 2022-01-27 16:59:15 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： css3 html5

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_41271930/article/details/105392568

版权

web 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签分类

单标签、双标签。

行标签

行标签：span、a、img、input、b、i、u、s、sub、sup。
特性：a：在一行展示；b：不可以设置宽高；c：垂直方向margin、padding值有问题；d：行标签只能嵌套行标签；a标签只能嵌套a标签。
居中：给父标签添加text-align:center;

块标签

块标签：div，p，h1~h6，br，hr，ul，ol，li。
特性：a：独占父级一行；b：块标签可以嵌套块标签和行标签；c：可以设置宽高,默认内容撑开；不设置高度时,默认由内容撑开；e：p标签和h1~h6标签不能嵌套块标签。
特性:居中给本身添加margin:0 auto。

行块标签

display:inline-block

块标签

display:block

行标签

display:inline

浮动元素

设置：float ：left / right
特性:a：不占文档流；b.可以设置宽高,默认内容撑开宽高；c.设置浮动后,就是浮动元素,不再是单纯的行标签或者是块标签。
清浮动
a.给父级添加overflow:hidden,在IE6不好用,给父级添加zoom:1。
b.浮动元素同级最后添加空标签,设置样式clear:both。
c.父级设置浮动,注意父级会脱离文档流
d.父级设置高度扩展性不好
e.父级设置display:inline-block
注意:
a：分块清浮动。
b：如果一个设置浮动,同级兄弟都要浮动。
c：最早解决文字环绕问题。

定位元素

固定定位

固定定位：position:fixed
特性：
a.不占文档流
b.改变标签的特性
c.可以设置宽高,默认内容撑开宽高
d.适用于:导航条广告等
e.相对于浏览器窗口进行定位

相对定位

相对定位：position:relative
特性:
a.不脱离文档流
b.相对于自身定位
c.不改变标签的特性
d.一般给绝对定位做父级使用
e.自身微调

绝对定位

绝对定位：position:absolution
特性:
a.脱离文档流
b.相对于最近的父级标签中设置绝对(相对)定位元素定位,如果所有父级标签没有设置定位,相对于浏览器窗口进行定位
c.改变标签特性
d.用于堆叠效果

z-index

改变堆叠顺序：z-index
特性：
a：值越大,层级越高
b：仅限兄弟标签使用

css引入方式

外部引入
a：创建后缀为.css的文件
b：link->href
内部引入：head->style->选择器
行间样式

选择器

类选择器 class
id选择器；id 文本中类名不重复
标签选择器
后代选择器使用逗号隔开
群组选择器主要优先级
通配符选择器 *

盒模型

参数

border=> solid dotted dashed
padding
margin

css的两种盒模型
IE盒子模型、W3C盒子模型

盒模型标准
内容(content)、内边距(padding)、边框(border)、外边距(margin)。

区分

W3C盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。width = content的宽度。
IE盒子模型的范围包括 margin、border、padding、content，并且 content 部分包括含其他部分。width = content + border + padding的宽度。

切换盒模型

css3的box-sizing属性的使用。
IE盒子模型：box-sizing: border-box;
W3C盒子模型：box-sizing: content-box;

音频标签

audio

audio 音频标签<audio src=""></audio>
audio的属性:controls显示音频控件

video
1.标签：<video controlslist="nodownload" preload="auto" controls="controls" height="240" src="" width="380" style="margin-top: 2%"></video>

后续未完,请继续关注,Thanks!☺

Sun_小杰杰哇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础知识Tips

html模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...
复制链接

扫一扫