CSS 三大特性
(一)、继承性
父亲
<div class="son">儿子</div>
</div>
- 作用 : 子元素可以继承父元素的属性样式
- 什么样的属性可以继承 :
text- 开头的 text-indent、text-align、text-decoration;
font- 开头的 font四个
line- 开头的 line-height
color 都是可以继承的- 应用 : 在写页面之前,,我们一般会通过 body 设置一个字体, 让将来页面上所有的标签都能继承这个属性,统一设置默认页面风格 : 比如
font: bold 40px '楷体' - 特殊性 : [ 介绍底层 ]
- a标签, 本身有自己的颜色, 不能通过继承设置, 如果一定要修改 a 标签的颜色, 直接作用在 a 标签上面
- h标签, 本身有自己的字体大小,不能通过继承设置, 如果一定要修改 h 标签的大小, 直接作用在 h 标签上面 (emhuatu)
- div 的高度如果不能设置,由内容决定 (没有内容, 高度为0), 宽度默认由父元素继承过来
二)、层叠性
- 层叠性 : 是浏览器处理冲突的一个特性
p {
color: red;
}
.red {
font-size: 20px;
color: green;
}
1. 层叠的属性不一样 : 会添加属性
2. 层叠的属性一样 : 会覆盖
<p class="red">小马哥</p>- 作用 : 如果一个属性通过两个选择器设置到同一个元素上面, 那么这个时候, 一个属性会被层叠掉
- 代码 :
/* 优先级的问题 */
.box { background: pink;}
div { background: green;
font-size: 40px;
color: red;
}
div { background: orange;}
<div class="father"></div>
//1. 先测试一个
//2. 再测试上下调换
//3. 再加个类呢?三)、优先级
示例: <h1 class="box" id="box" style="color: pink;">滴,滴滴</h1>
- 哪有可以改变样式的选择器??
- 比较
- 优先级 (理解记忆)
!important > 行内样式 > id > 类 > 标签 > 通配符 * > 继承元素的三种显示方式
一)、行内元素
- 属性: display : inline ;
- 特点 :
1. 一行可以显示多个; (优点)
2. 宽度由内容决定
3. 无法设置宽高 (缺点)- 典型代表 : span, a
二)、块级元素
- 属性 : display : block ;
- 特点 :
- 一行只能显示一个 (算不上缺点)
- 宽度继承父元素
- 可以设置宽高 (优点)
- 典型代表 : div, p, h系列
需求 ??? 设置宽高的导航??????
三)、行内块级元素
- 属性 : display: inline-block ;
- 特点 :
- 一行可以显示多个 (行内)
- 有能设置宽高 (块级)
- 典型代表 : input img , textarea, select, button
四)、三种显示方式的转换
- display: block; 转成块级
- display: inline-block; 转成行内块
- display: inline; 转成行内
<!-- | padding-left的特殊性（盒子大小不会变化会自动加减） |
有一个大盒子 里面有一个小的盒子 | |
小盒子的宽度继承父盒子 | |
小的盒子添加padding-left , 小盒子的尺寸大小W | |
不会发生变化的 | |
--> |
line-height（行高）和font的连写不能居中 因为font-size里面必须要除以/行高的高度
四、margin 的两种特殊现象
一)、外边距合并现象:
// 盒子左右排序
margin-left 和 margin-right 叠加
// 盒子上下排序:
margin-top 和 margin-bottom 合并
// 总结 :
两个div上下排序, 在进行设置 margin-top 和 margin-bottom 的时候,两个margin会产生一个合并的现象, 合并的值以大的为准二)、margin塌陷现象:
如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移
解决方法:
- 给父盒子加一个边框 border-top
- 给父盒子加 padding-top
- 给父盒子设置属性 overflow: hidden => BFC;
- 给父盒子设置浮动 float：left
- 给父盒子设置为行内块 display：inline-block
5. 浮动的特点
标准流: 就是浏览器默认摆放盒子的顺序
- 浮动的元素会脱离标准流 (脱标)
如果一个元素按照正常的标准流来显示, 会在 html 中所属的位置占位, 后面的元素会紧跟着它, 但是浮动脱离了标准流, 将来在看到浮动的元素以后,就不能以正常的标准流来判断了 (浮动的元素在标准流中不占位置了)- 浮动以后的元素, 会覆盖在标准流的元素之上（比标准流高半个级别）
- 浮动的规则: 浮动找浮动, 不浮动找不浮动
- 浮动的重点: 浮动的元素只会影响下面的元素
- 本质 : 浮动的元素受到盒子边框的限制
- 浮动的元素会改变显示方式
不管元素是行内元素还是块级元素将来在显示的时候, 都会在同一行显示
浮动以后的元素可以设置宽高
总结: 浮动以后的元素的显示方式与行内块级元素一样记忆 :
1. 浮动的元素会脱标 ==> 飘起来了 ==> 比标准流高半个级别 ==> 类似行内块的特点
2. 浮动的元素会被盒子的边框限制住;三、清除浮动
浮动对页面的影响:
如果一个父盒子中有一个子盒子, 并且父盒子没有设置高, 子盒子在父盒子中进行了浮动, 那么将来父盒子的高度为0, 由于父盒子的高度为 0, 下面的元素会自动补位, 所以这个时候要进行浮动的清除
浮动: float: left; float: right;
清除浮动: clear: both;- 额外标签法
在浮动的盒子内部最后, 再放一个块级标签, 在这个标签内使用 clear: both; 来清除浮动对页面的影响
注意: 一般情况不使用这种方式清除浮动, 因为这种方式会在页面中添加额外的标签
(在盒子后面加一个空盒子 并且给这个空盒子设置clear：both)
- 使用 overflow 清除浮动
找到浮动盒子的父元素, 再在父元素中添加一个属性, overflow: hidden; 清除父元素中子元素浮动对页面的影响
注意: 一般情况用的也是很多也不用这种方式, 因为 overflow: hidden; 有一个特点, 离开了这个元素所在的区域以后会被隐藏 (后面讲这个方法就懂了)
- 使用伪元素清除浮动
伪元素: 在页面上不存在的元素, 但是可以通过 css 添加上去
种类: 常见的就2种
::after(在...之后)
::before(在...之前)注意:
- 每个元素都可以添加自己的伪元素
- 默认伪元素是行内元素, 可以通过 display 修改
清除浮动:
.clearfix:after {
content: ""; //伪元素必须给这个content=''
display: block; // 必须块级才能清除
clear: both; // 核心代码
height: 0;
line-height: 0;
visibility: hidden;
}- 设置行高 -- 简单粗暴
注意 : 问题? 给谁设置,,, 浮动的父盒子 (height=0 的)
浮动 的不能覆盖文字和行内块
margin和padding在行内元素里使用 左右是有效的上下是无效的。因为行内元素里不可以设置宽高
相对定位（relative）绝对定位（absolute）固定定位（position: fixed）
相对定位是不脱标的 绝对和固定都是脱标的 绝对定位没有父亲的时候相对于浏览器 而固定定位永远都是相对于浏览器的
magin：0 auto 使用的条件 第一：盒子必须有宽度 第二：必须是块级元素
前端html+css几个难点 需要注意的：
定位>浮动>标准
购物车加透明的 用display：none；和display：block：配合 hover
----- 女鞋 ----- 先写一条线 然后 然后再用一个sapn配合定位 然后设置背景透明
滚动条的实现 先写一个盒子 边角都设置成 border-radios：5px。然后再里面设置成背景色 然后4px 0 0 4px
