HTMLCSS常用属性

阅读：评论：0

HTMLCSS常用属性

HTML

VSCode快捷键

快捷键	作用
Shift + Alt + ↓ / ↑	向上/向下复制行
Ctrl + Shift + K	删除行
ctrl + /	行注释
shift + alt + a	块注释
Ctrl + Enter	快速换行
home	切换行首
end	切换行尾
Alt + ↓ / ↑	行移动
ALT + Shift + 左键	多行修改

基本结构组成

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容。页面内容基本上都是放到body里面的

<!DOCTYPE html>
<!-- 版本号 -->
<html lang="zh-CN"><!-- 语言 --><head><meta charset="UTF-8" /><!-- 解决文字问题 --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- 解决浏览器兼容性问题，最新版本的浏览器 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 视口，移动端兼容性适配问题 --><title>Document</title></head><body></body>
</html>

标准流

一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.
网页布局: 标准流 + 浮动+ 定位
标准流布局规则
- 块级元素:
  - 从上往下垂直布局独占一行
- 行内 /行内块元素:
  - 从左往右水平布局一行装不下自动换行

HTML常用标签

语义化标签

用特定的标签，去表达特定的含义
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
例如：h1文字效果大，但是重要的是h1的语义效果—十分重要
优势：
- 代码结构可读性强
- 有利于SEO（search engineering optimizing / 搜索引擎优化）
  - 作用：让网站在搜索引擎上的排名靠前
  - 提升SEO:
    - 竞价排名
    - 将网页制作成HTML后缀
    - 标签语义化（合适地方用合适的标签）
    SEO三大标签
    
    title：网页标题标签
    
    description：网页描述标签（meta–name=“description”）
    
    keywords：关键词标签（meta–name=“keywords”）
- 方便设备解析

标题标签

h1~h6
h1最好只写一个，h2~h6可以适当多写
h1~h6之间不能相互嵌套

段落标签

<p></p>

换行标签

<br />

横线标签

<hr />

文本格式化标签

加粗：<strong> / <b> （十分重要的内容）

倾斜：<em> / <i> （着重阅读的内容）

删除线：<del> / <s>

下划线：<ins> / <u>

图像标签

img
其中src必写，title为悬停文字、alt为图裂显示文字

超链接标签

a，（anchor）

href ：指定地址，或者ID

target ：指定页面打开方式，_self为默认本窗口，_blank为新窗口打开

可以嵌套文本或图像，可以不用设置宽高！

代码中的多个空格只会被解析成一个空格！

a元素可以包含除去自身以外的任何元素！

块级元素与行内元素

块级元素：独占一行（排版标签全为块级元素）

html、body

h1~h6、hr、p、pre、div

ul、ol、li、dl、dt、dd

table、tbody、thead、tfoot、tr、caption

form、option
行内元素：不独占一行

文本标签：br、em、strong、sup、sup、del、ins、span

<a>与<label>
行内块元素：

图片元素：img

单元格：td、th

表单控件：input、textarea、select、button

框架标签：iframe
使用原则：
- 块级元素中可以写行内元素和块级元素
- 行内元素中只能写行内元素
- p标签中不要写块级元素

HTML特殊字符

特殊字符	描述	字符代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
™	商标	&trade；
x	乘号	&times；
÷	除号	&divide；

表格标签

表格主要作用：非页面布局，主要用来展示数据

表格基本语法：

<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody>
</table>

表格属性：

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	1或""	规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

合并单元格：rowspan–行合并 colspan–列合并

<!--
跨行合并(垂直合并)rowspan
跨列合并(水平合并)colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁• 上下合并→只保留最上的，删除其他单元格• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）• `rowspan`：跨行合并→垂直方向合并• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码-->
<table border="1" width="800" height="200" rules="all" align="center"><tr><td></td><td></td><!-- 跨行合并 --><td rowspan="3"></td><td></td></tr><tr><td></td><td></td><!-- <td></td> --><td></td></tr><tr><td></td><td></td><!-- <td></td> --><td></td></tr><tr><td></td><!-- 跨列合并 --><td colspan="3"></td><!-- <td></td><td></td> --></tr><tr><td></td><td></td><td></td><td></td></tr></table>

列表标签

无序列表：<ul> <li>

li {list-style:none;
}
<!--清除小圆点-->
<!--none:无样式Disc:实心圆circle:空心圆Square:实心方块
-->

有序列表：<ol> <li>
自定义列表：<dl> <dt> <dd>
- 其中dl标签里面只允许包含dt/dd标签
- dt/dd标签里面可以嵌套任意内容(标签)
- dt/dd是兄弟关系
```
<dl><dt></dt><dd></dd><dd></dd>
</dl>
```

例如：

  <h2>如何高效的学习？</h2><dl><dt>做好笔记</dt><dd>笔记是我们以后复习的一个抓手</dd><dd>笔记可以是电子版，也可以是纸质版</dd><dt>多加练习</dt><dd>只有敲出来的代码，才是自己的</dd><dt>别怕出错</dt><dd>错很正常，改正后并记住，就是经验</dd></dl>

表单标签

组成：表单域、表单控件、提示信息

form常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

表单控件：
- input : button / checkbox / radio （name相同绑定）/ image / file / password / reset / submit / text (type)
其余属性：name、value（input元素值）、checked（首次加载是否被选中）、disabled属性（设置表单控件不可用）、maxlength（最大字符数）
- select：与option共用、selected=“selected”默认选中
- textarea：clos、rows
tips：以上要标明name属性

具体示例如下：

<!--文本框1-->
<input type="text" placeholder="">
<!--密码框1-->
<input type="password" placeholder="">
<!--单选框-->
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
<!--多选框-->
<input type="checkbox" checked >
<!--
文件上传
multiple:多文件上传
-->
<input type="file" multiple>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置" >
<!--普通按钮1-->
<input type="button"value="普通按钮">
<!--搜索框-->
<input type="search">
<!--图像提交按钮-->
<input type="image" src="./img/btn.png" alt="">
<!--
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中
-->

label标签：
label标签可与表单控件相关联，关联后点击文字，控件会获取焦点
- 法一：让label标签的for属性等于表单控件的id
- 法二：把表单控件套在label里面

详细示例如下：

<!--
使用方法一：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
--><label for="nan">男</label><input type="radio" name="sex" id="nan"><label for="nv">女</label><input type="radio" name="sex" id="nv">
<!--
使用方法二：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
--><label>文本框:<input type="text"></label>

音频标签（HTML5）

<audio></audio>
常用属性：
- src:音频路径
- controls:显示播放控件
- autoplay:自动播放
- loop:循环播放

<audio src="./music.mp3" controls autoplay loop></audio>

视频标签（HTML5)

<video></video>
常见属性:
- src:视频的路径
- controls:显示播放控件
- autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放
- loop:循环播放
- width:设置宽度
- height:设置高度

<video src="./video.mp4" controls autoplay loop muted width="300"></video>

使用最多标签小结

<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>....
</ul>
<!--自定义列表-->
<dl><dt>自定义列表主题</dt><dd>自定义列表每一项</dd><dd>自定义列表每一项</dd><dd>自定义列表每一项</dd>....
</dl>
<!--表格基本语法-->
<table><tr><td></td><td></td><td></td>...</tr>...<tr><td></td><td></td><td></td>...</tr>...
</table>
<!--表单标签-->
<!--文本框-->
<input type="text" placeholder="">
<!--密码框-->
<input type="password" placeholder="">
<!--单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)-->
<input type="radio">
<!--多选框-->
<input type="checkbox">
<!--搜索框-->
<input type="search"  placeholder="">
<!--普通按钮-->
<button type="button">普通按钮</button>
<!--无语义化标签-->
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>

CSS

element语法

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，

就可以生成
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，

可以用自增符号 $
如果想要在生成的标签内部写内容可以用 { } 表示

CSS引入方式

内嵌式（内联样式）
- 作用于当前页面,后续小项目可以使用
外链式（外链样式）
- 作用于多个页面,后续大项目使用，需要使用link标签引入外部的css文件
```
<link rel="stylesheet" href="CSS路径">
```
行内式（行内样式）
- 作用于当前标签,不建议使用。后续配合js

CSS属性书写顺序

布局定位属性
1. display
2. float、position
3. clear
4. visibility、overflow
盒子模型 + 背景
1. width、height
2. margin、padding、border
3. background
文本内容属性
1. color、font
2. text-decoration
3. text-align
4. line-height
5. white-space
其他属性（点缀）
1. cursor
2. border-radius
3. text-shadow
4. box-shadow

tips: 开发中多推荐–类 + 后代，类选择器个数推荐不超过三个

CSS三大特性

层叠性：相同样式会覆盖
继承性：text- 、 font- 、line- 、 color属性

（不影响布局的，大概率能够继承）

vertical-align不能继承

font:12px/1.5 Microsoft YaHei；
//给body设置，会让后续文本自动调整行高

优先级：

选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style=“” 1,0,0,0
limportant重要的无穷大

如果都是继承，则会直接继承父级标签或者最近的祖先标签。

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=“”	1,0,0,0
limportant重要的	无穷大

CSS选择器

基础选择器

标签选择器（0 0 0 1）
类选择器（0 0 1 0）
id选择器（0 1 0 0）-----不可重复
通配符选择器（0 0 0 0）

tips：!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

复合选择器

后代选择器：元素1 元素2 { }
子代选择器：元素1>元素2{ }
并集选择器：元素1，元素2{ } ------并集选择器优先级是单独计算的
交集选择器：元素1元素2{ }
伪类选择器：
- 元素：link / visited / hover / active —LVHA—无访问、访问、悬浮、长按选定
- 元素：focus —获取焦点的表单元素
结构伪类选择器：

1.所有兄弟元素中的第一个：

:first-child

2.所有兄弟元素中的最后一个：

:last-child

3.所有兄弟元素第n个：

:nth-child(n)

倒数: nth-last-child(n)

4.所有同类型兄弟元素的第一个：

:first-of-type

5.所有同类型兄弟元素的最后一个：

:last-of-type

6.所有同类型兄弟元素的第n个：

:nth-of-type(n)

倒数：nth-last-of-type(n)

tips:

n从0开始计算，因此2n（even）偶数、2n+1（odd）奇数、-n+3前三个、n+5从第五个开始到最后一个为止。

否定伪类
:not（选择器）满足除括号内元素
UI伪类
:checked / :enable
属性选择器
- 元素[属性名^=“值”]-------以…开头
- 元素[属性名$=“值”]-------以…结尾
- 元素[属性名*=“值”]-------包含指定元素
伪元素选择器
- 伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素
- ::first-letter选中第一个字
- ::first-line选中第一行
- ::selection鼠标选中内容
- ::before元素最开始位置创建一个子元素
- ::after元素最后位置创建一个子元素

CSS字体

字体系列：font-family
字体大小：font-size
字体粗细：font-weight（400–normal 700–bold）100~1000数字越大字越粗
字体样式：font-style（normal、italic）

复合写法：

font：font-style font-weight font-size/line-height font-family

（不可更换顺序，且字体连写必须保留size和family 这2个属性）

CSS文本属性

文本颜色：color（重点）

颜色拓展

/*关键词:*/
background-color: pink;/*rgb:*/
background-color:rgb(255, 255, 255);/*rgba:*/
background-color: rgba(0, 0, 0, .5);/*十六进制*/background-color: #ff6700;

对齐文本：text-align
- 在HTML中，行内块元素、行内元素，会被当成文本处理，即可以使用text-align使其居中（给父元素设置）
- text-align:left|center|right;
装饰文本：text-decoration

none（无装饰线，常用）、underline（下划线）、overline（上划线）、line-through（删除线）
文本缩进：text-indent （em为当前文字倍数）
行间距：line-height

字母间距： letter-spacing
单词间距： word-spacing （通过空格识别词）

元素的显示模式

块级元素

h1~h5 、p、div、ul、ol、li

独占一行

默认宽度撑满父元素，默认高度由内容撑开。

可设置宽高

行内元素

a、strong、b、em、i、del、s、ins、u、span

一行可以显示多个

宽、高默认由内容撑开

无法设置宽、高，以及margin、padding的垂直方向

a里面可以放块级元素

行内块元素

img、input、td、button

可以设置宽高、一行显示多个、本身内容宽度

行内块幽灵空白问题：行内块元素与文本的基线对齐，文本的基线与最底端有一定的距离

产生原因：主要是把回车解析成了空格
将上一个元素的闭合标签与下一个元素的开始标签写在同一行，或者注释掉中间的回车换行

<ul><li>one</li  ><li>two</li  ><li>three</li>
</ul>
<!-- or -->
<ul><li>one</li><!--  --><li>two</li><!--  --><li>three</li>
</ul>

vertical-align不为baseline
改图片为块元素：display：block
给元素加浮动，变成浮动元素
给父元素设置font-size：0; 子元素字体大小单独设置

元素显示模式转换

display:block
display:inline
display:inline-block

CSS背景

背景色：background-color：transparent（默认，无色透明）
背景图片：background-image：none | url（url）—无引号
背景图片大小：background-size: width height
- 数字
- 百分比
- contain：1 : 1会让图片与盒子一致；非比例关系会留白
- cover：1 : 1会让图片与盒子一致；非比例关系仍会拉满，图片变形
- 实际开发中，图片比例一般为1:1结构
背景平铺：background-repeat：repeat（全平铺）| no-repeat | repeat-x | repeat-y
背景颜色位置：background-position：x y；
- top、center、bottom、left、right
- 指定一个，后一个默认对齐。
背景附着：background-attachment：scroll | fixed（固定）

复合写法：没有固定顺序，但大小必须写到位置后面

background: color image repeat position/size;
/*建议前四个连写，size独写*/

背景颜色半透明：background：rgba（0,0,0,0.3）盒子背景半透明

CSS盒子模型

盒子组成

margin–border–padding–content
盒子默认大小：border + padding + content

边框

border：border-with || border-style || border-color（无固定顺序）
- border-style值：none、solid（实线）、dashed（虚线）、dotted（点线）
border-top、border-bottom、border-left、border-right

/*上边框*/
border-top:solid 1px red;
/*下边框*/
border-bottom:solid 1px red;
/*左边框*/
border-left:solid 1px red;
/*右边框*/
border-right:solid 1px red;

表格细线边框

border-collapse ：collapse
控制浏览器表格边框方式
使得边框合并

怪异盒模型

box-sizing
- content-box 默认值
- border-box 怪异盒模型，设置的就是盒子的总大小（自动内减）

盒子大小调整

resize属性可以控制是否允许用户调节元素尺寸
none、both、horizontal、vertical

opacity不透明度

opacity的值为0~1的小数，0为完全透明（整个元素）

opacity 与 rgba 的区别？

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

内边距

可能影响盒子的大小(不能为负数)
1个值为上下左右，2个值为上下、左右，3个值为上、左右、下，4个值为上、右、下、左

/*上 右 下 左*/
padding:10px;
/*上下  左右*/
padding:20px 30px;
/*上  左右  下*/
padding:20px 30px 40px;
/*上 右 下 左*/
padding:20px 30px 40px 50px;
/*单方向设置*/
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;

边框与padding不会撑大盒子特殊情况:
- 当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)
- 此时给左右的边框和左右的内边距不会撑大盒子

外边距

用于盒子的移动（可以为负数）
参考父元素的content计算
水平居中：margin：0 auto；
给行内元素设置上、下margin无效

/*上 右 下 左*/
margin:10px;
/*上下  左右*/
margin:20px 30px;
/*上  左右  下*/
margin:20px 30px 40px;
/*上 右 下 左*/
margin:20px 30px 40px 50px;
/*单方向设置*/
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;

margin正常使用：

水平布局的盒子,左右的 margin值互不影响
最终的距离为margin左右的和

margin塌陷问题：

互相嵌套的块级元素，第一个元素上margin作用在父元素上，最后一个元素下margin作用在父元素上。
解决办法：
给父元素设置 padding-top或 border-top
给父元素设置 overflow: hidden;
把子元素转换为行内块 display: inline-block;
浮动、绝对定位、相对定位的盒子不会有嵌套块级元素外边距塌陷现象

margin合并问题：

垂直布局的块级元素 上下 margin会合并
最终的距离为margin的最大值
解决办法:
只用设置一个外边距即可

布局技巧

行内元素、行内块元素可以被父元素当做文本处理
子元素水平居中：
- 块级元素：margin：0 auto；
- 行内块、行内元素：text-align: center;
子元素垂直居中：
- 块元素：margin-top: (content - 子元素总高)/2
- 行内、行内块：height = line-height&&vertical-align:middle
  
  （绝对垂直居中：font-size：0）

CSS浮动

语法：

选择器 {float:none/left/right;
}

浮动特性

浮动元素会脱离标准流
浮动的元素比标准流高半个级别,可以覆盖标准流的元素
浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动的元素会受到上面元素边界的影响
浮动元素会一行内显示并且顶部对齐
浮动元素具有行内块元素的特性
- 浮动盒子中间没有缝隙
浮动元素经常搭配标准流父级
浮动不会像行内块一样被当做文本处理（vertical-align / text-align无法使用）
margin合并和塌陷全部消失

注意点：

先用标准流父级元素排列上下位置，之后内部子元素采取浮动排列左右位置
子浮父不浮、兄弟一起浮、一浮全浮
浮动只会影响后面的标准流，不会影响前面的标准流

清除浮动

清除浮动，父级会根据浮动子盒子自动检测高度
如果父级元素本身有高度，则不需要清除浮动（重要）
清除浮动本质是清除浮动元素造成的影响

语法：

选择器 {clear：left/right/both；
}

清除浮动方法：

额外标签法：
```
<div style="clear:both"></div>
```
父级添加overflow属性:设置属性为hidden、auto、scroll

父级添加after伪元素：

.clearfix::after {content:'';display:block;clear:both;/*后两项针对老浏览器*/height:0;visibility:hidden
}

父级添加双伪元素:

.clearfix::after,.clearfix::before {content:'';display:table;
}
.clearfix::after{clear:both;
}
/*双伪元素，其中before的主要作用是解决外边距塌陷问题，本质上after就已经够了*/

为什么清除浮动：

父级元素没有高度、子盒子浮动、影响后续布局

CSS定位

定位应用场景

为什么需要使用定位?

解决盒子之间的层叠问题,可以层叠到其它盒子上面

页面滚动,盒子固定在页面某个位置不动.

定位组成

定位：摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位元素：设置**（绝对定位/固定定位）**后，不管之前是什么元素，一律为定位元素

—默认宽、高都被内容所撑开，且能自由设置宽高。

定位模式：

static(静态定位)、relative、absolute、fixed
边偏移：

top、bottom、left、right

.blue {/* 定位的使用步骤 *//* 1 设置定位的方式  绝对定位*/position: absolute;/* 2 设置偏移值 */top: 150px;left: 150px;background-color: blue;}

相对定位

position：relative
相对于自己的定位
没有脱离标准流
需要配合方位属性来移动位置

绝对定位

position：absolute
包含块：
- 对于没有脱离文档流的元素，包含块为父元素。
- 对于脱离文档流的元素，包含块为拥有定位属性的祖先元素。
相对于有定位属性的祖先元素
脱离标准流
不能与浮动同时使用。同时使用则以定位为主
需要配合方位属性来移动位置
子绝父相：
- 子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小
子绝父绝：
- 实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可

固定定位

position：fixed
相对于窗口位置，且不随滚动条滚动
脱离标准流
需要配合方位属性来移动位置

固定定位小技巧： 固定在版心右侧位置。

小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）

的一半位置
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

黏性定位

sticky会占用原先的位置（relative特点）
必须添加top、bottom、left、right其中一个才有效
以窗口为参照点（fixed特点），离他最近的拥有滚动机制的祖先元素。

定位总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky粘性定位	否(占有位置)	浏览器可视区	当前阶段少

定位叠放次序

z-index
专门用于元素设置显示层级

选择器 {z-index:1;
}
/*数值可以为：正数、负数、0、auto，数字越大盒子越靠上（默认为auto）*/

不同布局方式元素的层级关系：
- 标准流 <浮动 <定位
定位元素之间的层级关系相同(相对定位、绝对定位、固定定位)

示例代码：

<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>

* {margin: 0;padding: 0;box-sizing: border-box;}div {width: 300px;height: 300px;}.red {/* 相对定位 */position: relative;left: 0;top: 0;z-index: 2;background-color: red;}.blue {/* 绝对定位 */position: absolute;left: 100px;top: 100px;z-index: 1;background-color: blue;}.green {/* 固定定位 */position: fixed;left: 200px;top: 200px;z-index: 9999;background-color: green;}

定位拓展

让定位元素的宽充满包含块
- 块宽一致：同时设置left和right为0
- 块高一致：同时设置top和bottom为0
绝对定位的盒子水平居中

绝对定位盒子不能通过margin:0 auto;水平居中，但可以通过计算实现

left:50%;让盒子的左侧移动到父级元素中心

margin-left:-100px; 左移盒子一半

绝对定位的盒子中心居中

/*法一(某些场景可能失效)*/
left:0;
right:0;
top: 0;
bottom: 0;
margin: auto;

/*法二*/
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

/*法三，使用transform（建议使用）*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%)

绝对定位/固定定位与浮动类似
1. 行内元素添加绝/固可以直接设置宽高
2. 块级元素添加绝/固如果不设置宽高，默认为内容大小
脱标盒子不会触发外边距塌陷问题
绝/固会完全压住盒子

绝/固完全脱离标准流，但浮动没有脱离文本流

使用总结

标准流：盒子上下或者左右排列
浮动：可以让多个块级元素一行显示或者左右对齐盒子
定位：最大特点为层叠性（z-index）如果元素自由在某个盒子内移动就用定位
定位特殊性：
1. 行内元素加了绝对/固定定位可以设置宽高
2. 块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开
3. 嵌套块级元素加了绝对/固定定位,不会有塌陷问题

圆角边框(CSS3)

border-radius：两个值为左上右下、右上左下，三个值为左上、右上左下、右下
圆形：border-radius：50% (正方形)
矩形圆角：border-radius：h*50%
默认是宽度的50%

示例代码：

 .box {width: 300px;height: 300px;background-color: #ffa500;/* 圆形 边框圆角为宽高的一半  *//* border-radius: 150px; */border-radius: 50%}.box1 {width: 200px;height: 60px;background-color: purple;/* 胶囊按钮  盒子高度的一半*/border-radius: 30px;text-align: center;line-height: 60px;font-size: 20px;color: #fff;}.box2 {width: 200px;height: 200px;background-color: pink;border-radius: 0 50%;}

边框外轮廓（CSS3）

outline复合属性：width、color、style
offset（外轮廓与边框的距离）–独立属性

盒子阴影(CSS3)

盒子阴影不占用空间
阴影可以叠加，使用逗号隔开
不能主动添加outset，否则会报错

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。只能正值（深、浅）
spread	可选。阴影的尺寸。（大、小）
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。（不常用）

文字阴影（CSS3）

text-shadow： h-shadow v-shadow blur color ;
阴影可以叠加，使用逗号隔开
属性值为0时，要带单位px

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。只能正值（深、浅）
color	可选。阴影的颜色。请参阅CSS颜色值。

平面转换2D（CSS3）

2D位移

使用transform属性实现元素的位移、旋转、缩放等效果（2D）

语法：

/*元素移动到坐标轴的哪个位置*/
/*单个值时，默认为x方向*/
transform: translate(x,y);
transform: translateX();
transform: translateY();

取值：（可正、负）
- 像素单位
- 百分比（以盒子为参照物）

tips: margin与translate的区别？

margin的100%是他父元素的100%宽度，translate为元素本身
margin移动时会影响其他元素位置，translate不会影响其他元素，且未脱离标准流（有相对定位的特点）

小拓展：

外边距默认标准流下，只能实现水平居中
脱离标准流后position:absolute,四边方位属性设置为0（left>right , top>bottom），使用margin:auto，可以实现垂直水平居中
- 该方法本质是脱标，然后使用margin：auto使四边边距自适应，得到垂直水平居中的效果

2D旋转

rotate：设置旋转角度，指定角度值deg或turn，正顺负逆
rotate与transition配合使用才能看到效果

transform: rotate(1turn)
/*1turn为一圈*/

改变转换原点：

transform-origin

语法

transform-origin: 原点水平位置、原点垂直位置；

取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值，以左上角为零点
- 百分比
特点
- 默认原点是盒子中心点
- 修改变换原点对位移没有影响，对旋转和缩放会产生影响
- 百分比相对于自身
- 只写一个值时，第二个默认为50%

多重转换

使用transform复合属性实现多形态转换

多重转换技巧：

transform: translate() rotate();
/*先位移后旋转*/

原理：
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换效果（坐标轴改变）

缩放

使用scale改变元素的尺寸

语法

transform: scale(x轴缩放倍数,y轴缩放倍数)

技巧
- scale值大于1为放大，小于1为缩小
- 缩放可以取负值，先缩小再放大
若scale只设一个值，则表示x和y轴等比例缩放
- 缩放只是一种视觉效果，不会影响其他盒子

倾斜

使用skew使元素倾斜

语法

transform: skew(角度)
/*
正值（整体左斜）斜边在右
负值（整体右斜）斜边在左
也可以：
*/
transform:skew (x,y)
skewX()
skewY()

空间转换3D(CSS3)

写在最前：

空间转换一般不用CSS实现，此处仅供学习了解

使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间定义：
- 是从坐标轴角度定义的。
- x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
空间转换也叫3D转换

空间位移

与2D位移类似，使用translate实现空间位移效果

语法：

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值：（正负均可）
- 像素单位数值
- 百分比（相对于自己）

透视

使用perspective实现透视效果
属性（添加给父级）
- perspective：值
- 取值：像素单位，数值在800-1200（推荐取值）
- 值越小，离我越近
- 透视不是3D效果
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果

空间旋转

与2D旋转一样，使用rotate实现空间旋转效果

语法

/*Z轴，正值是顺时针旋转*/
transform: rotateZ(值);
/*X轴，正值是沿着X轴正方向从外到内旋转*/
transform: rotateX(值);
/*Y轴，正值是沿着Y轴正方向从左到右*/
transform: rotateY(值);

判断：（左手法则）
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展：（合并写法）
- transform:rotate3d(x,y,z,角度)：用来自定义旋转轴位置以及角度
```
transform: rotate3d(1,1,1,30deg) ;
/*意思是： x 、 y 、 z 分别旋转30 度。*/
```

立体呈现

使用transform-style:perserve-3d
- 使子元素处于真正的3D空间
- 默认值为flat，表示子元素在2D平面内呈现
空间内，转换元素都有自己独立的坐标轴，互不干扰

空间缩放

使用scale实现空间缩放效果

语法

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x,y,z);

动画（CSS3）

多个状态间的变化过程，动画过程可控
使用animation添加动画效果
- 构成动画最小单元：帧或动画帧

定义动画：

@keyframes 动画名称  {from { }to { }
}
/*多步骤写法*/
@keyframes 动画名称  {0% { }10% { }100%{ }
}

使用动画：

animation: 动画名称 动画花费时长;
/*完整属性*/
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
/*animation可以给一个元素添加多个动画效果*/
/*默认为补间动画*/
animation:动画1，动画2，动画N
;

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时的状态	forwards：最后一帧 backwards：第一帧
animation-timing-function	速度曲线	steps（数字）逐帧动画
animation-iteration-count	重复次数	infinite无限循环
animation-direction	动画执行方向	alternate反方向（来回）
animation-play-state	暂停动画	paused暂停

animation-iteration-count不能与animation-fill-mode、animation-direction一起使用
steps实现逐帧动画
animation-timing-function: steps(N);
- 将动画过程分成N等份
- 与精灵图搭配使用（background-position）

过渡（CSS3）

transition: 属性 时间 运动曲线（可省略） 何时开始;

作用：让样式有慢慢变好的效果，一般添加到默认状态
属性：全部属性all，单个属性直接写属性名且用逗号隔开
花费时间： (s) 必须写单位
运动曲线：默认ease
何时开始：单位是（s）可以设置延迟触发时间，默认为0s

注：display无法设置过渡

渐变（CSS3）

使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化后的视觉效果
- 一般用于设置盒子的背景
- 做遮罩层效果

线性渐变：

background-image: linear-gradient(color1,color2);

/*透明---黑色半透明*/
background-image: linear-gradient(transparent,rgba(0,0,0,0.6));

/*改变颜色渐变方向*/
/*方位名词*/
background-image: linear-gradient(to bottom, red, green);
/*角度*/
background-image: linear-gradient(60deg, red, green);

径向渐变：

主要用在网页中，做按钮的渐变色效果

background-image: radial-gradient(半径大小 at 0px 0px , red, green);

布局

版心：

一个固定宽度并且水平居中的盒子，用来显示网页的主要内容。

版心类名常用：container、w、wrapper
```
.container {width: 1200px;margin: 0 auto;
}
/*版心属性设置*/
```
重置默认样式
```
* {margin:0;padding:0;
}
```

常用布局名词

位置	属性名
顶部导航条	topbar
页头	header、page-header
导航	nav、navigator、navbar
搜索框	search、search-box
横幅、广告、宣传图	banner
主要内容	content、main
侧边栏	aside、sidebar
页脚	footer、page-footer

元素显示与隐藏问题

让一个元素在页面中显示出来
display：

属性值：none/block

特点：直接删除，不占用位置
visibility：

属性值：visible/hidden

特点：隐藏后继续占有位置
overflow：

属性值：hidden/visible/scroll（滚动条）/auto（自动显示滚动条）
opacity：

属性值：0（隐藏）、1（显示）、0~1（显示程度）

CSS高级技巧

精灵图

目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度（CSS精灵技术/CSS Sprites/雪碧图）
核心原理：把网页中全部的小图整合到一张大图中
使用：div + background-position: x y
一般使用伪元素 + 精灵图，可以省去一个盒子

tips：精灵图的移动全为x，y的反方向，故x，y像素值为负值

ico图标设置

<link rel="shortcut icon" href="./favicon.ico">
/*设置标题左侧的小图片*/

字体图标

iconfont（字体图标）
展示的是图标，本质为字体

CSS三角

CSS盒子边框为四个等边矩形

/*
1 画一个盒子
2 设置不同边框的颜色
3 宽高设置为0 仅保留边框
4 选择其中一个三角形设置颜色 ,其余的三角形设置为透明色
*/
div {height:0;width:0;border:5px solid transparent;border-bottom-color:pink;
}

用户界面样式

鼠标样式（cursor）

属性	描述
default	小白（默认）
pointer	小手
move	移动
text	文本
not-allow	禁止

轮廓线outline

input {outline: none;
}

防止拖拽文本域

textarea {resize: none;
}

vertical-align

用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。（谁有问题给谁设置）
只对行内、行内块元素有效

vertical-align: baseline (默认)| middle | top | bottom

baseline:使元素的基线与父元素的基线对齐

top：使元素的顶部与其所在行的顶部对齐

middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐

bottom：使元素底部与所在行的底部对齐

图片底部空白间隙问题

1.给图片修改vertical-align属性

2.把图片转换为块级元素
浏览器把行内、行内块当做文字处理了
文本框和表单按钮无法对齐
input和img无法对齐
div中文本框，文本框无法贴顶的问题

溢出文字隐藏显示

属性名：overflow–控制溢出部分显示与隐藏
- hidden：溢出部分隐藏
- visible：（默认值）溢出部分可见
- scrol：无论是否溢出，都显示滚动条
- auto：根据是否溢出，自动显示或隐藏滚动条
单行文本

/*1. 先强制一行内显示文本*/white-space: nowrap; （ 默认 normal 自动换行）/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

多行文本

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

本文发布于:2024-02-27 18:03:38，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/1709109778114099.html

上一篇：腾讯云安装kubesphere经验总结

下一篇：（其他算法与技巧）【 JAVA大数】

标签：属性常用 HTMLCSS

留言与评论（共有 0 条评论）