前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器
1.统配选择器
控制html,body及body内跟显示相关的标签
*{
width:80px;
height:80px;
background-color:red;
}
2.类选择器
以class起名的标签,控制class名匹配的标签
(因为标签的class名可以重复)
<div class="foo">123</a>
.foo{ width:80px;
height:80px;
background-color:pink;
}
3.id选择器
以id起名的标签,控制id匹配的标签(id通过css控制是不可以重复的)
<div class="foo" id="heh">456</div>
#heh{width:80px;
height:80px;
background-color:yellow;
}
4.行间式选择器
<div style="width:80px;height:80px;background-color=green;">789<div>
选择器优先级
1.行间式选择器 2.id选择器 3.类选择器 4.统配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{width: 80px;
height:80px;
background-color: blue;}
.foo{width: 80px;
height:80px;
background-color: yellow}
#heh{
width: 80px;
height:80px;
background-color: green;
}
</style>
</head>
<body>
<div style="width: 80px;height: 80px;background-color: red">123</div>
<div class="foo">456</div>
<div id="heh">789</div>
<div>101112</div>
</body>
</html>
#总结,控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
统配<标签<class<id<行间式<!important
*{width:80px;height:80px;background-color:yellow!important;}
#important写在属性值后和;之间
长度与颜色
长度单位:px mm cm em rem vw vh in
vw(百分比宽度,跟整个页面的宽)
vh(百分比高度,跟整个页面的高)
颜色:①颜色单词 red yellow green
②#号十六进制数 范围(000000-FFFFFF)
abc = aabbcc
③三原色rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1)
最后一个参数,透明度,1不透明,0全透明
显示方式display
标签的分类:
一.单双标签:
单标签:br,hr,img,meta,link
功能具体,不需要内容,设置为单标签,单标签结束符在标签尾部,可以省略
主功能
双标签:h1,span,p,div
具有子标签,包含内容,设置为双标签,双标签首尾分离
主内容
二.通过display属性值进行划分
inline block inline-block
①inline :同行显示,支持部分css样式(不支持宽高),宽高由文本内容撑开
②block:异行显示,支持所有css样式,设置了宽高就采用设置的值,宽高由默认的特性
③inline-block:同行显示,支持所有css样式,设置了宽高就采用设置的值
inline-block 是以文本内容作为对齐标准的,要更改对齐标准,需要使用属性vertical(垂直)-align(对齐)
四种属性值baseline(文本底端对齐 默认值)
top:标签顶端对齐 middle:标签中线对齐
bottom:标签底端对齐
总结:带有inline的会同行显示,带有block的支持所有css样式
带有inline的与内容相关,默认对齐标准以内容为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
width:80px;
height:80px;
background-color: red;
}
div{
width:80px;
height:80px;
background-color: yellow;
display: inline-block;
vertical-align: top;
}
img {
width:80px;
}
</style>
</head>
<body>
<span>123456</span>
<span>123456</span>
<div>123456</div>
<div>123456</div>
<img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
</body>
</html>
嵌套关系
页面就是由标签一层层嵌套关系形成
嵌套关系有一定的规则:
1.inline类型只嵌套inline类型的标签
理解:inline就是同行显示,目前的标签<span></span>是同行显示,不常用,而且也不会嵌套标签在其内部
2.inline-block类型,不建议嵌套任意标签,所以系统的inline-block都设计成了单标签(默认宽高)
理解:单标签,我们学了meta,img,link等都是Inline-block类型,都是单标签,自然不会再嵌套标签在其内部
3.block类型可以嵌套任意类型标签(hn,p一般只嵌套inline标签)
最常用的div就是block类型,支持所有css样式,可以嵌套任意类型
如何让div中的内容同行显示,就需要用到盒模型,来配置我们的标签内容
盒模型
1.由四部分组成:
margin :外边距,控制盒子的位置(布局),通过左和上控制自身位置,通过右和下影响兄弟盒子位置(划区域)
border:边框,样式/宽度/颜色
padding:内边距,从显示角度控制文本的显示区域
content(文本内容)
注意:margin,padding:起始为上,顺时针一次赋值,不足边取对边
要做到文本内移,设置padding,如果想显示区域不变,相应减少content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:80px;/*content的参数*/
height:80px;
background-color: red;
padding:10px;/*默认四边间距都是10px*/
/*padding: 10px 5px;从上开始,顺时针赋值,上间距10,右间距5,没赋值的对称匹配*/
/*
padding-bottom: 10px;
padding-left:10px ;
padding-right:10px;
padding-top:10px;*/
border: 5px solid yellow;
/*border三个参数,宽度,颜色,样式(实线,虚线等)*/
/*border-color: yellow;
border-style: dotted;
border-width:5px ;*/
margin: 10px 5px;
/*margin-top:20px ;
margin-left:20px ;
margin-right:20px ;
margin-bottom:20px ;*/
}
</style>
</head>
<body>
<div>123456</div>
<div>654321</div>
</body>
</html>
盒模型布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0} <!--将body外框间距变为0-->
div{
width:78px;
height:33px;
background-color: blueviolet;
border: black solid 1px;
}
.d2{margin-left:calc(80px *1) ;
margin-top:-35px;}
.d3{margin-left:calc(80px *2) ;
margin-top:-35px;}
.d4{margin-left:calc(80px *3) ;
margin-top:-35px;}
.d5{margin-left:calc(80px *4) ;
margin-top:-35px;}
.d6{margin-left:calc(80px *5) ;
margin-top:-35px;}
.d7{margin-left:calc(80px *6) ;
margin-top:-35px;}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
</body>
</html>
margin两个坑
1.要求b1与b2上下间距50px时
方法一:将b1底部加长50px margin-bottom: 50px;
方法二:将b2顶部加长50px margin-top:50px ;
坑:当b1底部和b2顶部同时加长50px时,发现两者间距仍然为50px
总结:盒模型上下间距时,会重叠,间距以两者间距离较大距离为最后的间距
左右叠加正常,不会重叠
<!--需求将b1与b2上下间距50px-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;}
.b1{
width: 80px;
height:80px;
background-color: cornflowerblue;
/*第一种方法
margin-bottom: 50px;*/
margin-bottom:50px;
}
.b2{
width: 80px;
height:80px;
background-color: blue;
/*第二种方法
margin-top:50px*/
margin-top:50px ;
}
</style>
</head>
<body>
<div class="b1">1234</div>
<div class="b2">5678</div>
</body>
</html>
第二个坑 :第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
解决方案: 1.父级设置border-top | 2.父级设置padding-top
向左移动不会有相同现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
.main{
width: 400px;
height:400px;
background-color: red;
/*解决方法1,将父标签内边距改变.将父标签与子标签解耦合
padding: 1px;*/
/*解决方法2,设置父标签上边框
border-top:black solid 1px;*/
}
.sub1{
width: 100px;
height:100px;
background-color: blueviolet;
margin-top:50px/*子标签1会带着父标签一起偏移*/
}
.sub2{
width: 100px;
height:100px;
background-color: yellow;
margin-top: 50px;/*子标签2自己移动并不会带动父标签移动*/
}
</style>
</head>
<body>
<section class="main">
<section class="sub1">
</section>
<section class="sub2">
</section>
</section>
</body>
</html>