HTML标签，CSS选择器，属性，盒子模型，浮动

2023-05-16

文章目录

HTML标签，表格，表单
- HTML 标签:
- 表格 table
- 表单 form
- - 1. 表单域，表单元素，提示信息
CSS选择器，属性，显示模式，背景图，权重
- 1. CSS层叠样式表
- - 1. 基础选择器 style
  - 2. 字体属性
  - 3. 文本属性
  - 4. 引入方式
- 2.语法，选择器，显示模式，背景图，权重
- - 1. Emmet语法
  - 2. CSS 复合选择器 . 类选择器 : 伪类选择器
  - 3. 元素显示模式
  - 4. 背景
  - 5. 三大特性：继承性，层叠性，优先级
盒子模型：盒子竖着排列
- 1.组成部分 border: padding；margin
- - 1. 嵌套块元素垂直外边距的坍塌
  - - a. 父子之间的高度坍塌：
    - b. 兄弟之间的高度坍塌：
浮动
- 1.浮动
- 2. 常见网页布局
- 3. 清除浮动

HTML标签，表格，表单

HTML 标签:

a. h2, div 独占一行 span 是一行多个
img属性们： src 引用图片，alt未加载图时的提示 title 图片提示文本
<> 尖括号内使用 = （键值对）
属性：width hieght (一般只改一个) border 边框
b. 目录文件夹与根目录相对路径： / 下一级 ../上一级，绝对路径：\ 本地地址，网页地址
c. 超链接
ⅰ. 外部链接 a href = "跳转目标" target = “目标窗口弹出方式blank或者self ·”
ⅱ. 内部链接 <a href = "同一级.html"> </a>
ⅲ. 空链接 #
ⅳ. 下载链接 <a href = "同一级.zip"> </a>
ⅴ. 图片链接 <a href = "链接"><img src = "图片地址.jpg"> </a>
ⅵ. 锚链接定位到某个位置

<a href = "#live">  第几段  </a>    
<h3 id = "live">演唱会 </h3>

d. 注释代码与特殊字符

表格 table

标签 table 大表格 tr 行 td 单元格 th 表头单元格加粗居中
标签table 内表格属性：align 对齐方式左中右 border 边框粗 cellpadding 内容与单元格之间的距离 cellspacing 单元格之间的距离
a. thead 表格头部区域 tbody 表格主体区域
b. 合并单元格跨行 rowspan（靠上单元格的属性）跨列 colspan （靠左）要删除多余的单元格
列表标签
a. 无序列表：ul （有小点）[ 导航栏，有序视频 ] （本身有内外边距，需要被清除）
b. 有序列表 ol 只能包含列表项 li ，li 内可以存放任何标签
c. 自定义列表 dl dt(标题名称) dd （解释相当于li ） [ ]

表单 form

1. 表单域，表单元素，提示信息

a. 表单域 from 将表单元素提交给服务器， action 处理表单数据的 url 地址， method 提交方式（get / post ），name 表单域名称
b. form 表单元素
ⅰ. input 输入表单元素，
1. type 属性（text,文本框，password 密码框，submit 提交元素给后台，reset 重置，button 按钮，file 上传文件,）
2. radio 单选按钮(name属性必须一样)， checkbox 复选框(name属性必须一样后台看)，chacked = “checked"默认选择单复选按钮
3. value ①文本框中的属性值后台看②提交框内容③重置框内容④按钮，maxlength 规定输入字段中的字符最大长度)
4. label for 与input 中的 id 属性相同，绑定，增加用户体验
ⅱ. select 下拉表单元素，节约页面空间
1. 选项 option ,默认选中selected = “selected”
ⅲ. textarea 文本域元素，输入内容较多时
1. cols =” 一行的字数 "

CSS选择器，属性，显示模式，背景图，权重

1. CSS层叠样式表

1. 基础选择器 style

分为基础选择器和复合选择器
基础选择器
a. 标签选择器 p { }，
b. 类选择器，定义结构【后面class = “类名1 类名2”调用】
ⅰ. . 类名1 { 属性1：属性值1； }
ⅱ. 可以多次调用
c. id选择器，定义样式【后面id = " id名 " 调用】
ⅰ. #id名 { 属性1：属性值1； }
ⅱ. 只能调用1次
d. 通配符选择器【HTMLBody div span li等等的标签都改为了红色】
ⅰ. * { 属性1：属性值1； }
ⅱ. 不需要调用
复合选择器
a.

2. 字体属性

文字样式不倾斜 font-style：normel; 字体加粗 font-weight：400或者700；字体大小 font-size : 12px/24px (字体大小/行高) 字体 font-family；（简写按顺序，后两个必须有）
font: 12px/1.5 ；【行高是字体的1.5倍】

3. 文本属性

文本水平对齐 text - align ，装饰文本 text - decoration : none; (没有线)
文本缩进 text - indent : 2em,（可实现图片居中对齐，父级设置text-align ）行间距 line - height : 16px; 颜色:color

4. 引入方式

内部嵌入样式style可以放在任何地方，最好放 head 内
行内样式表，
粉色
外部样式表同一级创建css 结构

2.语法，选择器，显示模式，背景图，权重

1. Emmet语法

a. div*3
b. ul>li
c. div+p
d. .demo 或者 #demo1
e. 有顺序div类名 div$*3 KaTeX parse error: Expected '}', got 'EOF' at end of input: …iv内部有内容 div{}*3

2. CSS 复合选择器 . 类选择器 : 伪类选择器

a. 后代选择器爹（或者属性.nav）空格所有下属亲戚 { }
b. 子选择器爹 > 亲儿子 { }
ⅰ. 用途：下拉菜单
c. 并集选择器元素1, 原宿2 { }
d. 伪类选择器
ⅰ. 超链接（a一般单独设置样式）的显示状态 a : link 未访问 a : visited 已访问 a: hover 鼠标经过 a: active 已点击过必须按顺序
ⅱ. 表单input元素获得光标 input:focus { }

3. 元素显示模式

a. 是：元素以什么方式进行显示。
b. 分类：块元素和行内元素
ⅰ. 块级元素： <h> ,,<div>,<ul>,<ol>,<li>独占一行，
1. 可以设置宽高以及内外边距，是容器，里面可以放行内或者块级元素，
2. 文字标签<h>不允许放块级元素div
ⅱ. 行内元素(内联元素)：<a>，，，，，<del>，<s>，<ins>，，，
1. 相邻元素在一行，之间有空白间隙，无法设置宽高，
2. 只能容纳文本或其他行内元素，
ⅲ. 链接里面不能放链接，但 a 可以放块级元素，a转换一下块级模式安全
ⅳ. 行内块元素：img，input，td，同时具有行内和块级元素的特点：
1. 相邻行内元素在一行，之间有空白间隙，默认本身宽度，
2. 高度宽度，行高，内外边距都可以控制
c. 转换：
ⅰ. 转换为块级元素：display : block;
ⅱ. 转换为行内元素：display : inline; 中间会有空隙
ⅲ. 转换为行内块元素：display : inline-block;

4. 背景

a. 背景颜色：background-color:transparent;(默认透明)
b. 背景图片：background-image :none; 或者 url(图片地址) ;
c. 背景平铺：background-repeat:repeat ; no-repeat; repeat-x; repeat-y;
d. 背景图像固定：background - attachment 设置是否固定或者随着页面其余滚动。scorll 滚，fixed 固定
e. 背景图片位置：background-position: x y; top,center,bottom,left,right,若只有一个值，第二个默认居中，精确单位位置必须按顺序，可以混合单位（40px center）
f. 以上按顺序可以略写，background: black url() no-repeat fixed center;
g. 背景半透明：background : rgba(0,0,0,0.5);

5. 三大特性：继承性，层叠性，优先级

a. 层叠性：就近原则
b. 继承性：子承父业：主要继承跟文字相关样式，text-，font-，line-，color (不会继承高度，内外边距)
ⅰ. 行高的继承：子会继承父的行高。 font: 12px/1.5 ；【行高是字体的1.5倍】
c. 优先级：选择器的权重
ⅰ. 继承或 * 【0】< 元素选择器【1】< 类选择器,伪类选择器【10】< ID选择器【100】< 行内样式 style 【1000】< !important 【∞】 color:pink ! important;
ⅱ. 继承的权重是0 ，例如body 颜色是black 子a 自身是blue,除非单独再设置green等，因为父级权重在子为0
ⅲ. 权重叠加：权重高优先执行

盒子模型：盒子竖着排列

网页布局：准备元素，设置样式摆放位置，装内容

1.组成部分 border: padding；margin

盒子1：边框，内外边距，实际内容
a. 边框border:
1. 颜色border-color，
2. 粗细-width，
3. 虚实-style (solid实现，dashed虚线，dotted点线)
4. 简写：border: 1px solid red;没有顺序
5. 边框四条边可以分开
6. 合并相邻边框 border - collapse:collapse.合并
7. 边框会影响实际大小。要么不量边框的厚度，要么量了后减去边框宽度。
b. 内容content
1. 默认紧贴边框
c. 内边距 padding
1. 调节边框与内容的距离
2. 可以分开上下左右，简写：
a. padding : 5px,上下左右都是5
b. 5px 10px ;上下5px，左右10px，
c. 5px 10px 20px;上5，左右10，下20
d. 4个值上右下左
3. 有宽高的前提，内边距添加会影响实际大小，同样量了后width,height减去内边距大小。
a. 用于：导航内文字不一样多，设置边距撑开盒子。
b. 盒子本身没有宽高,padding不会撑开盒子，有谁谁变
c. 嵌套子级不要设置宽高，就不会撑开父级。若设置，就会撑开父级
d. 外边距 margin
1. 控制盒子之间距离
2. 可以分开上下左右
3. 对于行内元素，尽量只设置左右边距
4. 应用：
a. 可以使块级盒子水平居中：（对行内或行内块元素不管用）指定width + 左右外边距为auto
/* 块级元素水平居中 */

.header {
    height: 200px;
    /* 写法一： */
    width: 900px;
    margin: 0 auto;
    /* 写法二： */
    margin-left: auto;
    margin-right: auto;
    /* 写法三 */
    margin: auto;
}

d. 让行内或者行内块级元素水平居中：给父元素添加 text-align : center

1. 嵌套块元素垂直外边距的坍塌

a. 父子之间的高度坍塌：

父子元素同时有上外边距，此时父元素会塌陷较大的外边距值.
ⅰ. 方法1：定位：子绝父相后调节外边距
ⅱ. 方法2：父元素设置上边框border-top，或者父元素定义上内边距padding-top，或者overflow:hidden+子元素调整外边距
ⅲ. 方法3：给子元素用行内块级元素表示后设置外边距，display:inline-block;
ⅳ. 方法4：子元素开启相对定位，用top,right,buttom,left,调整布局
ⅴ. 浮动盒子不会产生外边距塌陷

b. 兄弟之间的高度坍塌：

兄有下边距，弟有上边距，欲加宽两者之间的距离，实则变成距离较大的内个（均正或负绝对值）或者一正一负的和
ⅰ. 方法1：目标距离设在哥哥下边距，或者弟弟上边距
2. 消除浮动产生高度坍塌的方法
ⅰ. 想要消除的元素前

.nav {
  content:'';
  clear:both;
}
          ⅱ. 以下代码
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

  3. 消除浏览器默认内外边距

* {
  padding:0;
  margin:0;
}

2.圆角边框 border-radius:100px; text-shadow
a. 也可以写百分比与高度相比 ) 外边框圆角
b. 分开4个值 border-top-left-radius:50%( 必须top,bottom在前 ) ，两个值是对角线，
6.阴影 box-shadow，
a. 盒子阴影：box-shadow: 不占空间
ⅰ. h-shadow:水平，必写
ⅱ. v-shadow:垂直，必写
ⅲ. blur 虚实
ⅳ. spread 阴影大小
ⅴ. color rgb(0,0,0,0.3);
ⅵ. inset:外部阴影（outset）改为内部阴影
b. 应用：鼠标经过
c. 文字阴影：text-shadow ;
ⅰ. 值：h-shadow, v-shadow, blur, color

浮动

浮动：块级元素横着排列，中间没有间隙

1.浮动

a. 应用：多个块级元素一行排列（浮动相互贴着，或者贴着边缘）
b. 浮动特性
ⅰ. 浮动元素会脱标：移动到指定位置。不在保留原来位置
ⅱ. 都是贴着顶部，父级装不下，剩下盒子会另起一行
ⅲ. 任何元素（行内或者块级）减价浮动后具有行内块元素属性
1. 有了浮动不需要转换，直接设置宽高
ⅳ. 浮动元素经常和标准流父级搭配使用
1. 标准流的父级排列上下位置，内部子元素采取浮动排列左右位置

2. 常见网页布局

a. 普通流( 块级元素，行内元素，行内块元素 )，浮动，定位；
b. 网页布局第一准则：标准流的父级排列上下位置，内部子元素采取浮动排列左右位置
c. 第二准则：先设置盒子大小，再设置盒子位置
vscode 12,4
d. 一般兄弟盒子都一起浮动，否则浮动盒子会影响后面的标准流不会影响前面的标准流

3. 清除浮动

a. 清除浮动原因：父盒子无高，让子盒子浮动自动撑开时父盒子高度为 0 ，会影响后面标准流.（如果父级元素有高，不需要清除浮动。）
b. 本质 ; 清除浮动本质是清除浮动元素造成的影响。清除后父级会根据子盒子自动检测盒子高度
c. clear:both. 策略：闭合浮动
d. 方法
ⅰ. 额外标签法（隔墙）：最后一个浮动后添加带 clear:both属性的标准块级元素
ⅱ. 父级添加 overflow 属性值为 hidden（缺点：会清除超出父级的子元素的部分），auto，或者scroll
ⅲ. 父级添加 after 伪元素（默认行内元素，必须转化为块级元素），（原理：父级内子级自动添加新盒子）

.box:after {
  content:"";
  display:block;
  清除浮动：
  clear:both;
}

或IE6.7专有
.clearfix {
  *zoom:1;
}

  ⅳ.  父级 双伪元素
.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)