这是我参与第四届青训营笔记创作活动的第3天。
块元素和行内元素
块元素
高度，宽度，内外边距都可以控制 宽带默认是容器（父级宽度的100%） 本身是一个容器，里面可放块元素和行内元素 文字类元素里不能放块元素 比如p和h1
行内元素
无法设置高度宽度 容纳文本和其他行内元素 注意：链接里面不能放链接 特殊情况a里面能放块元素，但是给a转换一下块级模式更安全
行内块元素
如img，input等 一行可多个，宽度默认但可调，
显示模式的转换
<style>
/* 行内元素转化为块元素 */
a {
height: 100px;
width: 100px;
background-color: red;
display: block;
}
/* 块元素转化为行内元素 */
div {
height: 100px;
width: 100px;
background-color: yellow;
display: inline;
}
/* 行内元素转化为行内块元素 */
span {
height: 100px;
width: 100px;
background-color: green;
display: inline-block;
}
</style>
<!-- 比如扩大a链接的范围 -->
<a href="#">这是范围变大的链接</a>
<div>这个div高度宽度变成无法调整的了</div><br>
<span>1</span><span>2</span><span>3</span>
背景
<style>
div {
/* background-color: transparent;透明 */
background-color: blue;
}
</style>
背景图片
<style>
div {
width: 20rem;
height: 900px;
background-color: pink;
/* 默认是平铺充满盒子 */
background-image: url(../imgs/img2.jpeg);
/*不平铺*/
background-repeat: no-repeat;
/* 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 沿着y轴平铺 */
/* background-repeat: repeat-y; */
/* background-position */
/* 参数是方位名称 */
/* 靠上居中 顺序无关 省略的默认居中*/
/* background-position: center top; */
/* 靠左居中 */
/* background-position: center left; */
/* 参数是精确单位 x y*/
/* background-position: 20px 50px; */
/* 参数是混合单位*/
background-position: 20px center;
}
</style>
<div>哈哈哈哈哈哈哈哈哈哈哈哈</div>
背景图片附着
<style>
p {
color: blue;
}
body {
background-image: url(../imgs/img1.jpg);
background-repeat: no-repeat;
background-position: center top;
color: #fff;
font-size: 20px;
/* 不固定背景图片 */
background-attachment: scroll;
/* 固定背景图片 */
background-attachment: fixed;
}
</style>
<p>111</p>
.......很多行
背景标签复合写法
<style>
/* 习惯约定顺序是 颜色 地址 平铺 滚动 位置 */
body {
color: #fff;
font-size: 20px;
background: pink url(../imgs/img1.jpg) no-repeat fixed center top;
}
</style>
背景颜色半透明
<style>
div {
width: 700px;
height: 700px;
/* 背景半透明，不影响盒子内容 */
background: rgba(0, 0, 0, .3);
/* background: pink url(../imgs/img1.jpg) no-repeat fixed center top; */
}
</style>
一个案例
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 58px;
color: white;
text-decoration: none;
}
.nav .bg1 {
background: url(../imgs/img1.jpg);
}
.nav .bg2 {
background: url(../imgs/img2.jpeg);
}
.nav .bg1:hover {
background-image: url(../imgs/img3.jpg);
}
.nav .bg2:hover {
background-image: url(../imgs/img3.jpg);
}
</style>
<div class="nav">
<a href="#" class="bg1">导航</a>
<a href="#" class="bg2">导航</a>
<a href="#" class="bg1">导航</a>
<a href="#" class="bg2">导航</a>
<a href="#" class="bg1">导航</a>
</div>
CSS三大特性
1.层叠性
相同选择器冲突选最近，覆盖相同的
<style>
div {
color: pink;
}
div {
color: blue;
font-size: 20px;
}
</style>
<!--blu-->
<div>哈哈哈哈哈哈</div>
2.继承性
如text-，font-，line-，color
<style>
body {
color: pink;
font: 40px/1.5;
}
div {
/* 子元素继承了父元素body的行高1.5 */
/* 这个1.5就是当前元素文字大小font-size的1.5倍 所以当前div的行高是21*/
/* 自动调整行高 */
font-size: 14px;
}
p {
font-size: 50px;
}
</style>
<div>wwwwwwwww</div>
<!-- p里面的文字会继承body的某些样式 -->
<p>hhhhhhhhh</p>
3.优先级
选择器不同，根据选择器权重执行 从低到高分别为： 继承或* 0000 元素选择器 0001 类选择器,伪类选择器 0010 id选择器 0100 行内样式style 1000 !important 无穷大
div {
color: pink !important;
}
.text {
color: red;
}
#demo {
color: green;
}
<!--pink-->
<div class="text" id="demo" style="color: grey;">hhhhhhhhhhhh</div>
权重的叠加
<style>
/* 复合选择器会有权重叠加的问题 没有进位*/
/* 权重：0 0 0 1 */
li {
color: red;
}
/* 权重：0 0 0 1+0 0 0 1=0 0 0 2 */
ul li {
color: green;
}
/* 权重：0 0 1 0+0 0 0 1=0 0 1 1 */
.nav li {
color: blue;
}
/* div ul li 0003 */
/* .nav ul li 0012 */
/* a:hover 0011 */
/* .nav a 0011 */
</style>
<!-- blue -->
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
案例
<style>
/* 权重为11 */
.nav li {
color: red;
}
/* 只改了字号,颜色还是红色 */
/* 权重为10 */
/* .pink {
color: pink;
font-size: 100px;
} */
/* 改成 */
.nav .pink {
color: pink;
font-size: 100px;
}
</style>
<ul class="nav">
<li class="pink">1</li>
<li>2</li>
<li>3</li>
</ul>
未完。。。（有点多）
