04_CSS与HTML5前端学习

第四次网课

1.相对定位

1.如何设置：
position: relative; 即可设置定位
可用top,bottom,left,right
2.参考点：
相对于原来位置的左移
3.相对定位的特点：
不会脱离文档流，元素位置的变化，只是视觉效果，不会对其他元素产生影响。
4. 定位元素显示层级比普通元素高

默认规则：定位的元素会盖在普通元素之上
都发生定位的两个元素，后写的会盖在先写的元素上

5.left与right不能同时写，否则right会失效，top和bottom也是如此
6.相对定位的元素也能浮动，但不推荐
7.相对定位的元素也能通过margin调整，但不推荐

绝大多数情况下，相对定位会与绝对定位配合使用

<style>
        .outer {
            width: 500px;
            background-color: skyblue;
            border:1px solid blacck;
            padding: 20px;
        }
        .box {
            width:200px;
            height: 200px;
        }
        .box1 {
            background-color:#888;
        }
        .box2 {
            background-color: orange;
            position: relative;
            /*相对于原来位置的左移，可以超出自己的父容器，left与right不能同时写，否则right会失效*/
            left: 100px;

        }
        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
    
</body>

2.绝对定位（子绝父相）

1.如何设置绝对定位：

给元素设置positive:absolute;即可实现绝对定位
可以使用left,right,top,bottom四个属性调整位置
2.绝对定位的参考点：
参考他的包含块

包含块的含义：
1.对于没有脱离文档流的元素，包含块就是父元素
2.对于脱离文档流的元素，包含块第一个属性的先祖（如果所有的先祖都没设置，那包含块就是整个页面）

3.绝对定位的特点：

脱离文档流会对后面的兄弟元素，父元素有影响。
left和right不能一起设置，top和bottom也不能
设置position:absolute;后必须写left才能写margin-left(其他方位也一样）
绝对定位和浮动不能同时设置，若同时设置，则浮动失效，以定位为主
绝对定位的元素也能通过margin调整位置，但不推荐
无论是什么元素（行内，行内块，块级）设置为绝对定位后，都变成了定位元素

何为定位元素：默认宽高都被内容撑开，且能自由设置宽度

position:absolute;

应用场景
请添加图片描述

3.固定定位

1.如何设置固定定位：

给元素设置positive:fixed;
可以使用left,right,top,bottom四个属性调整位置
2.绝对定位的参考点：
参考他的视口（就是不论页面划到多下面，PC端的固定定位永远在左上角）
3.固定定位的特点：
脱离文档流，会对后面的兄弟元素，父元素有影响。
left和right不能一起设置，top和bottom也不能
设置position:fixed;后必须写left才能写margin-left(其他方位也一样）
固定定位和浮动不能同时设置，若同时设置，则浮动失效，以定位为主
固定定位的元素也能通过margin调整位置，但不推荐
无论是什么元素（行内，行内块，块级）设置为固定定位后，都变成了定位元素

4.粘性定位（position: sticky;）

参考点：
离他最近额拥有滚动机制的祖先元素，即使是使用overflow:auto（scroll)实现的（一般实现在body身上
特点

粘性定位和浮动能同时设置，但不推荐
常用top：0；
不脱离文档流，是专门用于窗口滚动时新的定位方式
粘性定位的元素也能通过margin调整位置，但不推荐

如果是 overflow:scroll就废了

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .page-header {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: orange;
            font-size: 20px;
        }
        .item {
            background-color: gray;
        }
        .first {
            background-color: blue;
            font-size: 40px;
            position: sticky;
            top: 0;
        }
        body {
            height: 2000px;
        }
    </style>
</head>
<body>
    <!--头部 -->
    <div class="page-header">头部</div>
    <!--内容区-->
    <div class="content">
        <!--每一项-->
        <div class="item">
            <div class="first">A</div>
            <h2>A1</h2>
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
            <h2>A6</h2>
            <h2>A7</h2>
            <h2>A8</h2>
        </div>
        <div class="item">
            <div class="first">B</div>
            <h2>B1</h2>
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
            <h2>B6</h2>
            <h2>B7</h2>
            <h2>B8</h2>
        </div>
        <div class="item">
            <div class="first">C</div>
            <h2>C1</h2>
            <h2>C2</h2>
            <h2>C3</h2>
            <h2>C4</h2>
            <h2>C5</h2>
            <h2>C6</h2>
            <h2>C7</h2>
            <h2>C8</h2>
        </div>
    </div>
</body>

5.定位的层级

只有定位了，才能谈x-index（无单位）
x-index越大，其所定位的元素越在最上面
子元素会受到父元素的x-index的影响（被包含块拖累了）

6.定位的特殊应用

1. 绝对定位可以越过padding
2. 定位的特殊应用（只针对绝对定位和固定定位）
让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置left与right为0
高度想与包含块一致，top和bottom设置为0

让定位元素在包含块中居中
方案一：
请添加图片描述

该定位的元素比需设置

7.布局

1.版心container

版新的宽度一般是960-1200之间
可以是一个，也可以是多个

2.常用类名

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

3. 重置默认样式

很多元素的默认样式，例如：
1.p元素有默认的上下margin

h1~h6也有上下margin,且字体加粗
body有默认的8px外边框
超链接有默认的文字颜色和下划线
ul颜色有默认的左padding
方案一：使用全局选择器
在简单案例中可以用，实际开发中不会用

 - {
	margin:0;
	padding:0;
	······
	}

方案二：reset.css（开发用的更多）
选择到具有默认样式的样式，清空其默认样式（就像一张白纸了）
方案三：Normalize.css（更温和）
是最新方案，清空一些默认样式，保留了一些有价值的默认样式，
新增了HTML5元素的设置，
对并集选择器比较谨慎，有效避免调试工具杂乱

8.尚品会顶部导航条

因为空格也被当成文字处理，先用ftsize=0消除，重新设置时便只针对真正的字体
左右不会产生外边距合并，上下才会合并margin

9.HTML5新增语义化标签

1.新增布局标签（均为双标签）

header :整个页面，或者部分区域的头部
footer :整个页面，或者部分区域的底部
nav :导航（不论是竖着的还是横着的）
artical :文章，帖子，杂志，新闻，博客，评论等
section :页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）
aside:侧边栏

关于artical和section:

artical里面可以有多个section
section强调的是分段或分块，如果你想将一块内容分成几段的时候可以用section
artical比section更强调独立性，一块内容如果比较独立，比较完整，应使用artical

2.新增状态标签

meter（有计量器的意思）电量，磁盘用量
high:高值
low:低值
max:最大值
min:最小值
optimum:最优值（加上了之后就有三种颜色）
value:当前值
progress任务完成进度的指示器
max:规定目标值
value:规定当前值

3.新增列表标签

datalist：用于搜索框的关键提示

<input type="text" list="mydate">
<datelist id="mydate">
	<option value="周杰伦">周杰伦</option>
	<option value="周冬雨">周冬雨</option>
	<option value="马冬梅">马冬梅</option>
	<option value="温烑伦">温烑伦</option>
</datelist>

呈现效果：
请添加图片描述
details:用于展示问题和答案
summary:写在details里，用于指定问题或专有名词

<details>
		<summary>如何走上人生巅峰</summary>
		<p>一步</p>
</details>

呈现效果：
请添加图片描述

4.新增文本标签

文本注音
ruby:包裹需要注音的文字
rt:写注音，rt写在ruby里面

<ruby>
	<span>你好</span>
	<rt>ni hao </rt>
</ruby>

文本标记
mark:标记（双标签）
请添加图片描述

5.新增表单控件属性

placeholder(已知）
required:必填选项（只有按钮不能用）
autofocus:打开页面后制动聚焦（一般写在第一个后面）
autocomplete:自动完成(on或off,即留下历史记录，密码输入框和多行输入框不能用)
patern:正则表达式，**与require配合 **，多行输入不可用，如：\w{6} （数字，字母，下划线）

shift加tab是往后缩进
正则表达式：验证字符串是否合法（数字，字母，下划线）

原表单：
请添加图片描述
新表单：

6. input新增的type属性值

date也能设置设置max和min来限制选择日期范围
input新增属性值

Email:提交时需要为邮件形式
url:提交时需要为网址形式
number:数字类型的输入框
search:搜索类型的输入框
tel:电话类型的输入框，手机端会有数字键盘
range:范围选择框
color:颜色选择框，默认值为黑色
date:日期选择框
month:月份的输入框
week:周选择框
time：时间选择框
datetime-local:时间加日期选择框
form新增属性值
novalidate:如果设置了该标签，表单提交时不再进行验证

7. 新增视频标签

用来定义视频，是双标签
属性

src width height (要加=“”）
controls :显示视频控件，如播放键，直接写
autoplay:视频自动播放（必须处于静音时才能让视频自动播放）直接写
muted：视频静音直接写
loop:循环播放直接写
poster：视频封面
preload:(none /auto /metadata分别为不预加载/预加载一部分/预加载全部)

8.新增音频标签

音乐比视频少了三个属性：封面属性；宽；高
呈现效果：
请添加图片描述

9.新增全局属性

contenteditable:表示该元素是否可以编辑（true false)
draggble:拖拽（true false)
hidden:隐藏元素（没太大用）
spellcheck:检查拼写错误（没太大用）
contextmenu:右键菜单栏可以自定义
data-*:用于储存页面的私有定制设置

10.兼容性处理

如果是IE8浏览器，可以写

<!--[If It ie 9]>
<script src=".html5shiv.js"></script>
<![endif]-->

请添加图片描述

10.CSS3新增

1.新增长度单位

rem根元素字体大小的倍数，只与根元素字体大小有关
10vw:视口宽度的百分之10 移动端经常用
10vh:视口高度的百分之10 移动端经常用
vmax视口宽高中大的那个百分之多少（了解即可）
vmin视口宽高中小的那个百分之多少（了解即可）

2.新增盒子模型

box-sizing:border-box: 压缩主义 (画页面加边框就不需要去手动去减少内容区的宽高)
box-sizing:content-box:默认值
resize:调整盒子大小！！！！必须跟overflow配合起来（none不允许，vertical垂直的，horizontal水平的，both水平加垂直）
box-shadow:vertical: 垂直阴影(必填）10px
box-shadow:horizontal:水平阴影(必填）10px
blur:模糊阴影20px
blue:阴影颜色（直接写颜色）red
inset:可将外部阴影改成内部阴影 inset

水平位置，垂直位置正数时右下边阴影，给负值是左上角阴影

opacity:不透明度，是一种属性，值为0-1

3.新增背景属性

background-origin:作用：设置背景图的原点
padding-box:从padding区域开始显示背景图像（默认值
border-box:从border区域开始显示背景图像
content-box:从content区域开始显示背景图像
background-clip:作用：设置背景图的向外裁剪的区域
border-box:从border区域开始向外裁剪背景
padding-box:从padding区域开始向外裁剪背景
content-box:从content区域开始向外裁剪背景
text:背景图只呈现在文字上

背景只呈现在有文字的身上
text必须配合字体透明才能用

请添加图片描述

background-size:作用：设置背景图的尺寸
用长度值指定背景图片大小，不允许负值

background-size:300px 200px;

用百分比指定背景图片大小，不允许负值

background-size: 100% 100%;

auto:背景图片的真实大小。–默认值
contain:将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片

background-size: contain;

cover:将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—相对比较好的选择

background-size:cover;

通过background-position调整位置，然后再设置background-size为contain即可显示图片中间部分

background复合属性

background:color url repeat position / size origin clip;

注意

origin和clip的值如果一样，如果只写一个值，则origin和clip都设置；如果设置了两个值，前面的是origin,后面的是clip.
size的值必须写在position后面，并且用 / 分开

多背景图：CSS3允许元素设置多个背景图片

background:url(../image/bg-It.png) no-repeat;
					url(../image/bg-rt.png) no-repeat right top;
					url(../image/bg-Ib.png) no-repeat left bottom;
					url(../image/bg-rb.png) no-repeat right bottom;

4.新增边框属性

border-radius:是盒子变为圆角（一起设置四个角）

border-top-left-radius:设置左上角圆半径，一个值是正圆，两个值一个是椭圆x半径，一个是椭圆y半径**（以此类推其他三个角）**

边框外轮廓（了解）

outline-width:外轮廓的宽度
outline-color:外轮廓的颜色
outline-style:外轮廓的风格
outline-offset:设置外轮廓与边框的距离，正负都可以设

注意：
outline-offset不是outline的子属性，是一个独立属性

outline复合属性：

outline：50px solid blue;

文本换行
用white-space属性设置文本换行方式
常用值：

normal:文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值）
pre:原样输出
pre-wrap:在pre的效果上，超出元素边界自动换行
pre-line:在pre的效果上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap:强制不换行

文本阴影
用text-shadow给文本加阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow:必写，水平阴影的位置，可负值
v-shadow：必写，垂直阴影的位置，可负值
blur：可选，模糊的距离
color：可选，阴影的颜色
默认值： text-shadow:none表示没有阴影
文本阴影不等于文本描边

文本溢出
用text-overflow:设置文本内容溢出时呈现的模式
clip:将溢出部分剪掉（默认值）
ellipsis:将溢出部分替换为···

注意：想使该属性生效，块容器必须显示定义overflow为非visible值，white-space为nowrap值。

文本修饰
复合属性：text-decoration

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

text-decoration-line:设置文本装饰线
none:无文字装饰（默认）
underline:下划线
overline:上划线
line-through:贯穿线（删除线）
text-decoration-style:文本装饰线条的形状
solid:实线（默认）
double:双线
dotted:点线
dashed:虚线
wavy:波浪线
text-decoration-color：颜色
在这里插入图片描述

文本描边
text-stroke-width:文本描边的宽度，写长度值
text-stroke-color:文本描边的颜色
text-stroke:复合属性，宽度加颜色

5.渐变

1.线性渐变

<title>线性渐变</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            float: left;
            font-size: 20px;
            margin: 50px;
            overflow: hidden;
        }
        .box1 {
            background-image: linear-gradient(red,yellow,green);
        }
        .box2 {
            background-image: linear-gradient(to right top,red,yellow,green);
        }
        .box3 {
            background-image:linear-gradient(20deg,red,yellow,green);
        }
        .box4 {
            background-image: linear-gradient(red,yellow,green 150px);
        }
        .box5 {
            background-image: linear-gradient(20deg,red,yellow,green 150px);
            font-size: 80px;
            text-align: center;
            line-height: 200px;
            font-weight: bold;
            color: transparent;
            background-clip: text;   /* 让背景只能在文字的轮廓范围内显示 */
        }
    </style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
</body>

2.径向渐变

现在打不出径向渐变了
在这里插入图片描述

3.重复渐变

重复渐变：在没有发生过渐变的区域，重新开始渐变，就是重复渐变
重复渐变一定要建立在线性渐变和径向渐变基础上
background-clip: content-box;的效果是让背景只显示在内容区内
**背景填充，默认在padding区域开始出现 **

4.，渐变小案例

<title>渐变小案例</title>
    <style>
        .box1 {
            height:600px;
            width: 800px;
            padding: 20px;
            border: 1px solid black;
            margin: 0 auto;(居中）
            background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);
            background-clip: content-box;（让背景只显示在内容区内)
        }
        .box2 {
            height: 100px;
            width: 100px;
            background-color: gray;
            border-radius: 50%;
            background-image: radial-gradient(at 50px 50px,white,#333);
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

快捷键 Alt+Shift+F 快速整理代码缩进

5.web字体，字体图标

web字体
请添加图片描述
字体图标
轮播图比图片更清晰
灵活性好，方便调大小，颜色，风格
兼容性也好