选择器进阶 (选择器之间符号用隔开)
后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器 =复合选择器
后代选择器
后代选择器可以选中子孙后代 选择器与选择器之间用空格隔开 示例: .box a{ color:red; }
子代选择器
子代选择器只能选中亲儿子 选择器与选择器之间用大于号隔开 示例: .box>strong{ color:pink; }
并集选择器
选择器与选择器之间用逗号隔开; 并集选择器每组选择器之间一行写; 最后一个选择器的后面不要加逗号; 并集选择器可以是任意基础选择器和复合选择器的结合 后续把相同的样式进行书写在一起,减少代码的耦合性. 示例 div, p, span, .box p{ color:pink; }
交集选择器
交集选择器可以理解为既又的原则 选择器与选择器之间不需要任何符号,紧挨着一起. 交集选择器如果有标签,必须把标签写在最前面 示例 div.box{ color:green; }
伪类选择器
鼠标经过时候的样式
a:hover{
}
div:hover{
}
.box:hover{
}
:的前面和后面不能有空格
背景属性 考点
背景颜色 背景图片 背景是否平铺 背景位置
背景颜色
background-color: pink;
背景图片
background-image: url(./img/icon.png);
背景是否平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
背景位置
background-position: x y;
背景位置取值:
方位名词:
水平位置:left|center|right
垂直位置:top|center|bottom
background-position:center center;
数字+px:
background-position:10px 20px;
方位名词+数字(px):
background-position:left 30px;
元素显示模式
根据标签不同的特点,我们可以把标签分成不同的种类。主要分为: 块级元素、行内元素、行内块元素
块级元素
块元素特点: 1 独占一行 2 宽度默认是父元素的宽度,高度由内容撑开. 3 可以设置宽高 代表性的标签 div h系列 p li
行内元素
行内元素特点 1 一行可以显示多个,如果一行装不下自动折行(换行显示) 2 宽度和高度默认由内容撑开 3 设置宽高无效 代表性的标签 a span em strong
行内块元素
行内块元素特点 1 一行显示多个 2 可以设置宽高 代表性标签 input button
元素显示模式转换
转换为块级元素
display: block;
转换为行内块元素
display: inline-block;
转换为行内元素
display: inline;
css三大特性 考点
继承性
特性:子元素可以继承父元素的某些特性(某些样式 子承父业)
控制文字的属性都可以被继承,不是控制文字的属性不能被继承
常见继承的属性如下显示:
color: red;
font-style: italic;
font-weight: 700;
font-size: 30px;
font-family: 宋体;
text-indent: 2em;
text-align: center;
line-height: 300px;
继承的特殊情况:
如果浏览器有默认的样式,此时继承依然存在,但是会优先执行浏览器的默认样式
a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.
h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖
高度不能被继承,但是宽度有类似继承的效果
层叠性
相同选择器才会有层叠性
层叠性遵循原则:就近原则.
样式冲突---则层叠(覆盖)
样式不冲突--则叠加(共同作用在一个标签上)
注意:当样式冲突. 只有选择器优先级相同,才会通过层叠性判断.
优先级(权重)
不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.
判断公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
下面方便大家理解,但是不是很规则.
0 < 0 < 1 < 10 < 100 < 1000 < 无穷大
注意:!important不能提高继承的优先级 只要是继承 优先级最低.
border-width:5px;
border-style:solid|dotted|dashed
border-color:red
list-style:none; 清除li标签的样式
盒子模型
盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)
边框(border)
边框属性
边框粗细 边框样式 边框颜色
边框简写
boder:solid 1px red;
无顺序要求
边框单方向设置
上边框
border-top:solid 1px red;
下边框
border-bottom:solid 1px red;
左边框
border-left:solid 1px red;
右边框
border-right:solid 1px red;
盒子实际大小初级计算公式
盒子宽度=左边框+内容的宽度+右边框
盒子高度=上边框+内容的高度+下边框
border可以撑大盒子
如何解决:
1 手动内减
2 测量盒子的时候可以从边框的里面进行量取(不测量边框)
3 自动内减(box-sizing: border-box;)
.box {
width: 400px;
height: 400px;
/* width: 380px;
height: 380px; */
background-color: green;
border: 10px solid #000;
/* css3盒子模型可以解决边框撑大盒子问题(自动内减) */
box-sizing: border-box;
}
内边距(padding)
内容区域到边框的距离
上 右 下 左
padding:10px;
上下 左右
padding:20px 30px;
上 左右 下
padding:20px 30px 40px;
上 右 下 左
padding:20px 30px 40px 50px;
单方向设置
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;
盒子终极计算公式 注意
盒子的宽度=左右边框+左右内边距+左右内容
盒子的高度=上下边框+上下内边距+上下内容
边框与padding不会撑大盒子特殊情况
当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)
此时给左右的边框和左右的内边距不会撑大盒子.
css3盒子模型
边框和内边距都会撑大盒子
解决办法
1 .手动内减
2.自动内减(box-sizing: border-box;)
外边距(margin)
盒子到盒子之间的距离
上 右 下 左
margin:10px;
上下 左右
margin:20px 30px;
上 左右 下
margin:20px 30px 40px;
上 右 下 左
margin:20px 30px 40px 50px;
单方向设置
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;
margin正常现象
水平布局的盒子,左右的 margin值互不影响
最终的距离为margin左右的和
margin合并现象 考点
垂直布局的块级元素 上下 margin会合并.
最终的距离为margin的最大值
解决办法:
开发避免就可以,只设置一个盒子的上下外边距即可.
margin塌陷现象 考点
互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷
解决办法:
1 给父元素设置 padding-top或 border-top
2 给父元素设置 overflow: hidden;
3 把子元素转换为行内块 display: inline-block;
4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象
行内元素设置内外边距 无效
水平布局设置 padding和margin 有效
垂直布局设置 margin 无效
如果要垂直布局padding和margin生效解决办法
转换为块或行内块
padding和margin 以后如何选择
父子关系 :padding
兄弟关系: margin
结构伪类选择器nth-child || nth-of-type
根据HTML结构选择标签,减少对类名的依赖.
结构伪类选择器的权重是0010.
nth-child(n)
1.n 可以是数字, 数字是几,就选择第几个孩子
ul li:nth-child(6) { } 选择第6个孩子
2.n 还可以是 关键字 比如 odd even
/* 选中偶数的孩子 */
ul li:nth-child(even) {
background-color: pink;
}
/* 选中奇数的孩子 */
ul li:nth-child(odd) {
background-color: skyblue;
}
3.n 还可以是 公式。
-
n 是从 0开始 012345...
-
2n 是 偶数
-
2n + 1 是 奇数
-
5n 5的倍数
-
n+5 从第五个开始 包含第五个 一直到最后.
-
-n+5 选中前5个 包含第五个
伪元素
伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.
在父元素内容的最前面添加一个伪元素
E::before{
content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{
content: '';
}
使用伪元素插入必须要指定content属性
标准流
一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.
网页布局: 标准流 + 浮动+ 定位
标准流布局规则
块级元素:
从上往下 垂直布局 独占一行
行内 /行内块元素:
从左往右 水平布局 一行转不下自动换行
浮动
浮动的作用
早期的作用:图文环绕
现在的作用:布局页面,让垂直布局的盒子变成水平布局
浮动的特点
1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.
2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.
3 浮动找浮动(同方向浮动) ,下一个浮动元素会在上一个浮动元素后面左右浮动
4 浮动的元素会受到上面元素边界的影响
5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)
一行可以显示多个,可以设置宽高
块级元素浮动之后不设置宽高,默认由内容撑开
行内元素浮动之后设置宽高有效
浮动注意事项:
1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)
2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.
3 子浮父不浮 兄弟一起浮 一浮全浮
清除浮动
1.设置高度
2.额外标签法
3.单伪元素
4.双伪元素
5.overflow:hidden