本章内容
1.选择器进阶
2.背景属性
3.元素显示模式
4.css三大特性
5.盒子模型
选择器进阶
后代选择器
选择器1 选择器2{
属性:属性值;
...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}
子代选择器
选择器1> 选择器2{
属性:属性值;
...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}
并集选择器
选择器1, 选择器2{
属性:属性值;
...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{color:pink;}
交集选择器
选择器1选择器2{
属性:属性值;
...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{
color:green;
}
伪类选择器
选择器:hover{
属性:属性值;
...
}
鼠标经过时候的样式
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；
示例代码:
<h3 class="title">成长守护平台</h3>
.title {
width: 118px;
height: 41px;
/* 背景颜色 */
/* background-color: pink; */
/* 背景图片 */
/* background-image: url(./img/icon.png); */
/* 背景是否平铺 */
/* background-repeat: no-repeat; */
/* 背景位置 */
/* background-position: left center; */
/* 背景简写 */
background: pink url(./img/icon.png) no-repeat left center;
text-indent: 1.5em;
font-size: 14px;
font-weight: 400;
/* 单行文本垂直居中 */
line-height: 41px;
/* 盒子水平居中 */
margin: auto;
}
元素显示模式
根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素
块级元素
块元素特点:
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不能提高继承的优先级 只要是继承 优先级最低.
各个选择器的权重:
标签选择器 0 0 0 1 简单记忆 1
类选择器 0 0 1 0 简单记忆10
id选择器 0 1 0 0 简单记忆100
行内样式 1 0 0 0 简单记忆1000
!important如果不是继承,权重最高
复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
不会有进位的情况，比如 0,0,0, 10
优先级相同,会执行层叠性,写在最后面的会生效.
去除列表标签样式
list-style:none; 清除li标签的样式
盒子模型
盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)
边框(border)
边框属性
边框粗细 边框样式 边框颜色
border-width:5px;
border-style:solid|dotted|dashed
border-color:red
边框简写
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左右的和
<div class="box1"></div><div class="box2"></div>
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
margin-right: 20px;
}
.box2 {
background-color: green;
margin-left: 30px;
}
margin合并现象
垂直布局的块级元素 上下 margin会合并.
最终的距离为margin的最大值
解决办法:
开发避免就可以,只设置一个盒子的上下外边距即可.
<div class="box1"></div>
<div class="box2"></div>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: green;
/* margin-bottom: 30px; */
}
.box2 {
background-color: pink;
margin-top: 40px;
}
margin塌陷现象
互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷
解决办法:
1 给父元素设置 padding-top或 border-top
2 给父元素设置 overflow: hidden;
3 把子元素转换为行内块 display: inline-block;
4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象
<div class="father">
<div class="son"></div>
</div>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 1px; */
/* border-top: 1px solid transparent; */
/* overflow: hidden; */
}
.son {
display: inline-block;
/* float: left; */
margin-top: 20px;
width: 200px;
height: 200px;
background-color: purple;
}
行内元素设置内外边距 无效
水平布局设置 padding和margin 有效
垂直布局设置 padding和margin 无效
如果要垂直布局padding和margin生效解决办法
转换为块或行内块
padding和margin 以后如何选择
父子关系 :padding
兄弟关系: margin
最后是原图(●ˇ∀ˇ●)
