HTML+CSS阶段总结
主要总结了这个阶段来所学习的一些HTML和CSS中的重难点和记忆不太深刻的内容
HTML中的易错点
块级元素
- div
- p
- ul>li
- ol>li
- dl>dt+dd
行内块元素
行内块有块级元素的特点，又有行内元素的特点，可以一行显示多个，又可以设置宽高
- img
- input
- buttom
- textarea
行内元素
- span
- a
- i（字体倾斜）
- b （加粗）
- em（字体倾斜）
- u（下划线）
- s（删除线）
- strong（加粗）
- ins（下划线）
- del（删除线）
表格表单
- table（表格）
- 表头(th)
- 表格标题(caption)
- 清除表格之间的间隙(
collapse:collapse) - 合并单元格(col跨列合并，row跨行合并)
- form(表单)
- input单元格
- select下拉菜单(selected默认展示)
- radio单选框(默认选中checked)
- checkbox复选框
- file上传文件(multiple选择多个文件)
- lable标签(为了给用户更好的体验，让文字和按钮相连接，点那个都可以选中)
- textarea文本域(cols列，rows行)
选择器
选择器注意有个权重比分别是!important>内联样式>id选择器>类选择器>标签选择器>通配符>继承
注意使用选择器时选择器的计算
- class类选择器
- id选择器(一个页面只能有一个id属性值，唯一的不可重复的，一个id选择器里面只能有一个id属性值，一个id选择器只能选中一个标签)
- 标签选择器(span、div、p、a....)
- *通配符选择器
- 复合选择器
- 后代选择器(选择器1 选择器2{css.....})
- 子代选择器(选择器1>选择器2{css....})
- 并集选择器(选择器1，选择器2)
- 交集选择器(选择器1选择器2{css...})
- hover伪类选择器
CSS中的重点、难点
-
浮动
-
定位
-
三大特性
-
属性
主要结合CSS中所理解较为困难，学习掌握还不太熟练的部分进行笔记
浮动
浮动主要分为左浮动和右浮动，浮动以后所浮动的盒子(div)就脱离了标准流，相当于飘在了元素的上方，不占据了位置，但是会覆盖下面所移上来的其他元素，还会使父元素造成没有高度的影响(如果父元素没有设置高度的话，完全是由子元素高度撑起来的情况下)，浮动的作用是为了让块级元素能在同一行中排列，为了更好的布局。
浮动的特点：
- 浮动元素会脱离标准流，在标准流中不占位置
- 比标准流高半个级别，会覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会跟在上一个浮动元素的后面左右浮动
- 浮动有特殊的显示效果
- 一行可以多个
- 可以设置宽高
注意点：浮动的元素不能通过text-align:center; 和margin: 0 auto;来居中。
- 左浮动
float:left; - 右浮动
float:right;
清除浮动所带来的影响
- 直接给父元素添加高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动的方法一</title>
<style>
.father {
height: 400px;
width: 400px;
background-color: pink;
}
.son {
float: left;
width: 100px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 清除浮动的方法--1.直接设置父元素高度
特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块。 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
- 额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动的方法二</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.son {
float: left;
width: 100px;
height: 400px;
background-color: blue;
}
/* 2.给添加的块级元素设置clear:both */
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- 额外标签法：
操作：
1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂 -->
<div class="father">
<div class="son"></div>
<!-- 1.在父元素内容的最后添加一个块级元素 -->
<div class="clear"></div>
</div>
</body>
</html>
- 单伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动方法三</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.son {
float: left;
width: 100px;
height: 400px;
background-color: blue;
}
/* 1.基本写法 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 单伪元素清除法
操作：用伪元素替代了额外标签
1.基本写法
.clearfix::after {
content: '';
display: block;
clear: both;
}
2.补充写法
.clearfix::after{
content: '';
display: block;
clear: both;
补充代码：在网页中看不到伪元素
height: 0;
visibility: hidden;
}
特点：
优点：项目中使用，直接给标签加类即可清除浮动 -->
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
</html>
- 双伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双伪元素清除法</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.son {
float: left;
width: 100px;
height: 400px;
background-color: blue;
}
/* 双伪元素清除法 */
/* 用双为元素清除法可以解决margin的塌陷 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
</style>
</head>
<body>
<!-- 双伪元素清除法
操作：
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
特点：
优点：项目中使用，直接给标签加类即可清除浮动 -->
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
</html>
- 给父元素设置
overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给父元素设置overflow:hidden</title>
<style>
.father {
width: 400px;
background-color: pink;
overflow: hidden;
}
.son {
float: left;
width: 100px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 给父元素设置overflow:hidden
操作：
1.直接给父元素设置overflow:hidden
特点：
优点：方便 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
定位
定位，在我们平常布局当中，仅仅依靠浮动还有盒子排序是远远不够的，还应当配合定位来完整我们页面的内容
定位的作用：
让你的元素框出现在你想让他出现的位置，能够更好的布局，让用户有着更好的观看体验。
定位使用场景：
- 让子元素相对父元素进行定位移动(子绝父相)
- 水平居中
- 水平垂直都居中
定位的属性(position)：
- 静态定位(static)
设置方位属性没有效果，默认属性
positon: static;
- 相对定位(relative)
相对于自己原来的位置进行定位(占位置)，可以设置偏移量，一般和绝对定位进行使用。
position: relative;
- 绝对定位(absolute)
可以分为两种情况，1、如果祖先元素没有设置定位，那么它相对于浏览器来进行定位。2、如果祖先元素有定位，它根据最近的祖先元素的位置来进行定位。(脱标，不占位置，脱标之后的元素要，宽度默认由内容撑开)
position: absolute;
- 固定定位(fixed)
永远相对于浏览器来进行定位(脱标，不占位置，脱标之后的元素要，宽度默认由内容撑开)
position: fixed;
CSS三大特性
- 继承性
- 层叠性
- 优先级
继承性
子元素默认继承父元素的样式效果
常见的继承样式:
- color
- font-相关的属性
- text-相关的属性
- line-height：行高
继承的小应用：
- 去除无序列表前面的小圆点
ul{list-style:none;} - 统一不同浏览器的默认字体大小(不同浏览器可能默认字体大小不一样，这时候可以给body设置一个font-size值统一文字大小)
继承失效的情况：
- a标签颜色的继承(继承下来了，被浏览器默认设置覆盖了)
- h系列标签的font-size会继承失效(继承下来了，被浏览器默认设置覆盖了)
- div的高度不能继承，宽度可以(默认div独占一行)
层叠性
注意：只有当优先级相同时，才会比较层叠
- 给同一个元素设置相同的属性时，写在离HTML结构最近的生效
- 给同一个元素设置不同的样式时，写的样式会叠加
优先级
当有两个选择器同时选中一个标签时，这时需要比较那一个选择器的优先级更高
属性
css中有许多属性来需要我们记住并使用它去优化我们的页面，总结了一些容易忘记和比较难理解的知识
- overflow(设置内容超出部分的显示效果)
overflow: visible; /*超出部分可见*/
overflow: hidden; /*超出部分隐藏*/
overflow: scroll; /*显示滚动条*/
overflow: auto; /*根据内容是否超出来显示滚动条*/
- 元素本身隐藏属性
visibility: hidden; /*元素隐藏，占位置*/
display: none; /*元素隐藏，不占位置*/
- 图片（装饰）垂直对齐方式
vertical-align: baseline; /*基线对齐*/
vertical-align: top; /*顶部对齐*/
vertical-align: middle; /*中部对齐*/
vertical-align: bottom; /*底部对齐*/
