元素三大特性--继承性
继承性：子元素有默认继承父元素样式的特点（子承父业） 可以继承的常见属性(文字控制属性都可以继承)
以下也是一些常见有继承性的属性 color: red; font-style: italic; font-weight: 700; font-size: 30px; font-family: 隶书; text-align: center; text-indent: 2em; line-height: 100px; */
注意点：可以通过调试工具判断样式是否可以继承
p标签中不要嵌套div、p、h等块级元素
a标签不能嵌套a标签
如果有浏览器的默认样式就无法继承 如 a标签 默认蓝色 h系列默认大小 -->
div的标签高度不能继承 但宽度有类似的继承效果 因为div的特性 独占一行 -->
常见应用场景：
-
可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
-
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
好处：可以在一定程度上减少代码
继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
-
a标签的color会继承失效
其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
-
h系列标签的font-size会继承失效
其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
层叠性
特性：
-
给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
-
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
<style>
/* 最开始是白色 但是当下方有同样的样式修改 下面的会覆盖上面的属性 */
.box{
color: #fff;
}
.box{
color: #ccc;
}
.box{
color: red;
}
.box{
color: aqua;
}
</style>
优先级
7、!important 最强外挂 优先级最高
1、继承性 <2、通配符选择器 <3、标签选择器 <4、类选择器 < 5、ID选择器 <!-- 6、行内样式 --<7、!important 最强外挂 优先级最高
只要是继承优先级都是最低的
权重叠加计算公式 在复合选择器中，
比较数字，行内样式的个数 ID选择器的个数 类选择器的个数 标签选择器的个数
第一级若都为0 第二级为有一行数字大就后面不对比 全相同就以层叠性计算
!important如果不是继承 则权重最高 天下第一
<style>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
</style>
盒子模型
➢ CSS 中规定每个盒子分别由：
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型
盒子模型 边框
盒子模型 边框粗细：border-width;
边框样式：border-style
实线：solid 虚线：dashed 点线：dotted 边框颜色：border-color;
border-style: solid;实线
border-style: dashed;虚线
border-style: dotted;点线
border-color: coral;边框颜色
border: 10px solid blue;
border: 1px solid #000;
连写方式 1、border：➕数字➕样式➕颜色
2、快捷键 bd ➕回车
直接默认形式出来
边框单方向设置➕连写方式 :
div{
/* 单方向加属性连写 下 */
border-bottom: 1px solid red;
/* 单方向加属性连写 上 */
border-top: 1px solid red;
/* 单方向加属性连写 左 */
border-left: 1px solid red;
/* 单方向加属性连写 右 */
border-right: 1px solid red;
}
width 和 height 是盒子内容区域的大小
border的设置会把盒子撑大
盒子实际大小初级计算公式 : 盒子内容宽度➕左边框➕右边框等于实际宽度 高度同样
盒子模型 内边距
padding:代表内边距 取值1-4个值 上右下左 顺时针方向计算
padding: 10px;
如果只想一个方位，那就padding➕方位再➕数字px
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子(块级元素)
盒子模型 自动内减
/* 清除标签默认 margin: 和padding 可以让盒子和顶部的间隙清除*/
/* css3盒子模型 属性名：box-sizing: 属性值：border-box; 自动内减 输入以下单词 那么宽高就是盒子实际大小
外边距 合并于折叠现象
垂直布局 的 块级元素，上下的margin会合并
只给其中一个盒子设置margin即可 margin：100px
互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
解决方法：
-
给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
/* 1、给父元素加内边距 */ -
给父元素设置overflow：hidden
/* 2、直接给父元素设置解决塌陷现象 overflow: hidden; 溢出隐藏的意思*/ -
转换成行内块元素
/* 3、加边框 border: 1px solid red; */ -
设置浮动
行内元素的margin和padding无效情况
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
top 上 bottom下 left左 right 右
margin（外边距）单方向设置方式
margin-left:100px 让当前盒子水平往右移动
margin-right:100px 让右边的盒子水平往右移动
margin-top:100px 让当前盒子垂直往下移动
margin-botton:100px 让下面的盒子垂直往下移动
结构伪类选择器
找到一个子元素 并且是li标签
first-child 表示第一个子元素的意思 如：li:first-child;
last-child 表示最后一个子元素的意思 last 表示找最后
nth-child(数字) 表示寻找第几个 括号里写那个数字 就是找第几个
如：li:nth-child(3) 最方便 想找那个写那个数字
li:nth-child(数字) 可以用这个 也可以nth-last-child（倒数数字）
标签:nth-of-type(数字) 表示只会找一个标签名的排序 中间有其他类标签名都不计算
/* 找到偶数个li 如： 2 4 6 8 10*/
/* li:nth-child(2n)
/* 或者括号里填写 even也是一样效果 even偶数的简写 */
/* li:nth-child(even)
/* 找到奇数个li 括号里写 2n+1 或者2n-1 或者odd也是可以的*/
/* li:nth-child(2n+1)
/* 找到前五个li 括号里写-n+数字 找前多少个就写数字几 */
li:nth-child(-n+5)
找到第五个往后li 括号里写n+数字 找后多少个就写数字几 */
li:nth-child(n+6)
/* nth-last-child（倒数数字）找倒数 */
/* 让ul的第一个li里的 第三个a变红 */
1 ul li:nth-child(1) a:nth-child(3){ color: aqua; }
2 ul li:first-child a:nth-child(4){color: brown;}
/* 两种写法都可以 但第一种更方便 */
伪元素
单伪元素
::before代表父元素前面加内容 ::after 代表后面的内容
必加属性 content 才能生效 转化为块元素或行内元素 宽高才能生效
/* 伪元素必须添加content才能生效 里面可以不写文字只加引号‘’ */
标签名或类名::after{
content: '';
display: block;
优点：项目中使用，直接给标签加类即可清除浮动
浮动
浮动的代码
属性名 ：float 属性值 left 左浮动
属性名 float 属性值 right 右浮动
float: left; 左浮动 float: right; 右浮动 （浮动之后 行内元素可以设置宽高 但不能通过text-align:center或margin：0 auto 居中 但里面的文字可以）
书写网页导航步骤：
清除默认的margin和padding
找到ul，去除小圆点 list-style：none
找到li标签，设置浮动让li一行中显示
找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
方法一：给a标签设置 display : inline-block
方法二：给a标签设置 display : block
方法三：给a设置 float : left （浮动）
浮动导航
1、给父元素设置高度就可以清楚浮动带来的影响 缺点比较固定高度 2、在父元素的内容最后添加一个额外标签块元素 clear：both 清楚浮动影响
如：父元素最后 <div class="blue"></div>
css .blue {
clear:both;
}
3、单伪元素清除法
类名::after{
｛必须添加｝content: '';
｛转化块元素｝display: block;
clear：both；｝
4、双伪元素清除法 （也可以清除margin塌陷的现象）
.clearfix::before （清除margin外边距塌陷的现象）
.clearfix::after{content: '';
display: block;
｝ （清除浮动 ）
.clearfix::after｛
clear：both；｝
/* 以下两个作用是补充代码 让伪元素的内容看不到 消除 避免小众浏览器解析错误 */
/* height: 0;
visibility: hidden; */｛隐藏｝
清除浮动 （但浮动一多 在开发中多用 伪元素去使用）
直接给父元素设置 overflow : hidden 最方便
定位
定位属性名 position 水平方位 left（左）right（右）
垂直方位 top（上） botton（下） 数字➕px 设定定位方式 position➕偏移值 上下左右
静态定位 属性值 static
静态定位就是之前标准流，不能通过方位属性进行移动
position:static
相对定位 属性值 relative
相对于自己原来位置进行移动 用于小范围的移动 无脱标
position:relative
绝对定位 属性值 absolute
默认相对于浏览器可视区域进行移动 在页面中不占位置 → 已经脱标 相对 最近的有定位的祖先元素进行移动
position:absolute
子绝父相 （子元素：绝对定位 父元素：相对定位）
父元素是相对定位，则对网页布局影响最小
子绝父相水平居中 ：先让子盒子往右移动父盒子的一半 left：50% 再让子盒子往左移动自己的一半：transform：translateX(-50%)
固定定位 属性值 fixed
脱标 根据浏览器窗口固定位置 具备行内块元素 可以设宽高
position:fixed;
装饰
居中
vertical-align: middle;
顶对齐
vertical-align: top;
底部对齐
vertical-align: bottom;
vertical-align: （上中下） 让图片文字居中 基线对齐 浏览器默认把行内 行内块元素和图片当成文字处理
光标
属性名：cursor 属性值：
pointer｛小手效果 提示用户可以点击｝
text ｛工字型 提示用户可以选择文字｝
move ｛十字光标 提示用户可以移动｝
图片 盒子等 隐藏
/* 占位隐藏 不显示但占位置 不常用*/
/* visibility: hidden; */
/* 常用 display: none; 不占位隐藏 */
display: none;
/* 溢出隐藏 */
/* overflow: hidden; */
/* 溢出隐藏且显示滚动条 */
/* overflow: scroll; */
/* 根据是否溢出自动显示或隐藏滚动条 */
input:focus{
/* 聚焦 focus
失去焦点 blur 基本不用 */
background-color: #ccc;
}
/* 整体透明度 */
**opacity: 0.5;**
透明度 遮罩
background-color:rgba(255, 0, 0, 0.5)
定位层级
z-index 必须配合定位使用 z-index默认数值为0 当层级都相同 谁得数值大 谁就在上面
画三角形
/* padding: 10px; */
/* solid实线 dashed虚线 dotted点线 */
/* border-top: 30px solid orange; */
transparent 让边框透明
边框圆角
border-radius: ; 数字加px 或百分比
边框合并 ：border-collapse: collapse;
背景图缩放
/* 等比例缩放 若宽满足 高过高会有留白 */
background-size: contain;
/* 等比例缩放 直至覆盖盒子 若盒子比例不一致 会有部分图片显示不出 */
background-size: cover;
/* 图片大小 */
background-size: 10px;
/* 相对于盒子的宽高百分比 */
background-size: 70%;
盒子阴影
x偏移 y偏移 模糊 面积 颜色
box-shadow: 5px 5px 5px 5px skyblue inset;
(inset 内部阴影) 不加inset 即是外部阴影
过度
鼠标悬停 过度让宽高变为 宽200 高600 过度时间
属性名 transition 数字➕秒 过度时长
属性单个隔开用逗号， 或用all 代表所有属性
a:hover{
transition: width 2s, height 1s,background-color 1s ;
transition：all 2s（秒）
}
