HTML_CSS_盒模型_浮动与定位
2023-11-12 本文已影响0人
tzktzk1
前端开发主要技术
HTML5:搭建网页结构的语言，增加了很多移动端的支持
CSS3: 样式表，美化网页的语言，增加了很多动画、过度等新特性，要记的英语单词也非常多
JavaScript:前端开发工程师最重要的"看家语言"
Vue.js:流行的前端框架
开发流程1：
美工制图 --> 搭建页面主体HTML --> 页面元素排版CSS --> 页面元素交互开发JS --> 前后端整合对接
开发流程2：
需求分析 --> 选择模板 --> 基于模板修改(HTML/CSS/JS) --> 前后端整合对接
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html测试页面</title>
</head>
<body>
<h2>什么是表格</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>B4</th>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<h2>表格的列跨度案例</h2>
<table border="1" cellspacing="0">
<tr>
<td colspan="2">A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<th>B1</th>
<th colspan="3">B2</th>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<h2>表格的行跨度案例</h2>
<table border="1" cellspacing="0">
<tr>
<td rowspan="2">A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th>B2</th>
<th>B3</th>
<th>B4</th>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<h2>datalist控件</h2>
<input type="text" list="pro-list">
<datalist id="pro-list">
<option value="北京市"></option>
<option value="上海市"></option>
<option value="广东省"></option>
<option value="浙江省"></option>
<option value="江苏省"></option>
</datalist>
<h2>音频标签</h2>
<p>
<audio src="E:\Music\舞曲\dj芭啦芭啦樱之花.mp3" title="dj芭啦芭啦樱之花" controls>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio><br>
<audio src="E:\Music\舞曲\smile-butterfly.mp3" title="butterfly" controls autoplay>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio><br>
<audio src="E:\Music\舞曲\李贞贤 阿里阿里.mp3" title="李贞贤 阿里阿里" controls loop>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<h2>视频标签</h2>
<p>
<video src="F:\Video\MV\痴心换情深周慧敏粤语版.mp4" controls width="1024" height="768">
对不起，您的浏览器不支持video标签，请升级浏览器！
</video>
<video src="F:\Video\MV\难却平生不晚完整版.mp4" controls width="1024" height="768">
对不起，您的浏览器不支持video标签，请升级浏览器！
</video>
</p>
</body>
</html>
CSS
Css简介
Css(cascading style sheet，层叠式样式表)是用来给HTML标签添加样式的语言
CSS3是CSS的最新版本，增加了大量的样式、动画、3D特性和移动端特性
前端三层：
1.结构层 HTML 搭建结构、放置部件、描述语义
2.样式层 CSS 美化界面、实现布局
3.行为层 JavaScript 实现交互效果、数据发送与接收、表单验证等
CSS使样式和结构分离
CSS使样式和结构分离，样式和结构不用“混合着写”，而是彼此分开:HTML就负责结构，CSS负责样式
HTML和CSS怎么结合呢? "选择器"就是两者的纽带
CSS的本质
CSS就是样式的“清单”。要书写合适的选择器，然后用选择器来指定元素的样式，并“一条一条罗列”出来。
CSS没有加减乘除、或与非、循环、判断。CSS不是“编程”,仅是直截了当的罗列样式
背熟CSS的属性，非常的重要，属性的熟练程度，决定了做网页的速度
CSS的书写位置
内嵌式:在<head>的<style>标签中，书写CSS代码
<head>
<style>
#div1{
font-size: 18px;
}
</style>
</head>
外链式:将代码单独保存为.css文件，再在HTML的<head>引入
<head>
<link rel="stylesheet" href="css/index.css">
</head>
行内式:通过标签的style属性来设置元素的样式
<div style="width: 109%;height: 30px;color:red;"></div>
标签选择器
标签选择器，也称元素选择器、类型选择器。它直接使用元素的标签名当做选择器，选择的是页面上所有的该种标签无论这个标签所处位置的深浅
span { --> 选择所有的span
color: red;
}
<div>
<p>一分耕耘一分收获</p>
<span>未必！</span> --> 会被选中
<p>九分耕耘一分收获</p>
<p><span>未必！</span></p> --> 会被选中
</div>
id选择器
CSS选择器可以使用#id名称 (井号+id的名称)来选择指定id的标签
class属性
class属性，表示“类名
<p class="success>操作成功!</p>
类名的命名规范，和id属性的命名规范相同。和id属性不同的是多个标签，可以有相同的类名
class选择器
CSS选择器可以使用.class名称 (点号+class的名称)，来选择指定class的标签
原子类
在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等，都设置为单独的类
使用原子类
定义原子类后，HTML标签就可以“按需选择”它的类名了，这样就可以非常快速的添加一些常见的样式
复合选择器
1.后代选择器 .box .spec 选择类名为c2的标签内部的类名为c3的标签
2.交集选择器 li.spec 选择即是li标签，也属于spe类的标签
3.并集选择器 ul,ol 选择所有ul和ol标签
交集选择器
选择含有.spec类的span标签，应该使用交集选择器
并集选择器
并集选择器也叫做分组选择器，逗号表示分组
关系选择器
三种关系选择器
名称 例子 含义
1.子选择器 div>p div的子标签p
2.相邻兄弟选择器 img+p 图片后面紧跟着的段落将被选中
3.通用兄弟选择器 p~span p元素之后的所有同层级span元素
属性选择器举例:
属性选择器
a标签举例 含义
a[title] 选择有 title 属性的a标签
a[ title="中国”] 选择 title属性值为“中国”的a标签
a[ title^=”杭州”] 选择 title 属性值以“杭州”开头的a标签
a[ title$=”南京”] 选择 title 属性值以“南京”结尾的a标签
a[ title*="松勤”] 选择 title 属性值包含“松勤”的a标签
a[ title~="测试”] 选择 title 属性值以空格隔开的，有“测试”字样的a标签
a[ titlel=”今日”] 选择 title 属性值以“今日-”开头的a标签
什么是层叠性
CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质。指的是:多个选择器可以同时作用于同一个标签，效果叠加
层叠性权重
如果多个选择器定义的属性有冲突，CSS提供了严密的冲突处理规则:
id权重>class权重>标签权重
盒模型
什么是盒模型
所有HTMI标签都可以看成矩形盒子，由width、height.padding、border构成，称为: 盒模型
width 宽度
height 高度
padding 内边距
border 边框
margin 外边距
盒模型总宽度
盒子的总宽度 = width + 左右padding +左右border
盒模型总高度
盒子的总高度= height + 上下padding + 上下border
width属性
width属性表示盒子内容的宽度
width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
当块级元素(div、h系列、li等)没有设置width属性时，它将 自动撑满
height属性
height属性表示盒子内容的高度
height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
盒子的height属性如果不设置，它将自动被内容撑开，如果没有内容，则heigh默认是0
padding属性
padding 是盒子的内边距，即盒子边框内壁到文字的距离
padding 的四个方向
padding 属性的四个方向，可以分别用最小属性来设置
四个方向 含义
padding-top 上 padding
padding-right 右padding
padding-bottom 下 padding
padding-left 左 padding
padding 的四数值写法
padding 属性如果用四个数值以空格隔开进行设置，分别表示:上、右、下、左的padding
padding: 20px 30px 40px 50px;
margin 属性
margin 是盒子的外边距，即盒子和盒子之间的距离
margin 塌陷现象
竖直方向的margin 有塌陷现象。即: margin不叠加，小的margin会塌陷到大的margin中，以大的为准
元素默认margin
有些元素有默认的margin，比如: body、hn、ulol、p等，
在开始网页制作时，一般要将它们清除
盒子的水平居中
若盒子的左右margin 都设置为auto，盒子将水平居中
若盒子的text-align 设置为center，盒子内的文本将居中对齐
盒子的垂直居中，需要使用绝对定位技术实现
box-sizing属性
box-sizing 属性在移动网页制作中用的比较多，PC页面中比较少，因为它对百分比布局、弹性布局等非常好用
块级元素与行内元素比较
比较项 块级元素 行内元素
是否能并排显示 否 是
是否能设置宽高 是 否
当不设置width属性 width自动撑满 width自动收缩
举例 div、p、h系列、li、ul span、a、b、u、i、em、img、form
img 元素和表单元素是特殊的行内块元素，它们即能够并排显示，也能够设置宽高
display属性
display 属性规定元素应该生成的框的类型
属性 作用
display:none 将元素隐藏，元素彻底放弃位置
display:block 将元素转换为块级元素
display:inline 将元素转换为行内元素(用的不多)
display:inline-block 将元素转换为行内块元素(既能并排显示，也能设置宽高)
浮动与定位
浮动是用来实现并排
浮动最本质的功能:实现并排
浮动使用要点
要点1: 要浮动，并排的盒子都要设置浮动
要点2: 父盒子要有足够的宽度，否则盒子会掉下去
要点3: 浮动元素不再区分块级和行内元素，它们一律能够设置宽度和高度，即使是span与a标签
要点4: 只有并排显示的盒子才要设置浮动，垂直显示的盒子不要设置浮动
要点5: “大盒子带着小盒子浮动”，大盒子内部的小盒子可以继续浮动
要点6: 不要节约使用盒子
什么是相对定位
相对定位:盒子可以相对自己原来的位置，进行位置调整称之为相对定位。语法是: positien: relative;
position: relative;
top: 50px;
left: 50px;
相对定位的本质
相对定位的元素，会在“老家留坑”，本质上仍然在原来的位置，
只不过渲染在新的地方而已，渲染的图像可以比喻成“影子”，
不会对页面上的其他元素产生任何影响
什么是绝对定位
绝对定位:盒子可以在浏览器中，以坐标进行位置精准描述
拥有自己的绝对位置。语法是: position: absolute;
脱离标准文档流
绝对定位的元素，会脱离标准文档流，释放自己原来的位置，对其他元素不会产生任何干扰，二是对它们进行压盖
除绝对定位外，浮动(float)、固定定位，都会脱离标准文档流
参考盒子
绝对定位的盒子，并不是永远以浏览器作为基准点
绝对定位的盒子，会以自己祖先元素中，离自己最近的，拥有定位属性的盒子，作为基准点。这个盒子通常是相对定位的盒子，所以这个性质也叫做”子绝父相“
什么是固定定位
固定定位:不管页面如何滚动，它永远固定在那里。语法是
position: fixed:
注:固定定位只能以页面作为基准点，没有“子固父相”性质
定位使用的场景
相对定位:微调元素位置、用作绝对定位的参考盒子
绝对定位:用来制作:压盖、遮罩效果、结合is实现动画
固定定位:返回顶部、楼层导航等、浮动广告位
