css随笔1-基础

如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

结构html 表现css 行为js（三者相分离就是web标准的最佳体验方案）

div是divsion，表示分割，分区。span表示跨度，跨距

div标签独占一行，布局的话一行只能放一个div，可以理解为大盒子

span标签布局的话一行上可以多个<span>,小盒子

img是单标签，<img src="url" alt="替换文本，图像不能显示时，显示文本信息 ">。alt：替换文本，图像不能显示时，显示文本信息。title：提示文本，鼠标放在图片上时显示文本信息

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，就是图片相对于html页面的位置

同一级路径：      图像文件位于HTML文件同一级比如<img  src=“shouhu.gif”>

下一级路径： /     图像文件位于HTML文件同一级比如<img  src=“image/shouhu.gif”>
上一级路径：../    图像文件位于HTML文件同一级比如<img  src=“../shouhu.gif”> 

绝对路径：是指目录下的绝对路径，是从盘符开始的“D:\html\img\shouhu.gif”

超链接标签 ：<a   href="  " target=" 目标窗口弹出的方式"  > 文本或图像</a>

target:   _self为默认值即当前窗口打开页面，_blank为在新窗口中打开方式

 超链接中的锚点链接：点击链接可以快速定位到页面中的某个位置

      在链接文本的href属性中，设置属性值为#名字的形式，如<a  href="#one">点击</a>

      找到目标位置标签，在属性里添加一个id属性=刚才的名字不加#，即< p  id="one">点击后跳转到这里</a>

表格标签：表格的基本语法

 

列表标签

表单标签

一个完整的表单通常由表单域，表单控件（表单信息）和提示信息3个部分构成

<form>标签用于定义表单域，以实现用户信息的收集和传递，它会把它收集到的表单信息提交给服务器。表单域就是<from>标签

表单元素：<input type="  ">type的属性值有，button，checkbox,file等。其中checked属性规定此input元素首次加载时应当被选中

要求单选按钮和复选按钮要有相同的name值

<label>标签

 <select>标签

<textarea>表单元素，一般通过css来控制大小

当输入内容较多的情况下，此时我们可以使用<textarea>标签，它是用于定义多行文本输入的控件，如留言板，评论

css

css是层叠样式表的简称或者css样式表，级联样式表，css也是一种标记语言

 

 

 

 

 

 

 

  

 CSS的元素显示模式

特殊情况下，我们需要元素模式的转换，比如想增加链接<a>的触发范围：行内元素转换为块元素：display：block；块元素转换为行内元素：display：inline；转换为行内块：display：inline-block；

一个小技巧：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。line-height属性 

默认情况下background-repeast默认是平铺的。所以之前的input框的背景是平铺的。

 

background-position

 

 

 

 background:rgba(0,0,0,.3)设置背景颜色半透明的效果，最后一个参数取值范围是0~1

 

 

 

 

 

 

 1.8外边距的合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值

 

 

 还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题，后面再总结。

 1.9清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距。

* {
    padding: 0;
    margin: 0;
  }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

新知识点：去掉li前面的项目符号（小圆点）语法：list-style:none;

去掉下划线：text-decoration:none

 

01-综合案例-快报模块布局分析_哔哩哔哩_bilibili01-综合案例-快报模块布局分析_哔哩哔哩_bilibili

 腾讯课堂

小程序

HBuilderX 文档

vue3.0基础知识入门，Element plus学习，实战一个pc端后台管理-学习视频教程-腾讯课堂

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts