本文介绍了HTML的基本标签如<head>、<meta>和<a>、<img>，详细讲解了CSS的布局模式，包括静态、相对、绝对和固定定位，以及浮动元素的影响和清除方法。还涵盖了CSS的选择器优先级、边框属性、盒模型以及display属性，特别讨论了flex布局的使用和相关属性。此外，提到了JavaScript中操作DOM和事件绑定的方法。
<head> 头部标签，用于描述该文档的各种属性和信息
<meta charset="UTF-8"> 声明网页的编码格式
<!-- body有8px的外边距 -->
<!-- style当成属性直接写在开始标签的内部称为内联样式 -->
<!-- 块属性宽度默认为浏览器宽度，多个样式用分号隔开 -->
<!-- 跳转链接 ：a标签定义超链接-->
<a href="http://www.baidu.com">跳转到百度</a>
<!-- 图片路径：
1.绝对路径：磁盘路径
2.相对路径：以自身为参考点，文件所处的位置
-->
<img src="C:\Users\yeji\Desktop\HTML_01\imgs\q1.jpg" alt="这是图片">
<img src="./imgs/q1.jpg" alt="相对路径的图片">
-----------------------
布局模式
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
1、position: static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2、position: inherit
inherit值如同其他css属性的 inherit 值，即继承父元素的position值。
3、position: relative
相对定位，相对于自己的初始位置，不脱离文档流。也就是说元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。通过相对定位:参考点是元素本身所处的位置，继续占据原来的空间
元素原位置在现位置的左上
/* position: relative;
left: 100px;
top: 100px; */
4、position: absolute
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
通过绝对布局定位 ：元素会脱离文档流，不再占据文档流上的空间
//距离页面左侧 100px，距离页面顶部 150px。
/* position: absolute;
left:100px;
top: 100px; */
5、position: fixed
fixed元素脱离正常的文档流，所以它与absolute元素很相似，同样会被周围元素忽略，支持top,bottom,left,right属性，但fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会随着浏览器滚动条的滚动而一起滚动。比如我们常见的回到顶部的功能，按钮一直在浏览器的左下方，不管滚动条如何滚动，该按钮都会在左下方的固定的位置，这个需求就可以使用position: fixed来完成。
/* position: fixed;
top: 0;
left: 0; */
---------------------
CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
设置了浮动的元素，会脱离文档流，会靠着父元素的左右边界或是其他浮动元素的边界进行显示，而浮动元素
在文档流中空出的位置，将由文档流中的其他非浮动元素顶替，这时可对其他非浮动元素清除浮动
float: right;
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
/* 清除浮动后，元素的边上将不再有其他浮动元素 */
clear: both;
--------------------------
<style>
header{
width: 100%;
height: 300px;
}
<body>
<header>定义页面的顶部内容区</header>
main{
width: 80%;
height: 700px;
}
<body>
<main>定义页面的主体内容区域</main>
footer{
width: 100%;
height: 100px;
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
<footer>
<div class="item">
<img class="logo" src="" alt="">
<p>首页</p>
</div>
<div class="item">
<img class="logo" src="" alt="">
<p>逛逛</p>
</div>
<div class="item">
<img class="logo" src="" alt="">
<p>购物车</p>
</div>
<div class="item">
<img class="logo" src="" alt="">
<p>我的</p>
<div>
<p>高兴</p>
</div>
</div>
</footer>
----------------------------------------------
选择器的优先级
内联样式>id选择器>class选择器>元素选择器
元素选择器：选中所有以该关键字为名称的元素
元素名称{
样式表
}
选择器：
* 匹配所有标签
*{
margin: 0;
/* 上 左右 下 */
/* 上右下左 */
padding: 0 10px 20px ;
}
/* id选择器：
#id名称{
样式表
}
*/
#div_1{
background-color: blue;
}
/*
class选择器：
.class名称{
样式表
}
*/
.div_c{
font-size: 50px;
/* 组合选择器 选中item这个类中class值为logo的元素*/
.item .logo{
width: 20px;
height: 20px;
background-color: blue;
}
/* 选中item中的第奇数个 */
.item:nth-child(2n+1){
background-color: red;
}
/* 选中item中所有的p标签 */
.item p{
text-align: center;
}
/* 选中item中的直接子元素p */
.item > p{
color: darkkhaki;
}
----------------------------------------------
border
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：border-width border-style border-color
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-width:thin(细边框) medium(中等边框) thick(粗边框) 10px;
上 右 下 左/上 左右 下/上下 左右/上下左右
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
border-style:dotted(点状) solid(实线) double(双线) dashed(虚线);
上 右 下 左/上 左右 下/上下 左右/上下左右
/*
盒模型
border设置边框：4个边框
border:边框大小 边框形状 颜色
border-top:边框大小 边框形状 颜色
*/
border: 10px solid black;
/* box-sizing: border-box：*/
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容），可以把每一个容器，比如div，都看做是一个盒子模型
比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red；
这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）
相当于一个元素的实际宽高是由： padding + border + content 组成
①：没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高
比如给父元素parent设置宽高为500px，背景色为黑色；然后给子元素设置宽高为478px，并设置内边距10px,红色边框1px，背景颜色为灰色，此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景
②：加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
---------------------------------------------------------------
display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
display:flex
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex-direction容器内元素的排列方向(默认横向排列)
1：flex-direction:row; 沿水平主轴让元素从左向右排列
2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列
4：flex-direction:column-reverse; 让元素沿垂直主轴从下到上垂直排列
flex-wrap 容器内元素的换行(默认不换行)
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
justify-content 元素在X轴上的排列
1：justify-content : center;元素在主轴（页面）上居中排列
2：justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
3：justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
4：justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
5：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍
align-items 元素在Y轴方向上的对齐方式
1：align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐
2：align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐
3：align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）
align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
1：align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠
2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
3:align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠
4:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。
5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。
--------------------------
/* 可以通过设置行高与元素高度一样的值来实现文本的垂直居中 */
line-height: 100px;
/* 设置元素在父元素水平方向上居中对齐 */
margin: 0 auto;
----------------------------------------------------------------------------2.13
表格
列合并：<td colspan="4"></td> （四个列元素合并）
border-collapse：用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
collapse
相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。
separate
默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。
min-width：最小宽
-----------------------------------------------------------------------------2.16
在text-align: center属性下空格用 
插入复选框：<input type="checkbox">
设置字体颜色：color
设置透明度：opacity：0.5
---------------------------------------------------------------------------2.17
hover 选择器：选择鼠标指针浮动在其上的元素，并设置其样式
例：.title > span:hover{
background-color: #fff;
border-bottom: 1px solid blue;
}
placeholder：提示符
------------------------------------------------------------------------------2.20
/* 消掉下划线 */
text-decoration: none;
/* 把父元素设置为相对布局，则他会成为子元素绝对布局的参考点 */
font-weight 属性设置文本的粗细。
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
//给输入框添加图片
.input_context .kw{
/* 设置input的内置样式 */
background-position: 440px;
background-repeat:no-repeat;
background-image: url('./img/眼睛.png');
}
------------------------------------------------------------------------js
根据id绑定点击事件
document.getElementById("btn").οnclick=function(){
---------------
}
error:
在<head>内引入外部Js ，报错出异常，显示Uncaught TypeError: Cannot read property ‘appendChild’ of undefined，属性未定义。为什么出现这种问题。查找很久发现这跟Js、DOM加载顺序有关，由于写在了<head>内，它会先执行，但是此时由于DOM还未加载完，而Js里有需要获取DOM中元素的语句要执行，这时就会出现异常， 解决方法很简单，将Js的外部文件引入放在<body>中就行，让整个页面加载完后再执行Js就不会出现无法读取的问题了。（如果是内部Js的话，还可以使用window.onload = function(){} 代码包裹，也是在文档加载之后再执行）
用JS(JavaScript )给HTML元素增加属性:obj.setAttribute('attr_name','attr_value');
例：td.setAttribute('name','price');
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。
例： var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
效果：在标签board中加载一个按钮，属性值为“这是测试加载的小例子”。
input.onblur:当用户离开输入字段时执行
例: newInput.onblur = function () {
//计算总价
--}
select() 方法用于选取文本域中的内容。
例：newInput.select()
ele.appendChild(newInput);
focus() 方法用于文本域获取焦点。
例：newInput.focus()
td.parentElement.rowIndex 获取该td所在行号
------------------------------------------------------------------------------------
object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。
object-fit 属性可接受如下值：
fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
flex-basis 属性规定弹性项目的初始长度。
注释：如果元素不是弹性项目，则 flex 属性无效。
text-decoration 属性规定添加到文本的修饰。
text-decoration-line 设置要使用的文本装饰类型（如下划线、上划线、划线）。
text-decoration-color 设置文字装饰的颜色。
text-decoration-style 设置文本装饰的样式（如实心、波浪形、点线、虚线、双线）。
text-decoration-thickness 设置装饰线的粗细。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
flex-direction 属性规定弹性项目的方向。
注释：如果元素不是弹性项目，则 flex 属性无效。
row 默认值。作为一行，水平地显示弹性项目。
row-reverse 等同行，但方向相反。
column 作为列，垂直地显示弹性项目。
column-reverse 等同列，但方向相反。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。
flex-wrap 属性规定弹性项目是否应换行。
注释：如果元素不是弹性项目，则 flex 属性无效。
nowrap 默认值。规定弹性项目不会换行。
wrap 规定弹性项目会在需要时换行。
wrap-reverse 规定弹性项目会在需要时换行，以反方向。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。
扫一扫
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
