前言：此文章为在校期间老师所授，记录着课堂知识。
盒子与块
继续css
交集并集选择器
<style type="text/css">
p span{
background-color: pink;
}
p，span{
background-color: pink;
}
</style>
p,span 并集选择器 （p标签和span标签都生效）
p span 交集选择器 （p标签下的span标签生效）
默认的全局*
<style type="text/css">
*{
text-decoration: line-through;/* 字是横穿线 */
background-color: skyblue;
}
</style>
*{}：全局生效
（当然依然遵循就近原则，很多时候会被顶掉）
盒子
div盒子属性
<body>
<div>
第一个div
</div>
</body>
直接在body里面写div标签，不会发生什么。
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #FFC0CB;
}
</style>
在head里面加入div，输入高度和宽度，再加背景颜色之后：
这是一种方法。变成一个块，盒子模型。
还有另一种：
<style type="text/css">
div{
width: 100px;
height: 100px;
border: solid 3px #87CEEB;
}
</style>
不选择背景颜色，换成了边框。
但现在这样，和浏览器的边缘都有一些距离，若去掉距离需要：
*{
margin: 0;/* 你的块和边框的距离,盒子和盒子直接的距离 */
padding: 0;/* 内容与盒子直接的距离 */
}
需要再加个*{}里面的margin为0即可。
这样就没有距离了。
margin 盒子的距离问题
<body>
<div class="one">
第一个div
</div>
<body>
先在body里整一个div。然后在上面写出样式：
.one{
margin-top: 50px;
margin-left: 100px;
margin: 50px 100px 50px 100px;
}
margin-top：盒子距离上面盒子的距离
left：距离左边
right：距离右边
bottom：距离下面
若并没有写方位，
margin: 50px 100px 50px 100px;
margin：上， 右， 下， 左。
若写了一个，
margin：50px
则四个方位都是50px。
若写了两个，
margin：50px，100px
则上下50px，左右100px。
若写了三个，
margin：50px，100px，150px
margin：上50px，左右100px，下150px。
2个块的话，一个写距离上面50px，一个写距离下面100px，取最大值，最后两个距离100px。
padding 块和边框的距离
和上面margin类似，不过padding改变的是内容和边框的距离。
padding: 50px 100px ;
上下距离50px，左右距离100px
蓝色：原来的块，高100宽100。
绿色：padding，距离边框上下50px，左右100px。
float: left;
漂浮。
clear:清除漂浮
position 相对，绝对和固定定位
.one{
position: relative;
top:10px;
left:10px;
}
.two{
position: absolute;
top:100px;
left:100px;
}
relative：相对的，从原来的位置开始移动。
absolute：绝对的，从浏览器最左上角开始移动。
原先的位置：
加入relative，absolute之后：
还有fixed，固定定位。
.as{
position: fixed;
top: 300px;
left: 20px;
border:solid 0.1875rem red ;
}
效果就是一直待在你设的地方，不管鼠标怎么滑动，就好像网页上面跟随的广告一样。
重叠
有时候div会重叠，怎么决定谁在上谁在下呢？
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.one{
background-color: #87CEEB;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
.two{
background-color: #FFC0CB;
position: absolute;
top: 50px;
left: 100px;
z-index: 0;
}
</style>
设置z - index，值越小越在最底下。
默认：
设置之后：
嵌套
<style type="text/css">
.my{
width: 400px;
height: 400px;
border: solid 3px red;
margin-top:200px ;
margin-left: 400px;
}
.div1{
width: 150px;
height: 30px;
border: solid 3px black;
margin-top:100px ;
margin-left: 150px;
}
.div2{
width: 150px;
height: 30px;
border: solid 3px black;
margin-top: 20px;
margin-left: 150px;
}
</style>
无非是套来套去，感觉没什么难度…
<body>
<div class="my">
<div class="div1">div1</div>
<div class="div2">div1</div>
</div>
</body>
（嵌套的课上练习）
<html>
<head>
<style type="text/css">
.my{
width: 700px;
height: 400px;
border: solid 4px black;
margin-top:200px ;
margin-left: 600px;
}
.div1{
width: 300px;
height: 28px;
border: solid 3px black;
margin-top:50px ;
margin-left: 300px;
position: absolute;
}
.div2{
width: 300px;
height: 28px;
border: solid 3px black;
margin-top: 100px;
margin-left: 300px;
position: absolute;
}
.div3{
margin-top:30px ;
margin-left: 150px;
width: 100px;
height: 50px;
position: absolute;
}
.div4{
margin-top: 80px;
margin-left: 150px;
width: 100px;
height: 50px;
position: absolute;
}
.div5{
margin-top: 200px;
margin-left: 310px;
width: 100px;
height: 60px;
position: absolute;
border: solid 3px black;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="my">
<form>
<div class="div1"><input type="text" style="width: 293px;height: 22px;"></div>
<div class="div2"><input type="text" style="width: 293px;height: 22px;"></div>
<div class="div3"><h2>用户名</h2></div>
<div class="div4"><h2>密 码</h2></div>
<div class="div5">
<input type="submit" value="登陆" style="width:100px;height:60px"/>
</form> </div>
</div>
</body>
</html>
div 居中和垂直居中
这里要再次用到margin。
之前说过，margin：20px，20px；
第一个表示上下，第二个表示左右，这时候把第二个换成auto，就会居中。
<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 200px auto;
background-color: #FFC0CB;
}
</style>
如图：
垂直居中
<style type="text/css">
div{
width: 100px;
height: 100px;
border: solid 3px #FFC0CB;
position: absolute;
top: 50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
box-sizing: border-box;
}
</style>
这里先是写了长和宽，为了垂直居中，在最后要减去本来长宽的一半，然后用的绝对定位，定在了中央。
div里面的文字也要居中！
<style type="text/css">
div{
width: 100px;
height: 100px;
border: solid 3px #FFC0CB;
position: absolute;
top: 50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
box-sizing: border-box;
text-align: center;
line-height: 100px;
overflow: hidden;
}
</style>
text-align，设置了水平居中。
line-height，100px。因为本身高100px。
若本文太长则会超出div块，
加上overflow:hidden，就会把超出的隐藏。
若敲入的是英文或者数字，加上下面这个可以把多余的变成…
text-overflow: ellipsis;
内联和块 display和visibility
块元素：
元素总是从一个新行开始显示
高度，行高以及顶、底边距都可控制
宽度缺省是它所在容器的100%，除非设定一个宽度
通常作为其它元素的容器，它可以容纳内联元素和其它块元素
table，div，ol，ul，h1，p…
内联元素：
和其它元素都在一行上
高度，行高以及顶、底边距不可改变
宽度就是它所容纳的文字或图片的宽度，不可改变
一般作为基本元素，只能容纳文本或者其它内联元素
a，img，input，textarea，select，span…
<body>
<div style="display:inline">div1</div>aaaa
</body>
none 隐藏
block 默认 块
inline 内联，不换行
<div style="visibility: visible;">div1</div>aaaa
visibility: hidden; 不显示，页面也空出位置
这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。
迷之问题
*和body的区别
因为*{}里面也算是全局的设置了，< body >里面也算是全局。
<head>
<style type="text/css">
*{
color: red;
}
body{
color: blue;
}
</style>
</head>
<body>
aaa
<p>bbb</p>
</body>
赋予了*标签，也就是所有标签红色。还赋予了body标签蓝色。
结果就是p标签下变成了红色，而aaa变成了蓝色。
< p >标签在< body >标签下。
扫一扫
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
