目录
18 css伪类选择器
:link
普通链接状态（主要针对a标签）
<style>
#aaa:link{
color:red;
/* 取消文本的下划线 */
text-decoration: none;
font-weight: 900;
}
</style>:visited
链接访问过后的状态（主要针对a标签）
<style>
#aaa:visited{
color: orange;
}
</style>:hover
鼠标悬停状态
<style>
#aaa:hover{
font-size: 60px;
color: aqua;
/* 改变鼠标样式 */
cursor: move;
}
</style>:active
鼠标按住状态
<style>
#aaa:active{
font-size: 120px;
color: blue;
}
</style>:focus针对表单元素 获取焦点时的状态（针对普通的文本输入框）
<style>
input:focus{
width: 400px;
height: 400px;
background-color: red;
}
</style>
######################################################
<input type="text">
<p>
<input type="radio" name="gender" value="m">男
<input type="radio" name="gender" value="f">女
</p>19 background背景的使用
background 背景的设置：
background-color 背景颜色
背景图片
background-image:url（图片地址）
图片默认按原图大小平铺
背景图片重复模式
background-repeat:
repeat（默认值 横向纵向都重复）
no-repeat（不重复）
Repeat-x（横向重复）
Repeat-y（纵向重复）
背景模式
background-attachment:scroll（默认）|fixed
fixed 背景图片固定 不会随着页面的滚动而滚动
背景位置
background-position
针对不重复的背景图片 所放的位置
方向单词
横向：left center right
纵向：top center bottom
像素值
距离左边的px 距离上面的px
百分比
距离左边的百分比 距离上面的百分比
只写一边 另一边默认center
位置是整数 则往右下角位移
如果是负数 往左上角位移
背景大小
background-size
属性连写
background:color image repeat attachment position/size
20 行高的使用
设置文字水平方向的排列方式
text-align=center;css的行高=文字的上边距+文字的高度+文字的下边距
如果 一个元素内部只有一行文字 那么line-height设置为当前元素高度 单行文本垂直居中对齐
21 标签的嵌套规则
块级标签可以嵌套一切其他标签
行内和行内块 互相之间可以嵌套 但是不能嵌套块级
注意点：
p标签块级元素 但是不能嵌套其他块级 一旦嵌套会出现问题
会出现两对p标签 然后块级元素在p标签之外
22 盒子模型之border边框
border设置盒子的边框属性：
边框分为四个方向：
top right bottom left
| border-top | 设置上边框样式 |
| border-bottom | 设置下边框样式 |
| border-left | 设置左边框样式 |
| border-right | 设置右边框样式 |
边框分为三个属性：
边框颜色 边框样式 边框宽度
border-top-color：上边框颜色
border-top-style:上边框样式 solid dotted dashed double
border-top-width:px值 上边框宽度
四个方向连写：
border:width style color;表示四个方向统一设置
三个属性连写：
border-方向：width style color
23 盒模型之内边距
padding内边距：
当前盒子内的内容到盒子边的距离
分为四个方式
padding-left
padding-right
padding-top
padding-bottom
属性连写
padding:四个值
上 右 下 左
padding:三个值
上 左右 下
padding:两个值
上下 左右
padding:一个值
上下左右
24 padding会撑大盒子的问题
padding会撑大盒子
盒子最终的宽度=盒子自身设置的宽度+左右padding+左右border
盒子最终的高度=盒子自身设置的高度+上下padding+上下border
25 跟随父元素的宽度设置左右padding不会撑大盒子
块级元素不设置宽度时 占满父容器
没有设置宽度的时候 设置左右padding不会撑大当前的盒子
除非设置的左右padding加起来超过了父容器的宽度
<style>
#parent{
width: 500px;
height: 400px;
background-color: red;
}
#son{
/* width: 500px; */
height: 200px;
background-color: blue;
color:#fff;
padding:0 400px
}
</style>
############################################
<div id="parent">
<div id="son">我是div标签</div>
</div>26 padding撑大盒子的问题的解决方式
谷歌盒子模型
盒子最终的宽高=盒子自身的宽高+padding+border
IE盒子模型
盒子最终的宽高=盒子设置的宽高 padding border系统会自动减去
box-sizing:content-box（谷歌盒子模型） border-box（IE盒子模型）
27 margin外边距
margin外边距：
分为四个方向：
margin-left 左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
margin连写
margin: 四个值
上 右 下 左
margin: 三个值
上 左右 下
margin: 两个值
上下 左右
margin: 单个值
上下左右
margin的特殊值
auto 表示外边距自适应 把剩余空间分配给当前外边距的方向
auto针对上下外边距不生效
margin:0 auto; 块级元素 横向居中*非常常用*
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
/* margin-left: 100px;
margin-top: 100px; */
/* margin: 10px 20px 30px 40px; */
/* margin:0 auto; */
}
</style>
###################################################
<div id="box"></div>28 margin之边框合并
<style>
div{
width: 200px;
height: 200px;
border:1px solid #000
}
#box{
background-color: red;
/* margin-bottom: -1px; */
}
#pox{
background-color: #0f0;
margin-top: -1px;
}
span{
display: inline-block;
width: 200px;
height: 200px;
border:1px solid #000
}
.pox{
/* margin-left: -6px; */
margin-left: -1px;
}
</style>
################################################
<span class="box"></span><span class="pox"></span>29 margin之边框塌陷
子元素设置margin-top的时候会带着父元素一起下沉
解决方式：
1 给父元素添加透明的上边框
2 块级格式化上下文(BFC) 清除一些异常的现象
overflow:hidden
<style>
#parent{
width: 700px;
height: 400px;
background-color: blue;
margin: 0 auto;
/* padding-top: 100px; */
/* border-top: 1px solid transparent; */
overflow: hidden;
}
#son{
width: 300px;
height: 300px;
background-color: orange;
margin-top: 50px;
}
</style>
######################################################
<div id="parent">
<div id="son"></div>
</div>30 行内元素上下margin不生效
<style>
span{
/* margin-top: 200px; */
/* margin-bottom: 3000px; */
padding: 5px 50px;
}
.sp1{
background-color: red;
}
.sp2{
background-color: blue;
}
#box{
width: 200px;
height: 200px;
background-color: green;
}
</style>
###########################################
<span class="sp1">我是第一个行内</span><br>
<span class="sp2">我是第二个行内</span>
<div id="box"></div>
<!-- span[class='sp$']{我是第$个行内}*2 -->
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
