伪类元素
伪类选择器
概念
用于向某些特殊的元素添加效果
用:表示
如::hover :fist-child
子主题 3
分类
链接伪元素
类型
a:link
选择所有未被访问的链接
a:visited
选择所有已被访问的链接
a:hover
选择鼠标指针位于其上的链接
a:active
选择活动链接(鼠标按下未弹起的链接)
注意事项
为保证声生效,按照LVHA的顺序声明
:link,:visited ,:hover, :active
结构伪元素
表单伪类
focus伪类选择器
用于获取焦点的表单元素
元素显示和隐藏
页面布局的学习三大核心
盒子模型
浮动
定位
盒子模型
网页布局的本质
网页布局的过程
1.先准备好相关的网页元素,网页元素基本上都是盒子Box
2.利用css设置好盒子的样式,放到相应的位置
3.往盒子里面装内容
核心本质
利用css摆盒子
盒子模型(Box Model)
概念
就是把HTML页面中的布局元素看做是一个矩形盒子,也就是一个盛装内容的容器。
本质
就是一个盒子,封装周围的HTML元素,它包括边框、外边距、内边距和实际内容
组成
border边框
边框的宽度(粗细):border-width
单位:px,一般情况下
边框样式:border-style
实线:solid
虚线:dashed
点线:dotted
双实线:
边框颜色:border-color
边框的复合型写法(边框的简写)
直接写,无先后顺序
边框分开写法
上边框:border-top
下边框:border-bottom
左边框:border-left
右边框:border-right
content内容
margin外边距:盒子和盒子的距离
复合型写法
外边距合并问题
两个响铃元素设置 外边距,不会相加,会以较大一方的外边距作为他们之间的边距。因此,我们只用设置其中一个的外边距
嵌套盒子的垂直外边距塌陷问题
给父元素添加内边距padding
给父元素添加上overflow-hidden
给父元素加上上边框
padding内边距
:内容和边框的距离(复合型写法:四个值:上 右 下 左;三个值:上 左右 下;两个值:上下 左右;一个值:四个方向内边距的值相同)
块级元素的水平居中
1.盒子必须制定了宽度
2.盒子左右边距设置为auto
margin:0 auto
子主题 4
实际可见的大小由三个组成
内容
内边距
内边距的值会把元素撑大
边框