HTML5前端笔记

已于 2022-04-15 15:46:19 修改
阅读量1.6k 收藏 3
点赞数
分类专栏： 同程实习笔记 实习 前端 文章标签： 前端 html5 html
于 2022-01-10 16:34:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44860598/article/details/122411901
版权

文章目录

HTML

图片

  • 图片在网页上的呈现顺序是从左到右依次排放的，并且所有图片默认以底部对齐
  • title=“鼠标划上去时的提示” alt=“图片加载失败后的文字”
  • 对图片只设置宽度或者高度，图片会自己等比例的放大，但是如果同时设置宽高度，那就会以用户的宽高为主。
<img src="images/1.png" width="20%">

表格

  • cellspacing="0"去掉了表格之间的间隙
  • border 表格边框属性
  • table 表格 tr一行 td 一个单元格 col一列
  • colspan一行中的列合并
  • rowspan一列中的行合并
		<table border="1px" cellspacing="0"> 
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<tr align="center">
				<td></td>
				<td>初级</td>
				<td>中级</td>
				<td>高级</td>
				<td>专家</td>
			</tr>
			<tr align="center">
				<td>标准</td>
				<td>被产品怼的说不出话</td>
				<td>跟产品互怼不相上下</td>
				<td>怼的产品没话说</td>
				<td>直接将其怼辞职</td>
			</tr>
			<tr align="center">
				<td>用户A</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>用户B</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>用户C</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

表单

  • action指定提交的地址
  • 所有的input必须要有name属性
  • input按钮的文字，使用value属性表示
  • input必须放在form表单中才能提交
  • input的type类型
    text文本输入框
    password密码输入框
    radio单选框
    checkbox多选框
    button按钮
    submit提交
    reset重置
    file文件选择框

布局与选择器

  • 一个空div，默认宽度100%，高度为0
  • id选择器，表示身份，不允许重名 #
  • 标签选择器，对应所有标签
  • 类别选择器class 表示拥有该类别的多个元素

选择器权重

行内样式优先级>id选择器>class选择器>标签选择器>通用选择器*
选择器选择的范围越小越精确优先级越高
选择器权重值
通用选择器*：0
标签选择器div:1
类别选择器.nav:10
ID选择器#id:100
行内样式:1000

文本属性

	<style tylie="text/css">
		.p1 { color:red } /* 文字颜色 */
		.p2 { font-family: "微软雅黑" } /* 字体类型 */
		.p3 { font-size: 26px; } /* 文字大小（高度） */
		.p4 { font-weight: bold; } /* 文字加粗 */
		.p5 { font-style: italic; } /* 文字倾斜 */
		.p6 { text-indent: 60px; } /* 首行缩进 */
		.p7 { text-align: center; } /* 水平对齐方式 */
		.p8 { line-height: 100px; } /* 行高 */
		.p9 { height: 100px; background-color: gray; line-height: 100px;}  /* 垂直居中 
		.p10 { text-decoration: underline; } /* 文本修饰 */
	</style>

图的使用

R红 所有颜色都是由红绿蓝组成的
G绿 图片格式 jpg gif png
B蓝
gif 支持动画 只有256种颜色 只有全透明和不透明两种模式
jpg 采用有损压缩算法 体积较小 不支持透明 不支持动画
png 采用无损压缩算法 体积也相对较小 支持透明背景 不支持动画
svg 用户保存颜色或图形简单的图形 可以用作图标
background-image: url(imgs/bg.png);
background-repeat: no-repeat; //图片不重复（图片默认是铺满重复的）
background-position: center center; //图片居中

元素浮动

  • 元素浮动，就是让元素能够漂浮起来，比如图下绿色的元素漂浮后，红色的会往上移

  • 可以左浮动和右浮动

  • clear:left/right/both

  • 表示当前元素不受到到左、右、两边的影响

  • 浮动元素在排列时，只参考前一个元素

  • 浮动元素不会覆盖文字内容、图片内容、表单元素

HTML5新增标签和属性

常用新标签

  • header:定义页面头部
  • nav:定义页面导航链接部分
  • footer:定义页脚
  • article:定义文章
  • section:定义区域
  • aside:定义侧边
  • datalist:标签定义选项列表。请与input元素配合使用，input的list属性和datalist的id属性进行绑定
  • fieldset:可将表单内的相关元素分组，打包 和legend搭配使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
  <header>定义页面头部</header>
  <nav>定义导航栏</nav>
  <footer>定义页面底部</footer>
  <article>文章</article>
  <section>定义区域</section>
  <aside>定义侧边</aside>

  <input type="text" value="输入值" list="params">
<datalist id="params">  
  <option>张三</option>
  <option>李四</option>
  <option>王五</option>
  <option >赵六</option>
</datalist>
<br/><br/>
<br/>
<fieldset>
  <legend>用户登录</legend>
用户名:
<input type="text"><br/>
密码:
<input type="password">
</fieldset>
	</body>
</html>

常用新属性

属性****用法****含义****
placeholder****占位符提供可描述输入字段预期值的提示信息
autofocus****规定当页面加载时 input 元素应该自动获得焦点
multiple****多文件上传
autocomplete****规定表单是否应该启用自动完成功能
required****必填项
accesskey****规定激活（使元素获得焦点）元素的快捷键
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
  用户名<input type="text" placeholder="提示信息" />
  自动获取焦点<input type="text" autofocus>
上传多个文件<input type="file" multiple >
<!-- 使用autocomplete，需要submit，而且需要autocomplete -->
<form action="">
  姓名<input type="text" autocomplete name="myName">
  不能为空<input type="text" required accesskey="s">
  <input type="submit">
</form>

	</body>
</html>

新增的type属性值

类型****使用示例****含义****
email****输入邮箱格式
tel****输入手机号码格式
url****输入url格式
number****输入数字格式
search****搜索框（体现语义化）
range****自由拖动滑块
time****选择小时和分钟
date****选择年月日
datetime****时间
month****选择年月
week****选择年和周
color**选择颜色
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
<form action="">
<fieldset>
  <legend>学生档案</legend>
<label> 姓名：<input type="text" placeholder="请输入姓名"></label> 
  <br/>
  手机号：<input type="number">
  <br/>
  邮箱<input type="email"><br/>
  所属学院<input type="text" list="school"><br/>
  <datalist id="school">
    <option>java</option>
    <option>python</option>
    <option>c</option>
    <option>c#</option>
  </datalist><br/>
出生日期<input type="date"><br/>
成绩<input type="number">
毕业时间
<input type="date">
<br/>
<input type="submit">
<input type="reset">
</fieldset>


</form>
	</body>
</html>

多媒体标签

  • embed：标签定义嵌入的内容

  • audio：播放音频

  • video：播放视频

多媒体 embed

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

多媒体 audio

HTML5通过标签来解决音频播放的问题。

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放

由于版权等原因，不同的浏览器可支持播放的格式是不一样的

<audio controls autoplay>
  <source src="./1.mp3">
  <source src="./1.mp3">
  您的浏览器不支持
</audio>

多媒体 video

HTML5通过标签来解决音频播放的问题。

同音频播放一样，使用也相当简单，如下图

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

多浏览器支持的方案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
<audio src="./1.mp3"  controls loop="-1"></audio>
为了兼容
<audio controls autoplay>
  <source src="./1.mp3">
  <source src="./1.mp3">
  您的浏览器不支持
</audio>
为了兼容
<video src="./2.mp4" autoplay controls></video>
<video controls>
  <source src="./2.mp4">
  <source src="./2.mp4">
  您的浏览器不支持
	</body>
</html>

CSS属性

基本

border-radius: 5px; 边框变圆

margin 、padding 内外扩充

margin: 1px 2px 3px 4px 上 右 下 左

​ 1px 2px 3px 上 左右 下

​ 1px 2px 上下 左右

​ 1px 上下左右

三大类型

display: block块元素 inline内联（行内）元素 inline-block 内联块元素

案例是让a标签能设置大小，它默认是行内元素，使用display:block来变为块元素

行内元素居中为text-align:center

块元素居中为 margin:auto

块元素

可以设置宽高大小，默认宽度为100%，并且独占一行

p ui li h1-h6 div form table

内联（行内）元素

无法设置宽高，元素大小随内容变化，所有元素默认排在一行，超出后会换行

i b span a

内联块元素

既能设置宽高，又能排在一行显示

img input

布局中的定位

positon: relative :父容器相对布局

absolute:子容器相对父容器绝对布局

fixed:固定在屏幕的某一个地方

语义化标签

  • header 头部
  • footer 尾部
  • nav 导航
  • article 文章（数据部分）
  • aside 侧边栏
  • main 主体
  • section 区块，类似div

笔记

Div与Span

  • div用来划分区域
  • span用来文本修饰
  • 他们默认都是没有样式的
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。 标签被用来组合文档中的行内元素。

CSS基础语法

选择器{

属性1：值1 ；属性2：值2

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    span{
      background-color: blue;
    }

		</style>
	</head>
	<body>
    <div>这是一个div</div>
    <div>又是一个div</div>
    <span>这是一个span</span>
	</body>
</html>

内联样式与内部样式

内联样式

   <div style="background-color: blue;">这是一个div</div>

内部样式

div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  • 使用内部样式可以复用样式
  • 内联样式优先级高于内部样式

外部样式

引入一个单独的css文件

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址。

<link rel="stylesheet" type="text/css" href="my.css">

通过@import方式也可以引用，但是不推荐使用

CSS颜色表示法

单词表示法

red blue green

透明色transparent

16进制表示法

#ff0000;

rgb（红绿蓝）三原色表示法：rgb(0,0,255)

rgb范围：0-255

rgb(255,0,0)

背景样式

  • background-color 属性指定元素的背景色。

  • background-image 属性指定用作元素背景的图像。

  • background-repeat 属性在水平和垂直方向上都重复图像。

  • background-attachment 属性指定背景图像是应该滚动还是固定的

    scroll 背景位置按照当前元素偏移

    fixed背景位置按照浏览器进行偏移

  • background-position 属性指定背景位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		div{
      width: 500px;
      height:500px;
      background-color: rgb(255,0,0);
      background-image: url(img/1.jpg);
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-attachment: scroll;
    }
    span{
      background-color: blue;
    }

		</style>
	</head>
	<body>
    <div style="background-color: blue;">这是一个div</div>
    
	</body>
</html>

CSS边框样式

border-style:边框样式

solid:实线

dashed:虚线

dotted:点线

border-width:边框大小

border-color:边框颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		div{
      width: 500px;
      height:500px;
    border-style: dashed;
    border-width: 30px;
    border-color: blue;
    border-left-color: red;
    border-right-style: solid;
    border-radius: 5%;
    border-top-left-radius: 50%;
    }
    span{
      background-color: blue;
    }

		</style>
	</head>
	<body>
    <div >边框样式</div>
    
	</body>
</html>

边框实现三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		div{
      width: 0px;
      height:0px;
      border-top-color: black;
      border-top-style: solid;
      border-top-width: 20px;
      border-left-color: transparent;
      border-left-style: solid;
      border-left-width: 20px;
      border-right-color: transparent;
      border-right-style: solid;
      border-right-width: 20px;
      border-bottom-color: transparent;
      border-bottom-style: solid;
      border-bottom-width: 20px;
    }

		</style>
	</head>
	<body>
    <div ></div>
    
	</body>
</html>

CSS文字样式

font-family：字体类型

添加多字体类型目的，如果第一个字体本地计算机没有，则会去找下一个字体，如果都没有，则会采用计算机默认的字体

添加引号目的，有些字体会有空格，使用引号把它们当成一个整体。

.p1 {  font-family: "Times New Roman", Times, serif;}

font-size：字体大小

推荐字体大小设置成偶数，有时候对文字对齐，会找字体中间对齐，偶数更好。

h1 {  font-size: 2.5em; /* 40px/16=2.5em */}

font-weight：字体粗细

normal

border

font-style：字体样式

noraml 正常

italic：倾斜

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>    		<style type="text/css">		div{  font-family: 宋体;  font-style: italic;}		</style>	</head>	<body>    <div>这是文字</div>    <div>this is english</div>    <p>thi is a english</p>	</body></html>

CSS文本效果

属性描述
text-align-last指定如何对齐文本的最后一行。
text-justify指定对齐的文本应如何对齐和间隔。
text-overflow指定应如何向用户呈现未显示的溢出内容。
word-break指定非 CJK 脚本的换行规则。
word-wrap允许长单词被打断并换到下一行。
writing-mode指定文本行是水平放置还是垂直放置。

单行文本溢出显示

white-space: nowrap; 强制一行显示

overflow: hidden; 超出元素默认宽度内容隐藏

text-overflow: ellipsis; 使用省略号代替未展示

多行文本溢出隐藏

（用webkit方式）

-webkit-line-clamp:用该属性来限定块元素内文本显示行数

display:-webkit-box:将对象作为弹性的伸缩盒子显示

-wbkie-box-orient:设置伸缩盒子对象内子对象的排列方式

text-overflow:ellipsis:使用省略号告诉用户有内容未显示

overflow:hidden 超出文本部分隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
  
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

 </style>
	</head>
	<body>
<p>
全校学生考试将于1月
全校学生考试将于1月7日全部结束-2月25日为寒假放假时间，接最新通知，学生宿舍区将于1月9号上午10点封闭，请还未离校的同学安排好个人离校车票等事宜，有特殊情况等私聊敏姐沟通
国内疫情仍不稳定，即将迎来春运高峰期，希望大家外出留意官7日全部结束-2月25日为寒假放假时间，接最新通知，学生宿舍区将于1月9号上午10点封闭，请还未离校的同学安排好个人离校车票等事宜，有特殊情况等私聊敏姐沟通
国内疫情仍不稳定，即将迎来春运高峰期，希望大家外出留意官方信息，不去中高风险地区，如寒假期间需出省，请提前联系敏姐报备‼️祝大家平安过大年
1月8日-2月25日为寒假放假时间，接最新通知，学生宿舍区将于1月9号上午10点封闭，请还未离校的同学安排好个人离校车票等事宜，有特殊情况等私聊敏姐沟通
        国内疫情仍不稳定，即将迎来春运高峰期，希望大家外出留意官方信息，不去中高风险地区，如寒假期间需出省，请提前联系敏姐报备‼️祝大家平安过大年
</p>
	</body>
</html>

（通用方式）

用after，相对定位的方式实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
  
p{
height: 30px;
line-height: 2em;
overflow: hidden;
border: 1px solid red;
position: relative;
}
p::after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0px 10px 0px 10px;
  background-color: white;
}
 </style>
	</head>
	<body>
<p>
全校学生考试将于1月
全校学生考试将于1月7日全部结束-2月25日为寒假放假时间，接最新通知，学生宿舍区将于1月9号上午10点封闭，请还未离校的同学安排好个人离校车票等事宜，有特殊情况等私聊敏姐沟通
国内疫情仍不稳定，即将迎来春运高峰期，希望大家外出留意官7日全部结束-2月25日为寒假放假时间，接最新通知，学生宿舍区将于1月9号上午10点封闭，请还未离校的同学安排好个人离校车票等事宜，有特殊情况等私聊敏姐沟通
国内疫情仍不稳定，即将迎来春运高峰期，希望大家外出留意官方信息，不去中高风险地区，如寒假期间需出省，请提前联系敏姐报备‼️祝大家平安过大年
1月8日-2月25日为寒假放假时间，接最新通知，学生宿舍区将于1月9号上午10点封闭，请还未离校的同学安排好个人离校车票等事宜，有特殊情况等私聊敏姐沟通
        国内疫情仍不稳定，即将迎来春运高峰期，希望大家外出留意官方信息，不去中高风险地区，如寒假期间需出省，请提前联系敏姐报备‼️祝大家平安过大年
</p>
	</body>
</html>

CSS段落样式

text-decoration:文本修饰

text-decoration: underline;下划线

text-decoration: line-through中间线

text-decoration: overline;上划线

text-decoration: none; 通常用于从链接上删除下划线

添加多个文本修改，用空格隔开

文字缩进

text-indent 属性用于指定文本第一行的缩进

1em：相对单位，1em永远跟字体大小相同

文本对齐方式

text-align

justify两段对齐 left right center

行高

line-height

默认行高：不是固定值，根据当前字体的大小在不断的变化。

字之间的间距

letter-spacing: 20px;

单词之间的间距

word-spacing: 10px;

解决英文的数字不自动折行的问题

word-break：break-all

word-wrap：break-word

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		
p{
text-decoration: line-through overline;
text-indent: 2em;
font-size: 14px;
text-align: justify;
line-height: 20px;
letter-spacing: 10px;

}
		</style>
	</head>
	<body>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与</p>
	</body>
</html>

CSS复合样式

目的：写css样式更加简单

复合写法，通过空格实现

background :gray url no-repeat ;背景图片

border: 1px solid #D2342 ;边框

CSS选择器

id是唯一的

class代表一类

元素选择器

通用选择器*：会影响页面上的每一个HTML元素

层次选择器

后代： M N M下的N都应用，M下所有的N，N下的也适用

父子： M>N 只应用M下的N，N下的不适用

兄弟： M~N 当前M下的所有兄弟标签

相邻: M+N 当前M相邻的标签

属性选择器

元素[attr]{}

=：完全匹配

*=：部分匹配

^=：起始匹配

$=: 结束匹配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		
#div1{
  width: 200px;
  height: 300px;
  background-color: blue;
}
ul > li{
  border: 1px red solid;
}
div[class=box]{
  background-color: red;
}
		</style>
	</head>
	<body>
   <div id="div1">

   </div>
  <ul>
    <li>
      <ul>
        <li>
    
        </li>
        <li></li>
      </ul>
    </li>
    <li></li>
  </ul>
  <ol>
    <li></li>
  </ol>
  <ol><li></li></ol>
   <div> 后代选择器</div>

   <div class="box">属性选择器</div>
   <div class="search">aaaaa</div>
   <div>bbbbb</div>
	</body>
</html>

伪类选择器

一般用于初始样式添加不上的时候，用伪类来添加

伪类的顺序：L V H A

一般网站只设置a 和 a:hover

:link 访问前的样式 只能给a标签
:visited 访问后的样式 只能给a标签
:hover 鼠标移入时的样式 给所有标签
:active 鼠标按下时的样式 给所有标签

:after :before 通过伪类的方式添加文本内容

针对表单元素的
:checked 被选中时触发样式
:disabled 被禁用时触发样式
:focus 鼠标聚焦时触发样式

结构伪类选择器
nth-of-type()
角标从1开始的，1表示第一项，2表示第二项。||n表示从0到无穷大，2n隔行
first-of-type() //第一个
last-of-type() //最后一个

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		div{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    div:hover{
      background: blue;
    }
    div:active{
      background: black;
    }
    a:link{
      color: black;
    }
    a:visited{
      color: blanchedalmond;
    }
    a:hover{
      color: red;
    }
    a:active{
      color: seagreen;
    }
    div:after{
  content:'zyp';color: blue;
    }

:checked{
  width: 200px;
  height: 200px;
}
:disabled{
  width: 30px;
  height: 30px;
}
:focus{
  background-color: red;
}

li:first-of-type{
 /*选择第一个*/
  background-color: red;
}
li:nth-of-type(2n+1){
 /*选择第一个*/
  background-color: blue;
}
		</style>
	</head>
	<body>
  <a href="a">这是一个链接</a>
   <div >hello</div>
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox" disabled>
   <input>


   <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>
	</body>
</html>

CSS继承

文字相关的样式子元素可以继承父元素的样式

布局相关的样式子元素不会继承父元素的样式（默认不能继承，可以设置继承属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
		div{
      width: 300px;
      height: 300px;
     background-color: yellow;
     border: 2px red solid;
     color: red;
     font-size: 30px;
    }
    p{
      border: inherit;
      width: 700px;
   
    }
		</style>
	</head>
	<body>
  <div>
    <p>这是一个段落这是一个段落这是一个段落这是一个段落</p>
  </div>
	</body>
</html>

CSS优先级

  • 相同样式优先级，后面出现的优先级更高

  • 内部样式与外部样式优先级相同，如果设置了相同的样式，后写的优先级更好

  • 单一样式优先级：

    style行间>id>class>tag>*>继承

    层次优先级根据权重相加：

    style行间 权重 1000

    id 权重 100

    class 权重 10

    tag 权重 1

！import提升优先级，非规范方式，不建议使用(不能针对继承的属性）

CSS盒子模型

组成:

content->padding->border->margin

物品 填充物 包装盒 盒子之间的边距

  1. 背景色填充到margin以内的区域,不包括margin区域
  2. 文字会在content区域添加
  3. padding不能为负数,margin可以为负数

box-sizing

盒尺寸:可以改变盒子模型的展示形态

默认值：content-box: width、height->content ，宽高只对内容生效

border-box: width、height->content、padding、border 宽高对内容，padding，border都生效

使用场景：

  • 不用再去计算一些值
  • 解决一些百分比问题。比如input输入框加了之后，不会把屏幕撑大
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
     .box{
       width: 300px;
       height: 300px;
       background-color: red; 
       border: 2px yellow solid;
       padding: 20px;
       margin: 10px;  
     }
     .box2{
       width: 200px;
       height: 200px;
       background-color: blue;
       box-sizing: border-box;
       border: 2px yellow solid;
       padding: 20px;
       margin: 10px;
     }
     input{
       width: 100%;
       padding: 30px;
       box-sizing: border-box;
     }
		</style>
	</head>
	<body>
    <div class="box">这个一个盒子</div>
    <div class="box2">box2</div>
    <input type="text">
  
	</body>
</html>

margin使用问题

margin叠加问题

当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。默认只会间隔更大的那个一个margin。这个问题，只有在上下有，左右是没有叠加问题的。

解决方案：只给一个元素添加边距。

margin传递问题

margin传递只会出现在嵌套的结构中，且只有margin-top会有传递的问题，子容器改变位置，父容器也会改变。其他三个方向是没有传递问题的。

解决方案：给父容器加边框；子容器的margin换成父容器的padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
     .box1{
       width: 200px;
       height: 200px;
       background-color: red; 
       margin-bottom: 20px;
     }
     .box2{
       width: 200px;
       height: 200px;
       background-color: blue;
      margin-top: 10px;
     }
     .parent{
      width: 200px;
       height: 200px;
       background-color: red; 
     }
     .child{
      width: 100px;
       height: 100px;
       background-color: blue;
       margin-top: 100px;
     }
		</style>
	</head>
	<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    
    <div class="parent">parent
      <div class="child">child</div>
    </div>
  
	</body>
</html>

margin自适应居中

margin: 0 auto;

margin左右自适应居中是可以的，但是上下自适应是不行的。

解决上下可以自适应居中，需要用到flex

width，weight不设置的时候，block块容器会自动计算大小

标签分类

按类型划分标签

注：布局一般用block、修饰文本一般用inline

display

使用display可以设置不同的类型

  • display:none 不占空间的隐藏

  • visibility:hidden 占空间的隐藏

块block :div、p、ul、li、h1-h5

  • 独占一行
  • 支持所有样式（宽高，margin）
  • 不写宽的时候，默认和父元素宽相同
  • 所占区域是一个矩形

行内、内联inline：span、a、em、strong、img

  • 挨在一起
  • 有些样式不支持（宽高、margin、padding某些方向不支持）
  • 不写宽的时候，宽度由内容决定
  • 所占的区域不一定是矩形
  • 内联标签之间会有空隙，由换行引起的

inline-block：input、select

  • 挨在一起
  • 支持样式（宽高、margin、padding）

按内容划分标签

Flow：流内容，网页当中能感知到的标签，大部分标签

Metadata：元内容，网页中的编码，title，style等，部分能感知

Sectioning：分区

Heading：标题

Phrasing：措辞

Embedded：嵌入的，图片，视频

Interactive：互动，输入框

标签嵌套规范

ul、li、

dl、dt、dd

table、tr、td

  • 块标签可以嵌套内联标签
  • 块标签不一定能嵌套块标签（p标签里面不能嵌套div）
  • 大部分内联标签不能嵌套块标签（a标签可以嵌套div）

溢出隐藏overflow

visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden多余内容不可见
scroll显示滚动条
auto超出了范围自动显示滚动条
inherit规定应该从父元素继承 overflow 属性的值。

透明度与手势

opacity：0（透明）~1（不透明）

0.5（半透明）

注：会占空间，所有的子内容也会透明

想要子内容不透明，采用rgba(255,0,0,0.5),最后一个参数调透明度

cursor：手势

auto(默认，根据浏览器决定)

crosshair:十字线

pointer:一只小手

move:十字箭头

自定义手势：图片要求.cur、.ico cursor:url(./cursor.ico),auto;

最大最小宽高

min-width、max-width

min-height、max-height

当我们需要让宽高小于等于或者大于等于一个值的时候，可以采用最大最小宽高来自适应

%单位换算是以父容器的大小进行换算，爷爷辈的也不算

一般想要设置容器的宽高100%，先设置html和body的

body,html{
height: 100%;
width: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <style>
       div{
           width: 100px;
           min-height: 100px;
           border: 1px red solid;
       }
       body,html{
           height: 100%;
           width: 100%;
       }
   </style>
  </head>
  <body>
 <div>
     最大最小宽高
    最大最小宽高
    最大最小宽高
    最大最小宽高
    最大最小宽高
    最大最小宽高
    最大最小宽高
    最大最小宽高
    最大最小宽高
 </div>
  </body>
</html>

CSS 默认样式

没有默认样式

div、span

有默认样式的

body->margin:8px

h1->margin: 上下 21.440px font-weight:bold

p->margin:上下 16px

ul->margin:上下 16px padding:左 40px

​ 默认点：list-style-type:disc

a->cursor:pointer text-decoration:underline

CSS重置样式

*{

margin:0;padding:0

}

对于图片而言，图片是内联样式，后面跟文字时，默认跟文字的基线对齐而不是底部对齐，可以通过vertical-align样式来设置底部对齐。或者也推荐用display把图片设置成block

写具体页面或一个布局的时候

  1. 写结构
  2. css重置样式
  3. 写具体样式

float浮动

文档流：是文档可显示对象在排列时所占用的位置。

float会脱离文档流，沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float注意事项

  • 只会影响后面的元素，浮动之前的元素不影响
  • 内容默认提升半层
  • 默认宽根据内容决定
  • 浮动元素放不下会换行排列
  • 主要给块元素添加，也可以给内联元素添加

清除float浮动

上下排列：clear：left、right、both

clear属性只会操作块标签，对内联标签不起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
 #div1{
   width: 100px;
   height: 100px;
   background-color: yellow;
opacity: 0.5;
 }

 #div2{
   width: 200px;
   height:  200px;
   background-color: rgba(255,0,0,0.5);
 float: right;
 }
 #div3{
   width: 300px;
   height:  300px;
   background-color: blue;
   clear:right
 }
 #div4{
   background-color: green
 }
 body{
   border: 1px black solid;
 }
 #box1{
   width: 200px;
   border: 1px black solid;
   clear: both;
 }
 #box2{
width: 100px;
height: 100px;
background-color: red;
float: left;
 }
 .clear:after{
content: '';
clear: both;
display: block;
 }

		</style>
	</head>
	<body>
   
 <div id="div1"></div>

 <div id="div2"></div>
 <div id="div3">内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
 <div id="div4">这是一个没有宽度的div</div>
<div>隔开</div>

 <div id="box1" class="clear">
<div id="box2">
</div>
 </div>
	</body>
</html>

position定位

static（默认） ，没有定位

relative相对定位

  • 如果没有定位偏移量，对元素本身没有任何影响
  • 不使元素脱离文档流
  • 不影响其他元素布局
  • left、top、right、bottom是相对于当前元素自身进行偏移的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
#div1{
  width: 100px;
  height: 100px;
  background-color: red;
}
#div2{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 100px;
  top: 100px;
}
#div3{
  width: 100px;
  height: 100px;
  background-color: yellow;
}

		</style>
	</head>
	<body>
   
 <div id="div1"></div>

 <div id="div2"></div>
 <div id="div3"></div>
 
</div>
 </div>
	</body>
</html>

absolute绝对定位

  • 会使元素脱离文档流
  • 使内联元素支持宽高（让内联具备块特性）
  • 使块元素默认宽根据内容决定（让块具备内联特性）
  • 在嵌套的组合中，如果父元素没有（绝对定位、相对定位、固定定位），则子元素会相对于整个文档流html进行定位。如果有，则子元素会相对于父元素定位。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
#div1{
  width: 100px;
  height: 100px;
  background-color: red;
position: absolute;
}
#div2{
  width: 200px;
  height: 200px;
  background-color: blue;
}
#div3{

  background-color: yellow;
}
span{
  width: 100px;
  height: 100px;
  background-color: red;
}
#box1{
  width: 300px;
  border: 1px red solid;
  height: 300px;
  margin: 200px;
  position: relative;
}
#box2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  right: 0;
  top: 0; 
}
body{
  border: 2px black solid;
}
		</style>
	</head>
	<body>
   
 <div id="div1"></div>

 <div id="div2"></div>
 <div id="div3">这是一个块</div>
 <span>这是一个内联</span>
<div id="box1"><div id="box2"></div></div>

</div>
 </div>
	</body>
</html>

fixed固定定位

  • 使元素完全脱离文档流
  • 使内联元素支持宽高（内联具备块特性）
  • 使块元素默认宽根据内容决定（让块具备内联特性）
  • 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
#div1{
  width: 100px;
  height: 100px;
  background-color: red;
  position: fixed;
  right: 0;
}


#div2{
  width: 300px;
  height: 200px;
  background-color: blue;

}
body{
  border: 2px black solid;
  height: 2000px;
}
		</style>
	</head>
	<body>
   
 <div id="div1">这是一个块            
  <div id="div2"></div></div>
	</body>
</html>

sticky粘性定位

在指定的位置，进行粘性操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">

body{
  border: 2px black solid;
  height: 2000px;
}
div{
  background-color: red;
  position: sticky;
  top: 10%;
}
		</style>
	</head>
	<body>
   <p>aaaaaaaa</p>
   <p>aaaaaaaa</p>  <p>aaaaaaaa</p>  <p>aaaaaaaa</p>
   <div>this is a block</div>
   <p>aaaaaaaa</p>
   <p>aaaaaaaa</p>  <p>aaaaaaaa</p>  <p>aaaaaaaa</p>
	</body>
</html>

z-index定位层级

  • 默认层级为0
  • 层级更大的优先展示
  • 如果两个元素层级相同，优先展示后一个元素
  • 如果出现嵌套的，比如div和嵌套的parent，child。div先和parent比较，再和child比较
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">

body{
  border: 2px black solid;
  height: 2000px;
}
#box1{
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  z-index: 1;
 
}

.parent{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 25px;
  top: 25px;

}
.child{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 2;
}
		</style>
	</head>
	<body>
  <div id="box1"></div>


  <div class="parent">
    <div class="child"></div>
  </div>
	</body>
</html>

定位的下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
#menu{
  width: 100px;
  height: 30px;
  margin: 20px auto;
  border: 1px black solid;
  position: relative;
}
#menu ul{
  width: 100px;
  border: 1px black solid;
  position: absolute;
  left: 0;
  top: 30px;
  background-color: white;
display: none;
}
#menu:hover ul{
display: block;
}
#menu ul li:hover{
  background-color: cadetblue;
}
p{
  text-align: center;
}

		</style>
	</head>
	<body>
 <div id="menu" >
   卖家中心
   <ul><li>列</li>
    <li>列</li>
    <li>列</li>
    <li>列</li></ul>
 </div>
 <p>
   测试段落  测试段落  测试段落  测试段落  测试段落                                                                                
 </p>
	</body>
</html>

定位实现居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
*{
  margin: 0;
  padding: 0;
}

#box1{
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px black solid;
}

#box2{
  width: 100px;
  height: 100px;
 position: absolute;
 background-color: red;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

}
		</style>
	</head>
	<body>
<div id="box1">
  <div id="box2"></div>
</div>
	</body>
</html>

CSS单行添加省略号

width：必须要有一个固定的宽

white-space：nowrap 不让内容折行

overflow：hidden 隐藏溢出的内容

text-overflow：ellipsis

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
#content{
width: 200px;
border: 1px black solid;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

		</style>
	</head>
	<body>
<div id="content">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
	</body>
</html>

CSS SPrite

是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

好处：

可以减少图片的质量，网页的图片加载速度快

减少图片的请求的次数，加快网页的打开

CSS 圆角

border-radius: 20px;

border-radius: 20px 40px; 左上，右下 和右上左下

border-radius: 10px 20px 30px 40px ；左上 右上 右下 左下

border-radius: 10px /20px x轴半径、y轴半径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    
		<style type="text/css">
*{
  margin: 0;
  padding: 0;
}

#box{
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 100px 100px 0 0
}
		</style>
	</head>
	<body>
<div id="box"></div>
	</body>
</html>

CSS3新增2D和3D属性

定位盒子位置居中

transform:translate(100px) //向右移动100px

如果是百分比% 盒子是移动自身元素的位置，不是相对父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   div{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* 
right: 50%; 需要计算 
margin-right: -100px; */
/* transform: translate(50%);  */
/* 自己div宽度的一半 */
   }
 </style>
	</head>
	<body>
<div></div>
	</body>
</html>

设置变形中心点

根据给定角度顺时针或逆时针旋转元素

顺时针旋转20度

transform:rotate(20deg)

逆时针旋转20度

transform:rotate(-20deg)

设置旋转点 默认中心点，左下角转

transform-origin: bottom left;

也可以设置像素转

0.6秒后渐变移动

transition: all 0.6s;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
img{
  margin: 200px;
  transition: all 0.6s;
  transform-origin: 20px 30px;
}
img:hover{
  transform: rotate(360deg);
}
 </style>
	</head>
	<body>
<img src="1.jpg" width="200" alt="">
	</body>
</html>

旋转的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
div{
  width: 200px;
  height: 170px;
  border: 1px solid pink;
  margin: 200px auto;
  position: relative;
}
div:hover img:nth-child(1){
  transform: rotate(60deg);
}
div:hover img:nth-child(2){
  transform: rotate(160deg);
}
div:hover img:nth-child(3){
  transform: rotate(180deg);
}
div:hover img:nth-child(4){
  transform: rotate(240deg);
}
div:hover img:nth-child(5){
  transform: rotate(300deg);
}
div:hover img:nth-child(6){
  transform: rotate(360deg);
}
div img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.6s;
  transform-origin: top right;
}
 </style>
	</head>
	<body>
<div>
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  <img src="4.jpg" alt="">
  <img src="5.jpg" alt="">
  <img src="6.jpg" alt="">
</div>
	</body>
</html>

左手法则

在这里插入图片描述

绕着x、y、z轴旋转

  • rotateX()
  • rotateY()
  • rotateZ()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
div{
  width: 200px;
  height: 170px;
  border: 1px solid pink;
  margin: 200px auto;
}

div img{
  width: 100%;
  height: 100%;
  transition: all 5s;
 

}
img:hover{
  transform: rotateZ(360deg);
}
 </style>
	</head>
	<body>
<div>
  <img src="1.jpg" alt="">
 
</div>
	</body>
</html>

透视

原理：近大远小

在这里插入图片描述

perspective: 500px; //视距d 近大远小 ，perspective的值越小，立体效果越明显。为0，恢复2d

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   body{
    perspective: 500px;
   }
div{
  width: 200px;
  height: 170px;
  border: 1px solid pink;
  margin: 200px auto;

}
div img{
  width: 100%;
  height: 100%;
  transition: all 3s;
}
img:hover{
  transform: rotateY(360deg);
}
 </style>
	</head>
	<body>
<div>
  <img src="2.jpg" alt="">
 
</div>
	</body>
</html>

translate3d

transform:translate3d(x,y,z) //x和y可以是px可以是% ，z只能是px

transform-style

属性：flat（默认值），表示所有子元素在2D平面呈现

preserve-3d表示所有子元素在3D空间中呈现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
div{
  width: 100px;
  height: 145px;
  border: 5px solid red;
  margin: 100px auto;
  transform: rotateY(30deg);
  transform-style: preserve-3d;
}
div img{
  width: 100%;
  transform: rotateY(30deg);
}

 </style>
	</head>
	<body>
<div >
  <img src="./1.jpg"/>
</div>
	</body>
</html>

例子：旋转轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   body{
     perspective: 1000px;
   }
section{
  width: 300px;
  height: 200px;
  margin: 100px auto;
  background: url(./1.jpg) no-repeat;
  background-size: cover;
  position: relative;
  transform-style: preserve-3d;
  transition: all 5s linear;
}
section:hover{
  transform:rotateY(360deg)
}
section div{
  width: 100%;
  height: 100%;
  background:url(./3.jpg) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
section div:nth-child(1){
  transform: rotateY(0deg) translateZ(400px);

}
section div:nth-child(2){
  transform: rotateY(60deg) translateZ(400px);
}
section div:nth-child(3){
  transform: rotateY(120deg) translateZ(400px);

}
section div:nth-child(4){
  transform: rotateY(180deg) translateZ(400px);
}
section div:nth-child(5){
  transform: rotateY(240deg) translateZ(400px);

}
section div:nth-child(6){
  transform: rotateY(300deg) translateZ(400px);
}

 </style>
	</head>
	<body>
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
	</body>
</html>

例子：开门大吉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   section{
     width: 450px;
     height: 300px;
     border: 1px solid pink;
     margin: 100px auto;
     background:url(./3.jpg) no-repeat;
     position: relative;
     perspective: 1000px;
   }
   .door-l, .door-r{
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: red;
  transition: all 4s;
   }
   .door-l{
 left: 0;
 border-right: 1px solid pink;
 transform-origin: left;
   }
   .door-l::before{
     content: "";
     position: absolute;
     right: 5px;
     top: 50%;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 1px solid blue;
     transform: translateY(-50%);/*走自己高度的一半*/
   }
   .door-r::before{
     content: "";
     position: absolute;
     left: 5px;
     top: 50%;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 1px solid blue;
     transform: translateY(-50%);/*走自己高度的一半*/
   }
   .door-r{
 right: 0;
 border-left: 1px solid pink;
 transform-origin: right;
   }
   section:hover .door-l{
     transform: rotateY(-180deg)
   }
   section:hover .door-r{
     transform: rotateY(180deg)
   }
 </style>
	</head>
	<body>
<section>
  <div class="door-l"></div>
  <div class="door-r"></div>
</section>
	</body>
</html>

例子：翻转的图片

backface-visibility: hidden;/不是正面对象屏幕，就隐藏/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   div{
     width: 200px;
     height: 200px;
     margin: 100px auto;
     position: relative;
   }
   div img{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition: all 1s;
   }
   div img:first-child{
     backface-visibility: hidden;/*不是正面对象屏幕，就隐藏*/
     z-index: 1;
   }
   div:hover img{
     transform: rotateY(180deg);
   }
 </style>
	</head>
	<body>
<div>
  <img src="./1.jpg" alt="">
  <img src="./2.jpg" alt="">
</div>
	</body>
</html>

CSS 动画定义

在这里插入图片描述

定义动画

@keyframes mymove //定义动画名称 mymove
{
from {top:0px;}
to {top:200px;}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   div{
     width: 200px;
     height: 200px;
     margin: 100px auto;
     background-color: pink;
     animation: go 2s ease 0s 2 
   }
 @keyframes go{
   form{
     transform: translateX(0)
   }
   to{
     transform: translateX(600px)
   }
 }
   
 </style>
	</head>
	<body>
<div>

</div>
	</body>
</html>

例子：动画转圈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
   div{
     width: 200px;
     height: 200px;
     margin: 100px auto;
     background-color: pink;
     animation: go 2s ease 0s 2 
   }
 @keyframes go{
   0%{
     transform: translate3d(0,0,0);
   }
   25%{
     transform: translate3d(400px,0,0);
   }
   50%{
     transform: translate3d(400px,400px,0);
   }
   75%{
     transform: translate3d(0,400px,0);
   }
   100%{
     transform: translate3d(0,0,0);
   }
 }
   
 </style>
	</head>
	<body>
<div>

</div>
	</body>
</html>

伸缩布局Flex(CSS3)

使用方式

display:flex

flex:1 flex:2

如果子容器有固定的像素，则会在父容器减去固定的像素，再分割flex

在这里插入图片描述

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
  section{
    width: 1000px;
    height: 500px;
    margin: 100px auto;
    display: flex;
    border: 1px red solid;
    min-width: 400px;
    flex-direction: column-reverse;
  }
  section div:nth-child(1){
    background-color: red;
    flex: 150px;
  }
  section div:nth-child(2){
    background-color: blue;
    flex: 2;
  }
   
  section div:nth-child(3){
    background-color: yellow;
    flex: 3;
  }
 </style>
	</head>
	<body>
<section>
  <div></div>
  <div></div>
  <div></div>
</section>
	</body>
</html>

最大最小值

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

flex-direction调整主轴方向

flex-direction: column 垂直排列

column-reverse 垂直翻转

flex-direction: row 水平排列

row-reverse 水平翻转

vertical-align

vertical-align这个是设置元素的垂直排列的
用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
它的值比较多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

justify-content

子盒子如何在父盒子里面水平对齐

值描述白话文
flex-start默认值。项目位于容器的开头。让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end项目位于容器的结尾。让子元素从父容器的后面开始排序但是盒子顺序不变
center项目位于容器的中心。让子元素在父容器中间显示
space-between项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
space-around项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距

align-items

子盒子如何在父盒子里面垂直对齐（单行）

值描述白话文
stretch默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center项目位于容器的中心。垂直居中
flex-start项目位于容器的开头。垂直对齐开始位置 上对齐
flex-end项目位于容器的结尾。垂直对齐结束位置 底对齐

flex-wrap

flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

值描述
nowrap默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex-flow

flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;

flex-direction: row + flex-wrap: wrap=flex-flow:row wrap

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   这两句话等价于下面的这句话*/
flex-flow: column wrap;  /* 两者的综合 */

align-content

align-content针对多行的情况,

align-items是针对一行的情况

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

值描述测试
stretch默认值。项目被拉伸以适应容器。
center项目位于容器的中心。
flex-start项目位于容器的开头。
flex-end项目位于容器的结尾。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。

order

默认值是0，数字越小，越往前

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

order: 1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
  section{
    width: 1000px;
    height: 1000px;
    margin: 100px auto;
    display: flex;
    border: 1px red solid;
    min-width: 400px;
    justify-content: space-between;
    align-content: center;
    flex-flow: row wrap;
    /* flex-direction: column-reverse; */
  }
  section div{
    width: 250px;
    height: 250px;
  }

  section div:nth-child(1){
    background-color: red;
   
  }
  section div:nth-child(2){
    background-color: blue;
   
  }
   
  section div:nth-child(3){
    background-color: rgb(110, 110, 40);
  
  }
  section div:nth-child(4){
    background-color: red;
   
  }
  section div:nth-child(5){
    background-color: blue;
   
  }
   
  section div:nth-child(6){
    background-color: yellow;
    order: -1;
  
  }
 </style>
	</head>
	<body>
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
	</body>
</html>

BFC

BFC就是独立的，隔离的区域，脱离文档流的容器

如何产生BFC

同样，要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

  1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
  2. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的主要用途

BFC能用来做什么？

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
 .father{
  width: 300px;
  border: 1px solid red;
  overflow: auto;
 }
 .son1{
   width: 100px;
   height: 100px;
   background-color: red;
   float: left;
 }
 .son2{
   width: 100px;
   height: 100px;
   background-color: blue;
   float: left;
 }
 </style>
	</head>
	<body>
<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>
	</body>
</html>

(2) 解决外边距合并问题

外边距合并的问题。
主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
 .father{
  width: 300px;
  border: 1px solid red;
  height: 300px;
 
 }
 .son1{
   width: 100px;
   height: 100px;
   background-color: red;

   margin-bottom: 50px;
 }
 .son2{
   width: 100px;
   height: 100px;
   background-color: blue;

   margin-top: 100px;
 }
 .over{
   overflow: hidden;
 }
 </style>
	</head>
	<body>
<div class="father">
<div class="over">
  <div class="son1"></div>
</div>
  <div class="son2"></div>
</div>
	</body>
</html>

(3) 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 <style>
 .father{
  width: 300px;
  border: 1px solid red;
  height: 300px;
 
 }
 .box{
   width: 100px;
   height: 100px;
   background-color: red;
   float: left;
 }
 .txt{
   height: 300px;
   width: 100px;
   background-color: chartreuse;
   overflow: hidden;
 }
 </style>
	</head>
	<body>
<div class="father">
  <div class="box"></div>
  <div class="txt"></div>
</div>
	</body>
</html>

优雅降级和渐进增强

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

先针对低版本浏览器，再兼容高级版本浏览器

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

先针对高版本浏览器，再兼容低版本浏览器

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

浏览器前缀

浏览器前缀浏览器
-webkit-Google Chrome, Safari, Android Browser
-moz-Firefox
-o-Opera
-ms-Internet Explorer, Edge
-khtml-Konqueror

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

线性渐变

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

网址是：  http://www.cssstats.com/

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

http://tool.chinaz.com/Tools/CssFormat.aspx

朱雨鹏
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-youtube-embed：Vue.js和YouTube
02-06
Vue YouTube嵌入 这是Vue.js的组件，可轻松利用YouTube iframe API。 这是基于 执照 麻省理工学院执照 安装 < script src =" vue-youtube-embed.umd.js " > </ script > < script > Vue . use ( VueYouTubeEmbed ) </ script > 要么 // NPM npm i -S vue-youtube-embed // or with Yarn yarn add vue-youtube-embed import Vue from 'vue' import VueYouTu
html5-embed标签的使用
m0_63607954的博客
02-27 3734
html5-embed标签的使用
vue-tweet-embed：在您的vue.js应用程序中嵌入tweets
02-06
Vue推特嵌入 在您的vue.js应用中嵌入推文。 受启发 安装 npm install vue-tweet-embed 支持的组件 目前，Twitter的小部件API仅支持Tweet和Moment组件。 可以通过以下语句导入组件： import { Tweet , Moment , Timeline } from 'vue-tweet-embed' 或单独 import Tweet from 'vue-tweet-embed/tweet' import Moment from 'vue-tweet-embed/moment' import Timeline from 'vue-tweet
HTML-embed标签详解
acooly
03-30 1029
Embed （一）、基本语法： embed src=url 说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，       Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 示例：&lt;embed src="your.mid"&gt; （二）、属性设置： 1、自动播放： 语法：autostart=tr...
go embed 实现gin + vue静态资源嵌入
禹鼎侯的博客
05-25 3751
golang1.16出来以后，早就有打算把项目的前端代码打包更换成embed。在此之前，使用的是进行的打包。但是今天打包时却报了个错：而且通过各种手段尝试均无果之后，果断把决定立即将其更换为embed进行资源嵌入管理。但是在折腾的时候，其实也是遇到了不少的坑，在这里总结一下。关于embed，具体的功能这里就不多做介绍了，网上有一堆资料，但是这些资料并不能解决我的问题，我翻阅了无数的网页，也没有找到一个能确切解决我的问题的方案。因此决定自己记录一下。
HTML5笔记.docx
07-08
HTML5是Web开发领域的一个重大革新，它是超文本标记语言（HTML）的第五个主要版本，旨在提高标准的适应性和增强网页在不同设备上的表现，特别是移动设备。2014年10月，万维网联盟（W3C）正式完成了HTML5标准的制定。...
h5前端学习笔记
03-21
【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本，它引入了许多新的元素、API和特性，极大地增强了网页的交互性、可访问性和可用性。 【描述...
web前端HTML5学习笔记
09-07
前端笔记HTML5部分
HTML前端笔记html.md
最新发布
04-10
HTML前端笔记html.md
前端笔记html和css
04-22
前端笔记html和css
1-ajax操作的基本步骤(2)
2401_84091321的博客
04-06 335
2.1创建对象2.2 初始化2.3 发送2.4 对响应得到的结果进行处理****点击发送请求***、
vue-golang-embed-实现前后端不分离部署
aaliliaa的博客
09-25 688
vue golang embed实现前后端不分离部署
vue中实现pdf文件预览的方法
魏知非的博客
10-24 9224
第一种就是直接用window.open方法打开后台返回的pdf预览地址 第二种就是将pdf预览的地址放在<embed>标签中： 效果如下 代码如下 <p slot="header">预览PDF质保书</p> <div> <embed :src="embedSrc" ...
在jsp中利用HTML5的<embed>标签嵌入简单的音频播放器时,如何动态指定src的值？
ruyi574812039的专栏
01-08 968
HTML5 规定了一种通过 标签来包含音频的标准方法，标签能够播放声音文件或者音频流。由于ie8不支持(ie9可支持),工作中涉及的项目需要的浏览器不能高于ie8且只能是ie浏览器。所以完全不考虑标签。 以下是在ie8下测试的结果： 考虑用 ， 嵌入到jsp页面后，src可以是本地音频文件的绝对路径，重新加载jsp页面后显示出播放器的样式，没有任务问题可以播放，但是如果把src置空，在...
[vue] 使用 embed 标签实现在线查看PDF
qq_14993591的博客
11-08 2301
配置 src - toolbar、navpanes、scrollbar 用于设置操作状态栏是否显示。设置 标签的 type=“application/pdf”
html5 embed居中,HTML5标签embed详解
weixin_35991223的博客
06-16 905
摘要： 而EMBED适用于windows和Macintosh平台下的NetscapeNavigator浏览器以及Macintosh平台下的IE浏览器。 windows平台的IE利用Activex控件来播放flash，而其它的浏览器则使用Netscape插件技术来播放flash。 Oject object classid ="clsid:d27cdb6e-ae6d-11摘要：而EMBED适用于win...
css零到一基础教程007：CSS RGB 颜色
kerryqpw的博客
03-18 856
RGB 值 在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值： rgb(red, green, blue) 每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。 例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。 要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。 要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。 实例： &
C1任务03 Web的世界（上）
王景行的个人博客
05-20 402
任务一 1、⾸先，在开源富⽂本编辑器中随便输⼊⼀段⽂本 例如我输入“玫瑰花”三个字，如下 2、然后，在源码模式下，查看内容是如何被转变为带标签的⽂本的，都带了哪些HTML标签 在源码模式下，玫瑰花带有了<p>标签，可以看到标签是以<p>开始、</p>结束的 3、最后，实现编辑器没有的功能，例如让表格隔⾏换⾊，加⼊JavaScript按钮，试着完成它吧 第一步我们首先要添加一个表格 第二步，我们转到源码形式 可以看到源码形式下的表格标签代码全在.
CSS教程
陌然的博客
06-03 639
CSS教程通过使用 CSS 我们可以大大提升网页开发的工作效率！CSS 实例body{ background-color:#d0e4fe;}h1{ color:oran...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值