<干货>5分钟快速回顾HTML CSS
时间:2022-05-11
本文章向大家介绍<干货>5分钟快速回顾HTML CSS,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一.html
(一)标签类型
- 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置)
-
div
(无语义) - 列表
ur/ol/li
- 段落
p
- 标题
h1-h6
- 自定义列表
dl/dt/dd
- 其它常见问题
- 块元素的居中问题
- 块级元素左右居中:先设置自身width;然后,
margin: 0 auto;
- 块级元素左右居中:先设置自身width;然后,
- 块元素的居中问题
-
- 2.内联元素(行内)[不支持
width
,height
,margin
上下,padding
上下]- 常用内联元素
-
span
(无语义) - 超链接标签
a
-
src
可以为空,但一定要写
-
-
- 其它常见问题
- 子级内联元素之间有间隙,可以把父级元素
font-size
设置为0,子级单独设置font-size
- 内联元素居中:由于内联元素自身不支持
width
,使用在父级元素设置text-alian : center
的解决方案
- 子级内联元素之间有间隙,可以把父级元素
- 常用内联元素
- 3.内联块元素(支持全部样式的内联元素)
- 转换为内联块
- 设置样式
display: inline-block
;
- 设置样式
- 其它常见问题
- 可以把内联块元素看做内联元素的进化版,
- 通过设置
float
属性也会将元素转换为内联块 - 通过定位属性
fix
,absolute
都可以将元素转换为内联块
- 转换为内联块
(二)盒子模型
- 1.盒子图
盒子图
- 2.样式重置(
reset.css
) h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{ /*去掉默认样式*/ margin: 0; padding: 0; } ul,ol{ /*去掉左边的点或者数字*/ list-style: none; } a{ /*去掉下划线*/ text-decoration: none; } em,i{ /*去掉斜体*/ font-style: normal; } b,strong{ /*去掉加粗*/ font-weight: normal; } /*清除浮动影响 和清除margintop塌陷 合在一起的写法*/ .clearfix:before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ /*兼容ie*/ zoom:1; }
(三)表单<form></form>
-
action
- 提交表单到对应的视图函数
<form action="localhost:8000/index5" method="get"></form>
- 提交表单到对应的视图函数
-
label
(注意拼写)[关联对应的id]-
for
="某input
的id
"<label for="user_name">用户名</label>
-
-
input
-
type
- 文本(用户名)
<input type="text" id="user_name">
- 密码
<input type="password" id="passwd" name="user_passwd">
- 单选框(性别)[相同的name实现互斥选择] <input type="radio" name="sex" value="1">男 <input type="radio" name= "sex" value="0">女
- 多选框(爱好)
html <input type="checkbox" name= "hobby" value= "work">工作 <input type="checkbox" name= "hobby" value = "learn">学习 <input type="checkbox" name= "hobby" value="play">娱乐
- 上传文件
<input type="file">
- 提交
<input type="submit" value="注册">
- 重置
<input type="reset" value="重置">
- 文本(用户名)
-
-
textarea
(多行输入框)<textarea name="" id="" cols="30" rows="5">个人介绍</textarea>
select
<select name="loc">
<option value="1">北京<option>
<option value="2">上海<option>
<option value="3">广州<option>
</select>
一点体会:
提交表单时,只会识别到标签以内的内容,所以,多选框 多选框,下拉框一定要添加value,且值必须唯一
(四)列表
- 1.有序<ol>
<ol>
<li>第一季</li>
<li>第二季</li>
<li>第三季</li>
</ol>
- 2.无序<ul>
<ul>
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ul>
- 3.清除样式
list-style:none;
二.css
(一)定位的所有套路:
- 1.相对定位(相对自己定位):
- css属性
position: relative;
left: 50px;
top: 50px;
说明: 针对自身设置相对定位 有上左,上右,下左,下右,四种定位方式 元素自身未脱离文档流,依然占据了原位置
- 2.绝对定位(相对于父元素定位)
- 父元素设置
position: relative;
- 子元素设置 position: absolute; left: 20px; top: 20px;
- 说明:
- 子元素会针对父元素进行定位
- 子元素已经脱离了文档流
- 定位的四种方式同相对定位
- 如果子元素找不到父元素,则会一直向上找,直到找到最外层标签页面
- 父元素设置
- 3.固定定位(相对于浏览器定位)
- 元素css设置 position: fix; right: 20px; bottom:20px
- 说明:
- 位置会固定住,不随滚动条滚动
- 脱离文档流
- 4.层级关系:
- z-index属性相当于Photoshop中的图层属性,数值越大越靠上,实际开发过程中,取值从1000开始,每次增加一百,如果意外增加了需求,预留的100个层级可插入新的需求层
- 5.一些细节:
-
absolute
,fix
能把元素变成内联块 -
position
还有一个默认值为static
-
(二)浮动注意点:
- 浮动元素有左浮动(float:left)和右浮动(float:right)两种
- 浮动元素碰到父元素边界或其他元素才会停下来
- 父元素必须清除浮动,才能被子元素撑开
- 相邻浮动的块元素可以并在一行,超出父级元素会自动换行
- 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙)
- 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素,形成文字绕图效果
- 常见需求: 一组子元素,同时左浮动;同时右浮动;最后一个右浮动,其它左浮动
(三)引入方式
- 1.内联式(新手模式)
<div style="color:red;width:100px;"></div>
- 2.嵌入式(练习模式) <style> div{ color:red; width:100px; } <style>
- 3.外链式(项目模式)
<link rel="stylesheet" href="..css/index.css">
(四)选择器
- 层级选择器
div p{}
- 标签选择器
p{}
- 多标签同时选
p,span{}
- 直接子类选择器
.bilibili > p{}
- 类选择器
.bilibili{}
- 伪类选择器
.bilibili:hover{}
- 选择器权重
- 权重10000:
!important
- 权重1000:内联样式
style
- 权重100:ID选择器
- 权重10:伪类,
:hover
- 权重为1:
div.p
- 权重10000:
(五)容易忘的属性
- 字体
color: red;
- 清除下划线
text-decoration:none;
- 行高
line-height: 24px;
- 字体类型
font-family:"Microsoft Yahei";
font-size: 20px;
font-weight: bold;
- 字符间距(强迫症福音)
letter-spacing:10px;
- 边框
border: 1px solid red;
(六)display选项
- 内联元素:
display: inline;
- 内联块元素
display: inline-block;
- 块元素
display: block;
- 隐藏元素
display: none;
HTML CSS导图
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Open3d 学习计划—13(Azure Kinect)
- 头条面试题:计算目录树的深度
- /etc/passwd文件和/etc/shadow文件
- docker_进阶
- [前端] 设定为disabled的表单域值不能被提交
- 工厂方法模式
- 原创 | 这道题codeforces的简单题差点做了我一下午,你能解出来吗?
- OpenCV4 部署DeepLabv3+模型
- 使用OpenCV实现哈哈镜效果
- 如何使用OpenCV在Python中访问IP摄像头
- 分享我学习Pandas使用的资料,可能是新手入门Pandas最好的教程!
- 原创 | Git入门教程,详解Git文件的四大状态
- 原创 | ACMer不得不会的线段树,究竟是种怎样的数据结构?
- dplyr包summarize的使用
- Mysql的binlog和relay-log到底长啥样?