CSS+HTML

年纪轻轻只想躺平

已于 2023-09-04 08:28:38 修改

阅读量405

点赞数

文章标签： css css3 前端 html html5

于 2023-09-03 23:25:19 首次发布

本文链接：https://blog.csdn.net/chen_jigang/article/details/132657340

版权

CSS

css常用样式

fiex布局

父级容器设置： display：flex 开启flex布局（弹性盒模型）

1、flex-direction（主轴方向）

自左向右：row（默认值）
自右向左：row-reverse
自上向下：column
自下向上：column-reverse

2、flex-wrap（主轴换行）

不换行： nowrap（默认）
换行，自上向下： wrap
换行，自下向上： wrap-reverse

3、flex-flow（flex-direction和flex-wrap简写，默认值为row nowrap）

4、 justify-content（item项主轴上的对齐方式）

flex-start
flex-end
center
space-between
space-around

5、align-items（item项在交叉轴上的对齐方式）

stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）
center：交叉轴的中点对齐
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
baseline: 项目的第一行文字的基线对齐

6、align-content（多根轴线交叉轴对齐方式，单轴线设置不起作用）

stretch：轴线占满整个交叉轴（默认值）
flex-start：交叉轴的起点对齐，自上向下
flex-end：交叉轴的终点对齐，自下向上
center：交叉轴的中点对齐，居中
space-between：间隔平均分布，上下两端无间隔
space-around：间隔平均分布，上下两端有间隔

item项属性（6个）：order、flex-grow、flex-shrink、flex-basis、flex、align-self

1、 order（item项小-大顺序排列，允许负数）

order: 1, order: -1

2、flex-grow（item项的按比例占满主轴）

flex-grow: 1, lex-grow: 2

3、flex-shrink

item项的缩小比例，默认为1，空间不足，该项将缩小

4、flex-basis

分配多余空间之前，item项占据的主轴空间

浏览器根据该属性，计算主轴是否有多余空间。默认值auto，即项目的本来大小

5、flex

flex-grow、flex-shrink、flex-basis的简写，默认值为【0 1 auto】，后两个属性可选

6、align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

圣杯布局 (常见PC端)

.container {
    height: 500px;
    display: flex;
    justify-content: space-between;
}

.content { flex: 1 }

.left, .right { width: 200px }

网格布局Grid

CSS用户界面样式

鼠标样式cursor

属性值描述
default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
轮廓线 outline：color style width
防止拖拽文本域 resize：none

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

精灵图

将网页中的多张图像整合到一张大图中（精灵图），通过调整位置来展示图片，从而减少请求次数

溢出裁剪

text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
- clip：当对象内文本溢出部分裁切掉
- ellipsis：当对象内文本溢出时显示省略标记（...）
white-space：设置文字在一行显示，不能换行
overflow：文字长度超出限定宽度，则隐藏超出的内容

基于高度截断、基于行数截断

{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.demo::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
}


<div class='demo'>这是一段很长的文本</div>

margin塌陷/合并

正数&&正数，取最大的数
负数&&负数，取绝对值最大的数
正数&&负数，取和的值

解决方法

绝对定位，父元素position：reletive，子元素position：absolute
相对定位，子元素position：reletive，通过top、left等
行内块元素，子元素display：inline-block
浮动，子元素float:left
BFC，开启BFC的父元素不会和子元素发生外边距叠加，overflow：hidden
内边距，父元素设置margin-top，padding-top
父元素设置边框、元素之间添加空元素等

BFC 块级格式化环境

BFC (Block Formatting Context）是一个css中隐含的属性，开启BFC的元素会变成一个独立的布局区域

元素开启BFC后的特点

开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素子元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动的子元素

开启元素的BFC

设置元素的浮动（不推荐)
将元素设置为行内块元素（不推荐)
将元素的overflow设置为一个非visible的值，如： overflow:hidden

作用：解决高度塌陷，外边距重叠，清除浮动问题

CSS复合选择器

子元素选择器【.box1>box2】
交集选择器【h2.title】
并集选择器【.box1, box2, box3】
链接伪类选择器
- a:link：未访问的链接
- a:visited：已访问的链接
- a:hover：鼠标悬停
- a:active：选定的链接
伪元素选择器
- :before : 选择器在被选元素的内容前面插入内容
- :after : 选择器在被选元素的内容后面插入内容
属性选择器
- a[href]：选择带有href属性的a元素
- a[href="www.baidu"]：选择属性href="www.baidu"的a元素
- a[href][title] 选择所有同时有 href 和 title 属性的a元素
- 包含、以指定值开头、以指定值结尾

伪类选择器（常用）

:first-child：第一个子元素
:last-child：最后一个子元素
:nth-child(n)：选中第n个子元素
: empty ：选择没有任何内容的元素，空格也算元素
: not：否定选择器，可以选择除某个元素之外的所有元素
:target：目标选择器，用来匹配文档的url的某个标志符的目标元素
::before和::after

必须配合content属性使用，向元素逻辑上的头或尾添加内容，content 定义插入的内容，content必须有值，至少是空。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入

定位 position

相对定位、绝对定位、固定定位、粘性定位

相对定位：relative，相对于元素本身来定位
绝对定位：absolute，父元素设置relative，子元素相对于父元素定位，如不设置，则以根元素定位
固定定位：fixed，一种绝对定位，永远参照于浏览器的视口进行定位，元素不会随网页的滚动条滚动
粘性定位：sticky，在没有达到阈值之前，随鼠标正常移动，到达后为固定定位，常用于网页侧边栏

雪碧图

将多个小图片统一保存到一个大图片中，通过调整background-position来显示具体的小图片，这样图片会同时加载到网页中，有效的避免图片出现闪烁的问题，在网页中应用广泛，称为CSS-Sprite

使用步骤

先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景图片
设置一个偏移量以显示正确的图片

特点

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升体验感

background-position: -xxxpx xxxpx;

background

background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

background: transparent url(xxx.jpg) repeat-y scroll center top ;

背景颜色：transparent ，默认：透明
背景图片地址：url(xxx)
背景平铺：
- repeat ：在纵向和横向上平铺（默认）
- no-repeat ：不平铺
- repeat-x ：在横向上平铺
- repeat-y ：在纵向平铺
- inherit ：继承父元素
背景滚动
- 设置背景图像是否固定或者随着页面的其余部分滚动
- scroll 背景图片随着页面的其余部分滚动- 默认
- fixed 背景图像是固定的
- inherit 指定backgrund-attachment的设置应该从父元素继承
背景位置
- background-position: 0 0 左上角（默认）
- 单位可以是长度px，关键字，百分数值
- 关键字成对出现left right top bottom center，如果仅指定一个关键字，其他值将会是"center"

px、em、rem、vh、vw

px：像素，是相对于显示器屏幕分辨率

em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。浏览器的默认字体是16px。默认1em=16px

在body选择器中声明 Font-size=62.5% ，如此 1em=10px ，换算更为方便

rem：相对与HTML根元素，只修改根元素就成比例地调整所有字体大小。

除了IE8及更早版本外，所有浏览器均已支持rem，不支持它的浏览器，写一个绝对单位的声明

p { font-size:14px; font-size:.875rem }

vh和vw：就是根据窗口的宽度，分成100等份，100vw就表示满宽，100vh就表示满高

display 和 visibility

visibility : hidden，将元素隐藏，占用位置，具有继承性，子元素也会继承这个属性，不影响计数器的计数，同v-show，适合频繁切换使用

display : none，将元素的显示设为无，不占位置，同v-if，适合初始化不渲染，并且切换次数少时使用

CSS3 的 transition 支持 visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合 visibility 使用纯 css 实现 hover 延时显示效果，提高用户体验

隐藏页面元素

display：none，导致浏览器的重排
visibility：hidden，隐藏元素，DOM存在，触发重绘
opacity：0，会引发重绘，占据页面空间，可以响应点击事件
height：0、width：0
position：absolute

link 和 @import

link属于HTML标签，无兼容问题，而@import是CSS提供的，只在IE5以上才能识别
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
link 方式的样式的权重高于@import的权重

当使用 javascript 控制 Dom 去改变样式的时候，只能使用 link标签，因为@import不是 dom可以控制的

src 和 href

href 指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

伪类和伪元素

单冒号用于CSS3伪类，双冒号用于CSS3伪元素。双冒号是在当前规范中引入的，用于区分伪类和伪元素

常见伪类——:hover、:link、:active、:target、:not( )、:focus

常见伪元素——::first-letter、::first-line、::before、::after、::selection

::before，::after 特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入

选择器

选择器	示例	示例说明
类	.content	选择所有class="intro"的元素
id	#content	选择所有id="firstname"的元素
*	*	选择所有元素
标签	p	选择所有<p>元素
	div,p	选择所有<div>元素和<p>元素
	div p	选择<div>元素内的所有<p>元素
	div>p	选择所有父级是 <div> 元素的 <p> 元素
	div+p	选择所有紧接着<div>元素之后的<p>元素
属性	[target]	选择所有带有target属性元素
	[target=-blank]	选择所有使用target="-blank"的元素
	[title~=flower]	选择标题属性包含单词"flower"的所有元素
	[lang\|=en]	选择 lang 属性以 en 为开头的所有元素
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标在链接上面时
:focus	input:focus	选择具有焦点的输入元素
:first-letter	p:first-letter	选择每一个<p>元素的第一个字母
:first-line	p:first-line	选择每一个<p>元素的第一行
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素
	p~ul	选择p元素之后的每一个ul元素
	a[src^="https"]	选择每一个src属性的值以"https"开头的元素
	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素
	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素
	p:first-of-type	选择每个p元素是其父级的第一个p元素
	p:last-of-type	选择每个p元素是其父级的最后一个p元素
	p:only-of-type	选择每个p元素是其父级的唯一p元素
child	p:only-child	选择每个p元素是其父级的唯一子元素
	p:nth-child(2)	选择每个p元素是其父级的第二个子元素
	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素
	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
	p:last-child	选择每个p元素是其父级的最后一个子级。
	:root	选择文档的根元素
	p:empty	选择每个没有任何子级的p元素（包括文本节点）
	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）
	input:enabled	选择每一个已启用的输入元素
	input:disabled	选择每一个禁用的输入元素
	input:checked	选择每个选中的输入元素
	:not(p)	选择每个并非p元素的元素
	::selection	匹配元素中被用户选中或处于高亮状态的部分
	:out-of-range	匹配值在指定区间之外的input元素
	:in-range	匹配值在指定区间之内的input元素
	:read-write	用于匹配可读及可写的元素
	:read-only	用于匹配设置 "readonly"（只读）属性的元素
	:optional	用于匹配可选的输入元素
	:required	用于匹配设置了 "required" 属性的元素
	:valid	用于匹配输入值为合法的元素
	:invalid	用于匹配输入值为非法的元素

盒模型和box-sizing

内容(content)，内边距(padding)，边框(border)，外边距(margin)四个部分

标准：box-sizing: content-box; widtd=content

怪异：box-sizing: border-box; width= content+padding +border（推荐）

box-sizing: inherit 父元素继承此值

清除浮动的影响

1、为 float 元素之后的元素添加 clear 属性

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1{ float: left }
.box2{ float: right }
/*清除左右两边浮动元素的影响*/
.box3{ clear: both }

2、利用伪元素::after

父元素的末尾添加一个空的块元素，并将其清除

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

3、修改父元素的 owerflow 属性

将父元素的 owerflow 属性修改为 owerflow : auto / hidden

垂直水平居中

1、已知宽高，绝对定位+margin

.box { position: relative }

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    height:xxx;
    width:xxx;
    margin-top: -height/2;
    margin-left: -width/2;
}

2、已知宽高，绝对定位+margin

.box { position: relative   }

.center {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 200px;
    height: 200px;
    margin: auto;       
}

3、未知宽高，绝对定位+transform

.box{ position: relative }

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

4、未知宽高，flex+margin

.box { display: flex }

.center{ margin: auto }

给div划线的方法

outline：不占宽度，outline: red solid thick;

border：占宽度，border-bottom：1px solid red;

图片轮播（transition）

改变其透明度
改变层数
改变left值

内联、外链和嵌入式

内联>嵌入>外联，比较通用的样式适合抽离出来用外联，提高复用性，同时降低样式和内容的耦合

嵌入式：<style> span{ color : red }</style>

内联式：<span style="color:red"></span>

外链式：<link href="***.css" >

css的优先级

内联样式 > ID 选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器

opacity和rbga

rgba(255,255,255,0.5)
opacity: 0.5

opacity作用于元素及所有内容的透明度，且子元素会继承，rgba( )只作用于元素的颜色或其背景色

css三角形

左下直角三角形

#triangle-bottomright{
  	width: 0;
  	height: 0;
  	border-bottom:100px solid red;
  	border-left:100px solid transparent;
}

上等腰三角形

#triangle-up{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid red;
}

CSS3新特性

圆角	border-radius
阴影	box-shadow
边框图片	border-image
文字特效	text-shadow
强制文本换行	word-wrap
线性渐变	linear-gradient
旋转	transform:rotate()
倾斜	skew()
缩放	scale()
移动	translate(）
过渡	transition
动画	animation
伪元素	::selection
颜色	rgba()
实现媒体查询	@media
弹性盒	flex

@supports

//如果通过了条件
@supports(运行条件) {
    /* 应用规则---想要实现的css语句*/
}

//如果没有通过条件
@supports not(运行的条件) {
    /* 应用规则---想要实现的css语句 */
}

动画

transition 实现渐变动画
- property：填写需要变化的css属性
- duration：完成过渡效果需要的时间单位(s或者ms)
- timing-function：完成效果的速度曲线
- delay：动画效果的延迟触发时间
transform 转变动画
- translate：位移
- scale：缩放
- rotate：旋转
- skew：倾斜

animation 实现自定义动画

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

animation: rotate 2s;

属性	含义
transition（过度）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	只是transform的一个属性值，即移动
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性

CSS预编语言

sass、scss、less、stylus 的嵌套、变量、作用域、代码混合、代码模块化

嵌套

引用父级选择器简写为【 &】，Sass 和 Stylus 可以用没有大括号的方式书写

.a {
  &.b { color: red }
}

变量

增加CSS的复用方式，修改一处即可修改全局，less声明的变量以@开头，sass 以 $ 开头

@white: #fff;
a { color: @white }

$white: #fff;
a { color: $white }

作用域

变量存在作用域，先从局部作用域查找变量，依次向上级作用域查找

混入(mixins)

将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用，可以定义变量和默认值

在less中，参数变量为@声明

.a { font-weight: 700 }

.b(@color: red) { color: @color }

.c{ .a; .b(red) }

编译后

.a { font-weight: 700 }
.b { color: red }
.c { font-weight: 700; color: red }

Sass声明时需要使用@mixinn，后面紧跟mixin的名，参数名为变量$声明的形式，引入需要 @incluede

@mixin a {
  font: { size: 20px }
  color: #fff;
}

.b { @include a }

代码模块化

@import '../../common/css/base.css'

CSS优化

内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
- css匹配的规则是从右往左开始匹配，例如#markdown .content h3，先找到h3标签元素，然后去除祖先不是.content的元素，最后去除祖先不是#markdown的元素，尽量不要标签选择器和嵌套多层
减少使用昂贵的属性
不要使用@import
移除空的css规则
正确使用display的属性
不滥用浮动、web字体
声明过多的font-size，建立一个公共样式，然后引用即可
不在选择符中使用ID标识符，遵守盒模型规则
尽量减少页面重排、重绘
抽象提取公共样式，减少代码量

HTML

默认标签解析

<!DOCTYPE html>

通用标记语言的文档类型声明，位于文档的第一行

BackCompat：怪异模式，浏览器按照自己的方式解析渲染页面

CSS1Compat：W3C标准模式

该属性声明之后，浏览器按照W3C的标准解析渲染页面

<html lang="en">

根节点，lang ：语言类型，对于搜索引擎、网页翻译有指导意义。英文：lang="en"，中文：lang="zh-CN"

<head>

包含所有的头部标签元素

<title>     // 标题
<base>      // 页面链接标签的默认链接地址
<link>      // 文档和外部资源之间的关系
<meta>      // 文档的元数据
<script>    // 脚本文件
<style>     // 样式文件

<body> 元素定义文档的主体

html常用标签

表格table

属性名	描述	属性值
width	宽度	像素值
height	高度	像素值
align	对齐方式	left、center、right
border	表格边框	像素值，默认无边框
cellspacing	单元格之间的间距	像素值，默认 2 像素
cellpadding	内容与边框之间的距离	像素值，默认 1 像素

标签名	说明
table	表格标签，用于包含多个 `tr`
tr	定义表格中的行，用于包含多个 `td`
td	定义表格中的单元格，用于存放单元格内容
th	定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示
thead	定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示
tbody	定义表格的主体，通常包含标题行下方的表格数据区域

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

列表list

无序列表 ul
```
<ul>
  <li>列表项</li>
</ul>
```
有序列表 ol
```
<ol>
  <li>列表项</li>
</ol>
```

自定义列表 dl

<dl>
  <dt>
    <dd>列表项</dd>
  </dt>
</dl>

表单form

表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，完整的用户信息记录
表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓名

提示信息：提示用户每一个表单控件是收集什么信息的

标签名	说明
form	定义表单域，统一收集传递数据
input	输入控件，可以是文本框、单选、复选、选择文件、按钮等
select	下拉列表
option	下拉列表选项，用于存放选项内容

输入框input

属性	描述
type	类型
name	名称，用于区分控件
value	值，用于记录或设置控件的值
checked	默认选中某个单选或复选框
id	控件标识，与 `label` 标签联用
maxlength	输入框最大输入长度

类型	属性	描述
输入	text	输入文字
输入	password	密码
选择	radio	单选按钮，多选一
选择	checkbox	复选框（打勾）
点击选择文件	file	文件上传使用
点击	button	按钮
点击	image	按钮
表单操作	submit	提交，会把数据发送给服务器
表单操作	reset	重置，会清空表单所有数据

HTML5新特性

语义化标签

方便开发人员的代码阅读和后期维护
提高用户体验
有利于seo搜索引擎优化
便于网络爬虫解析文档

<header><header/> 定义文档的头部

<nav><nav/> 定义导航链接

<section><section/> 定义文档中的节，段落

<article><article/> 定义页面独立内容区域

<aside><aside/> 定义页面的侧边栏内容

<detailes><detailes/> 定义文档某部分细节

<summary><summary/> 标签包含了details元素的标题

<dialog><dialog/> 定义对话框，提示框

新增Input表单的类型、和属性

类型： tel、number、date、time、week、month、url、email、color、rang

  <!-- 输入必须为邮箱类型 -->
  email邮箱：<input type="email">
  
  <!-- 输入必须为网址类型 -->
  url网络地址：<input type="url">
  
  <!-- 输入必须为日期类型 -->
  date日期：<input type="date">
  
  <!-- 输入必须为时间类型 -->
  time时间：<input type="time">
  
  <!-- 输入必须为数值类型 -->
  number数量：<input type="number" min="5" max="20">
  
号码：     <input type="tel">
颜色：     <input type="color">
周/年：    <input type="week">
月/年：    <input type="month">
范围：     <input type="range">

属性: 
  pattern       描述了一个正则表达式用于验证<input> 元素的值
  multiple      选择本地文件上传
  min 、 max    置元素最小值与最大值。
  step          为输入域规定合法的数字间隔。
  height、width 用于img类型的<input>标签的图像宽高

  <input 
    type="search"             类型
    required="required"       表单必填属性
    placeholder="请输入文字"    提示文本
    autofocus='autofocus'     页面加载完成自动聚焦输入框
    autocomplete="on"         输入时显示历史输入信息on/off
    ...
  >

audio、video音频和视频

CSS