HTML、CSS

最新推荐文章于 2021-06-10 02:47:08 发布

大涨大大

最新推荐文章于 2021-06-10 02:47:08 发布

阅读量562

点赞数 2

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_47309568/article/details/106940207

版权

HTML、CSS

以下是我从刚入门开始的一些笔记主要是后面自己用的话可以更方便的找到，有错的地方请提出我及时改正（时间比较匆忙慢慢增加）

以下是我从刚入门开始的一些笔记主要是后面自己用的话可以更方便的找到，有错的地方请提出我及时改正（时间比较匆忙慢慢增加）

先说下一些可能会用到的元素属性

<!-- 设置元素是否可被用户修改 -->
contenteditable:true/false; 
<!--规定元素内容文本方向-->
dir:ltr/rtl;
<!--设置元素是否能被拖动-->
draggable:true/false;
<!--设置元素隐藏没有false-->
hidden:

下面是页面的元素以及作用

<!-- html版本号 ,告诉浏览器以某个(html5)版本解释执行该html文件-->
<!DOCTYPE html>
<html>
	<!--头部标签-->
	<head>
		<!-- 当前页面的字符编码格式，防止中文乱码 -->
		<meta charset="utf-8" />
		<!-- 每30秒刷新页面 -->
		<meta http-equiv="refresh" content="30">
		<!-- 让浏览器打开本网站以急速模式 -->
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<!-- 你自己的链接地址，页面可以直接写图片名字例如:<base href="../img/"> 下面img标签直接写<img src="1.png" alt=""> -->
		<base href="url">
		<title>标题部分</title>
	</head>
	<!--会经常编辑的标签，页面的结构全部都写在body里面-->
	<body>
		写主体部分
	</body>
</html>

去浏览器样式

    <!-- 去掉浏览器的默认样式 -->
    *{
    <!-- 通用选择器 * -->
    margin:0;
    padding:0;
    <!-- 去掉列表的样式 -->
    list-style:none;
    }
    <!-- 去掉 a 链接的下划线 -->
    a{ 
     text-decoration: none;
    }

下面是css3新增的选择器类型以及伪类伪元素选择器

 	1.[class] 为页面中有 class 属性的元素添加样式
    2.[class="box"] 选中页面中有 class 属性的，并且属性值只能为 box（属性值代表引号内的）
    3.[class*="b"] 选中页面中有 class 属性的，并且包含字母 b 的元素
    4.[class~="box"] 选中页面中有 class 属性的，并且属性值中有空格，box 代表其中的一个单词，它本身也会被选中
    5.[class|="box"] 选中页面中有 class 属性的，并且属性值中有连字符的，box 代表连字符前面那个单词，它本身也会被选中
    6.[class^="b"] 选中页面中有 class 属性的，并且属性值以 b 开头的元素
    7.[class$="ox"] 选中页面中有 class 属性的，并且属性值以 ox 结尾的元素
<--伪类选择器-->
	.box:nth-child(2) （父元素的所有子元素中，类名为 box 的并且为第二个的：否则失效）
	.box:first-child	（第一个）
	.box:last-child		（最后一个）
	.box:nth-last-child()  （倒数第几个）
	.box:nth-of-type(2) （类名为 box 的元素，视其他元素而不见，在类名为 box 的元素中找第二个元素添加样式）
	.box:first-of-tyep  这种类型的第一个
	.box:flast-of-tyep  这种类型的最后一个

<--伪元素选择器-->
	.box::first-letter 选中第一个字母
	.box::first-line 选中第一行文本
	.box::before 插入到元素内部，作为第一个元素出现 
	.box::after 插入到元素内部，作为最后一个元素出现

	.box>div 子代选择器，只选择子代
	.box div 后代选择器，全部的孩子，包括子类及子类的子类

文字的一些属性

    /* 文字样式 */
    /* 文字大小 */
    font-size: 40px;
    /* 文字颜色 */
    color: blueviolet;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 300px;
    /* 字体粗细 */
    font-weight: 700;
    /* 文字字体 */
    font-family: "宋体";
    /* 斜体 */  
    font-style: italic;
    /* 字间距 */
    letter-spacing: 20px;
    /*首行缩进 1em 表示文字大小 */
    text-indent: 2em;
    /* 自动换行 */
    word-break: break-all

    /* 禁止用户选中文本 */
    user-select:none;
    /* 鼠标变小手 */
    cursor:pointer;

单行文本溢出

   .box{
    /* 限制换行 */
    white-space: nowrap;
    /* 超出隐藏 */
    overflow: hidden;
    /* 将超出的文本内容显示为圆点 */
    text-overflow: ellipsis;
    }

多行文本溢出隐藏（谷歌）

.box{
    /* 定义为盒子显示 */
    display: -webkit-box;
    /* 定义框内子元素的排列方式为垂直排列 */
    -webkit-box-orient: :vertical;
    /* 定义超出几行 */
    -webkit-line-clamp: 2;
    }

文字渐变

注意：写在 background 属性下面，正常；写在 background 上面则 clip 不生效。

.div{
    /* 将背景设为颜色渐变（兼容性） */
    background:linear-gradient(to right,red,black);
    background: -webkit-linear-gradient(to right,red,black);
    /* 规定背景的绘制区域 */
    -webkit-background-clip: text;
    /* 将文字设为透明色 */
    color: transparent;
    }

在浏览器顶部标题前面加logo

<!-- href="引入图标的地址";图片大小设置为16x16 -->
<link rel="shortcut icon" hred="favicon.ico" type="image/x-icon">

布局可能都会遇到的一些问题

给子元素添加 margin-top，好像作用在父元素身上。
1. 给父元素添加 padding，去代体子元素的 margin。
2. 给父元素添加 overflow:hidden;
3. 破坏条件

满足条件（五个缺一不可，都满足才会发生）
(1) 父元素没有上边框
(2) 父元素没有上填充
(3) 该子元素是父元素的第一个子元素
(4) 父元素没有浮动
(5) 子元素没有浮动

上下盒子的上下 margin 会进行叠加
试用浮动注意时子元素的高度不相同的时候

左浮动：掉下来的子元素从左往右依次排列，当有一个子元素高于其他子元素其他子元素会从高出的后面开始排列如下图所示（右浮动同理）

清除浮动（由于浮动的元素脱离文档流，撑不开父元素的高度所以必要的时候要清除浮动）

1.直接给父元素设置高度
2.给父元素加

overflow: hidden;

3.添加伪元素清除浮动

.box:after{
      content:"";
      dispiay:block;
      clear:both;
    }

4.创建最后一个子元素

<div style="clear:both;"></div>

最后浮动的元素他的父元素不能有浮动哦！如果父元素也有浮动父元素高度会被自动撑开

icon图标的使用

在阿里巴巴矢量图标库中找到对应的 icon 图标
点击添加购物车 >加入到项目中（没有的话自己新建项目）>在我的项目中选择 font class，点击生成在线的 css 地址>在 html 页面中通过 link 标签引入（记得加上 https：）>在页面需要引入图标的位置通过 i 标签使用

<i class="iconfont 这里写你图标的名字"></i>

注意：在线地址要时刻更新

css3 2D动画效果

(1).平移
/*水平方向平移，正值向右平移，负值向左*/
transform: translateX(-20px);
/*垂直方向平移，正值向下平移，负值向上平移*/
transform: translateY(-20px);
/*第一个值表示水平方向，第二个值表示垂直方向；一个值时表示水平方向*/
transform: translate(-20px,20px);
(2).旋转
/*deg 角度*/
/* 正值表示顺时针方向旋转，负值表示逆时针方向旋转 */
transform: rotate(-180deg);
(3).缩放
/* 大于 1 的正值表示放大，0 表示缩小为没有，负值表示缩小；一个参数值表示水平和垂直等比例缩放，两个参数第一个代表横向缩放，第二个代表纵向缩放*/
transform: scaleX(-1);
transform: scaleY(2);
transform: scale(1,2);
(4).斜切
/* X代表横向的变形Y代表纵向变形有正负值 */
transform: skewX(60deg);
transform: skewY(60deg);
transform: skew(30deg,30deg);
(5).过渡时间
transition: 2s;
(6).阴影内容
/* 第一个参数：水平方向的偏移量，正右 负左 0 左右 */
/* 第二个参数：垂直方向的偏移量，正下 负上 0 上下 */
/* 第三个参数：阴影的模糊程度，值越大越模糊 */
/* 第四个参数：阴影的大小，值越大阴影越大 */
/* 第五个参数：阴影的颜色 */
/* 第六个参数：内阴影（一般不用） */
box-shadow: 0 0 15px 10px #666 inset;

页面添加改变滚动条样式以及去掉滚动条

/* 超出隐藏 */
overflow:hidden;
/* 超出内容会出现滚动条，否则不会。 */
overflow:auto;
/* 始终出现滚动条 */
overflow:scroll;
/* 横向纵向超出滚动条 */
overflow-x: auto;
overflow-y: auto;
/* 去掉滚动条 */
.div::-webkit-scrollbar{
    width:0;
    height:0;
    /* 隐藏 */
    display:none;
}
  /* 改变滚动条样式 */ 
 .div::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    scrollbar-arrow-color:red;
}
.div::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
    scrollbar-arrow-color:red;
}
.div::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

rgba 和 opacity 的区别

rgba 只作用在背景色，其他内容不会变透明。
opacity 作用在全部的地方，其他内容也会变透明。

在浏览器标签前面加LOGO

// 写在head标签中
// href=>引入图标的地址
// 图片大小设置为 16x16
<link rel="shortcut icon" hred="favicon.ico" type="image/x-icon">

定位

调整层级z-index
只有在定位属性的情况下，可以调整层级。层级默认是0，值越大，层级越高。没必要用的话可以不写在其他的定位元素挡住你要展示的定位元素以后使用

什么时候用

页面中的元素需要重叠的时侯，或者页面中的元素固定不动的时候。

定位是什么？

元素可以放在页面的任何位置，并且不会影响页面中其他元素。

定位的分类

/* 相对定位  相对于自身定位*/
div{
	position: relative;
	top:50px;
	z-index:20;
}
/* 绝对定位  相对于离他最近的父元素定位，并且这个父元素身上有position定位属性：如果所有的父辈都没有定位属性，相对于body定位。*/
div{
	position: absolute;
	top:50px;
	z-index:2;
}
/* 固定定位  相对于body（浏览器窗口）去进行定位。即时页面滚动，他还是固定在页面上不动的*/
div{
    position: fixed;
    right: 0px;
    top:200px;
    z-index:20;
}

背景图片定位以及居中显示

注意：前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

 /*设置背景图片*/
background-image:url(图片地址)
/* 设置背景图片禁止重复*/
background-repeate:no-repeat;
/* 背景图片点的大小设置*/
background-size:20px 14px;
/* 按照宽高中的较小者占满盒子，较大者按照比例缩放，盒子不会出现空白，图片无法完全显示 */
background-size:cover;
/* 按照宽高中的较大者占满盒子，较小者按照比例缩放，盒子会出现空白，图片可以完全显示。*/
background-size:contain;
/* 设置背景图片位置*/
background-position:center  bottom;
/*第一个参数：水平方向  50% lrft right  center*/
/*第二个参数：垂直方向  30% top  bottom center*/
/*分开设置*/
background-position-x: 20%;
background-position-y: center;
/*也可以将属性写在一起*/
background: url(img/1jpg) no-repeat center center /100% auto;
/* 设置背景图片固定在窗口不能随窗口滚动而滚动*/
background-attachment:fixed;
/* 取值：
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定。
inhert:继承，没什么说的。
该属性可以应用于任何元素。
*/

渐变

分类

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

浏览器内核（兼容性）

-webkit- 谷歌
-moz- 火狐
-ms- ie
-o- 欧鹏

/* 简单的从上往下线性渐变 */
#box{
    background: -webkit-linear-gradient(red, blue); /* 谷歌 */
    background: -o-linear-gradient(red, blue); /* 欧鹏*/
    background: -moz-linear-gradient(red, blue); /* 火狐*/
    background: linear-gradient(red, blue); /* 标准的语法 */
    }
 /* 
第一个参数：渐变开始的方向
	关键字：left、 top 、right、 to bottom、
第二个参数：渐变开始的颜色
	关键字：十六进制、rgb、rgba
*/

/* 不均匀的线性渐变*/
/* 提示：使用百分比或者像素值都可以*/
#box{
	background: 内核 +linear-gradient(left,red 10%,yellow,green 20%);
    background:linear-gradient(left,red 10%,yellow,green 20%);
}

/* 重复性的线性渐变*/
#box{
	background: 内核 +repeating-linear-gradient(45deg,red,yellow 30%);
	background:repeating-linear-gradient(45deg,red,yellow 30%);
}

/* 径向渐变 */
#box{
	 /*简单径向渐变*/
	background:内核+radial-gradient(red,yellow);
	
	/*不均匀的径向渐变：*/
	background:内核+radial-gradient(red 10%,yellow 20%,pink);

	/*重复性的径向渐变：*/
	background:内核+-repeating-radial-gradient(red,yellow,pink 50%);
}

弹性布局

// 容器（写在父元素身上）的属性
display:flex;
1.flex-direction:	//确定主轴的方向
	row（默认值）：主轴为水平方向，从左往右
	row-reverse：主轴在水平方向，从右往左
	column：主轴在垂直方向，从上往下
	column-reverse：主轴在垂直方向，从下到上
2.flex-wrap：子元素的换行
	wrap：换行，从上到下
	nowrap：不换行（默认值）
	wrap-reverse：换行，从上到下
3.justify-content: 子元素在主轴方向的对齐方式
	*flex-start:主轴的起点
	*center:主轴的中点
	*flex-end:主轴的终点
	*space-between:两端对齐，子元素之间的间隔都相等
	*space-around:每个子元素左右两边的距离相等
4.align-items: 子元素在交叉轴方向的对齐方式（适用于一根轴线和多根轴线）
	*flex-start:交叉轴的起点
	*flex-end:交叉轴的终点
	*center：交叉轴的中点
5.align-content: 子元素在交叉轴的方向的对齐方式（适用于多跟轴线）
	*flex-start:交叉轴的起点
	*flex-end:交叉轴的终点
	*center：交叉轴的中点
	*space-between :两端对齐，子元素之间的间隔都相等
	*space-around:每个子元素左右两边的距离相等

项目（写在子元素身上）的属性
1.order
	order的值是整数，默认为0，整数越小，项目的排列越靠前
2.flex-grow
	父元素有多余的空间时，子元素是否放大。
	默认值为0，既有多余的空间也不放大；可能的值为整数，表示放大的比例
3.flex-shrink
	父元素空间不足时，子元素是否缩小，默认值为1，即空间不足时，子元素会自动缩小。
4.flex-basis
	表示子元素在主轴上占据的空间，默认值为auto。
5.align-self
	允许子元素有自己独特的在交叉轴上的方式，默认值为auto。
	*auto：和父元素在交叉轴上的值一致
	*flex-start：顶端对齐
	*flex-end：底部对齐
	*center：垂直方向上居中对齐
	*baseline：子元素第一行文字的底部对齐
	*stretch：当子元素未设置高度时，子元素将和父元素等高对齐

表单

<input type="text" placeholder="这里输入给用户提示的信息">
/*placeholder：提示文本
size：输入框的长度
value：指定默认值
maxlength：输入的最多字符数
name：和后台进行数据交互的，用于数据库获取信息
readonly：只读
disabled：禁用
type：控件类型*/
<input type="text" placeholder="输入默认提示内容" maxlength="10" name="username">
/* 密码框*/
<input type="password" name="psd">
/* 单选框（name值相同实现单选）*/
男<input type="radio" name="sex">
女<input type="radio" name="sex">
/* 复选框*/
<!-- checked:默认选中 -->
篮球<input type="checkbox" name="hobby" checked>
学习<input type="checkbox" name="hobby" checked>
唱歌<input type="checkbox" name="hobby" checked>
跳舞<input type="checkbox" name="hobby" checked>
/* 下拉框*/
<select name="" id="" multiple size="2">
	<option value="" selected>学硕士</option>
	<option value="">博士</option>
	<option value="">博士</option>
	<option value="">博士</option>
</select>
<!--
size   控制option现实的个数
multiple  表示可以多选，按ctrl可以多选，默认单选
value   属性的参数值是当该项被选中并提交后，web浏览器传送给服务器的数据。缺少时，浏览器讲传送选项的内容。
selected  用来指定选项的初始状态，表示该选项在初始时是被选中的。
-->
/* 上传文件*/
<input type="file">
/* 文本域 （一些样式改变在下面css中）*/
<textarea name="" id="" cols="30" rows="10"></textarea>
/*h5中的表单新功能*/
<!-- 颜色版 -->
<input type="color">
<!-- 邮箱 -->
<input type="email">
<!-- 日期 -->
<input type="datetime-local">
<!-- 数值 -->
<input type="number" max="10" min="1">
<!-- 时间日期 -->
<input type="datetime-local">
<!-- 搜索 -->
<input type="search">
<!-- 时间 -->
<input type="time">

/* 按钮*/
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 自定义按钮 -->
<input type="button" value="返回">
<button>提交</button>

/* 改变输入框默认边框和选中边框样式*/
input{
border:none;
outline:none;
}
/* 改变placeholder默认提示内容的样式*/
input::-webkit-input-placeholder{
color:red;
}
/*文本域样式*/
textarea{
	/* 禁止调整 */
	resize: none;
	/* 默认的 */
	resize: both;
	/* 垂直方向调整 */
	resize: vertical;
	/* 水平方向的调整 */
	resize: horizontal;
}