CSS--常用属性
2018-08-15 本文已影响6人
GHope
选择器的权重
选择器的权重：
类型选择器（元素选择器）：0001
class选择器：0010
id选择器：0100
层级（包含）选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重的值大，谁的优先级就高
布局
标准流:
块标签一个占一行,从上往下布局.
行内标签一行可以显示多个,从左往右布局,知道遇到边界就自动换行.
脱流:浮动、定位.
1.浮动：
让竖着显示的标签横着来,块的默认宽度是内容的宽度.
float：left和right.
注意：
a.如果要使用浮动，那么同一级全部浮动.
b.如果父标签浮动，那么子标签的位置会跟着一起动.
c.布局顺序：从上往下，从左往右.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#red {
float: left;
}
#green{
float: left;
}*/
/*#top{
float: left;
background-color: red;
height: 140px;
width: 100%;
}
#m1{
float: left;
height: 500px;
width: 20%;
background-color: palegoldenrod;
}
#m2{
float: left;
height: 500px;
width: 60%;
background-color: yellowgreen;
}
#m3{
float: left;
height: 500px;
width: 20%;
background-color: gold;
}
#button{
float: left;
height: 140px;
width: 100%;
background-color: black;
}*/
#top{
float: left;
background-color: red;
width: 100%;
height: 99px;
}
#l1{
float: left;
background-color: black;
width: 20%;
height: 800px;
}
#lt2{
float: left;
background-color: gold;
width: 80%;
height: 200px;
}
#l2t3{
float: left;
background-color: skyblue;
width: 60%;
height: 600px;
}
#lt3{
float: left;
background-color: green;
width: 20%;
height: 200px;
}
#l3t4{
float: left;
background-color: aqua;
width: 20%;
height: 400px;
}
</style>
</head>
<body>
<!--<div id="red" style="width: 100px;height: 80px;background-color:red;">
</div>
<div id="green" style="width: 400px;height: 200px;background-color:yellowgreen;">
</div>-->
<!--<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="button"></div>-->
<div id="top"></div>
<div id="l1"></div>
<div id="lt2"></div>
<div id="l2t3"></div>
<div id="lt3"></div>
<div id="l3t4"></div>
</body>
</html>
浮动练习
清除浮动：是指清楚因为浮动而产生的问题（高度塌陷） -- 问题不是什么时候都会产生
如何清除：
one----添加空盒子
在父标签（高度塌陷的标签）的最后添加一个空的div并且设置这个div的样式表：clear: both)
可能会产生大量代码
two----设置overflow: hidden
在父标签（高度塌陷的标签）的样式表中设置overflow: hidden
there----万能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清楚浮动*/
/*.clear{
overflow: hidden;
}*/
/*万能清楚*/
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div id="" style="height: 100px;background-color: red;"></div>
<div id="" style="background-color: rosybrown;" class="clear">
<div style="width: 30%;background-color: palegoldenrod;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: gold;height: 200px;float: right;"></div>
<!--添加空盒子-->
<!--<div id=""style="clear: both;"></div >-->
</div>
<div id="" style="height: 100px;background-color: black;"></div>
</body>
</html>
未清除前
清除后
浮动小应用
文字环绕：被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#image{
float: left;
width: 80px;
height: 60px;
}
.img{
float: left;
width: 80px;
height: 60px;
}
#word{
}
</style>
</head>
<body>
<div id="image">
<img src="img/dx.jpg" class="img"/>
</div>
<div id="word">
第一次工业革命，是标准化，以织布的珍妮纺织机为代表，所有人做同一个工作，生产同一种产品，满足同一种需求。<br />
第二次工业革命，是流水线，以福特汽车工厂为代表，通过分工，生产复杂的产品，满足更高的需求。<br />
第三次工业革命，是互联网化，以微软英特尔为代表，通过分工，生产复杂的模具，再通过大规模复制，满足更广泛的需求。<br />
第四次工业革命，是智能化，通过分工，生产复杂的模具，再通过大规模复制，满足不同人各式各样的需求。<br />
</div>
</body>
</html>
文字环绕
2、定位
1、距离
top:标签顶部距离其它标签的位置
bottom:标签的底部距离其它标签的位置
left:标签的左边距离其它标签的位置
right:标签的右边距离其它标签的位置
2、position（参照物）
想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方法
----initial:（默认值）没有参考对象
absolute:相对第一个position值是非static的父标签进行定位
relative:正常位置定位（按标准流定位）
fixed:相对于浏览器定位
sticky:粘性定位(relative与fixed的结合体，一屏范围内relative,超出则为fixed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: greenyellow;
top: 120px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: gold;
right: 20px;
bottom: 50px;
}
#d3{
position: sticky;
top: 50px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="d3" style="height: 60px;background-color: plum;">
</div>
<div id="" style="height: 1000px;">
</div>
</body>
</html>
定位.gif
布局小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div{
float: left;
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
#d0{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d0" style="width: 500px;background-color: skyblue;">
<!--<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>-->
<script type="text/javascript">
for (var i = 0; i < 10; i++) {
document.write("<div></div>")
}
</script>
</div>
</body>
</html>
效果展示
display
1、HTML中标签分为块和行内
2、CSS中标签分为3类：块、行内块、行内（用display表示）
PS：在标准流中适用
block:块（一个占一行，默认宽是100%，高度视内容而定；直接设置宽高有效）
inline-block:行内块（N个占一行，默认宽，高度视内容而定；直接设置宽高有效）
inline:行内（N个占一行，默认宽，高度视内容而定；直接设置宽高无效）
通过改变标签的display的值，可以让一个标签在块、行内块和行之间切换
注意：inline-block右边默认有一个间隙，目前不能清除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 150px;
background-color: lightcyan;
}
</style>
</head>
<body>
<span id="" style="background-color: gold;display: inline;">
呼儿将出换美酒
</span>
<span id="" style="background-color: red;display: block;">
与尔同销万古愁
</span>
<div id="">
古来圣贤皆寂寞<br />
惟有饮者留其名<br />
</div>
</body>
</html>
diaplay
盒子模型
每一个标签都是由4个部分组成的：
1、内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2、内边距（padding):可见的，不能显示内容（通过设置padding来改变其值，默认是0）
3、边框（border）:可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4、外边距（margin）:不可见，但是会占据浏览器的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*关闭自带的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color: red;
/*设置内容大小*/
width: 100px;
height: 100px;
/*padding的值有四个，可以单独设置，也可以一起设*/
padding:20px ;
/*四周设置*/
padding: 20px,40px;
/*设置上下，左右*/
padding-left: 20px;
/*左*/
/*边框，
* 可以单独设置，也可以一起设
* 格式：宽度 样式 颜色
* a.样式 solid--实线 dotted--点状线 double--双线 dashed--虚线
* */
border-left: 10px dashed green;
border: 10px dashed green10px dashed green;
/*外边距*/
margin-left: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="">
abc
</div>
</body>
</html>
盒子模型
居中
设置居中：
1、垂直居中
a.固定标签高度
b.设置line-height的值和高度一样
2、水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
line-height: 100px;
background-color: hotpink;
text-align: center;
}
p{
display: inline-block;
height: 50px;
line-height: 50px;
width: 200px;
background-color: lavender;
text-align: center;
}
</style>
</head>
<body>
<div id="">
<p>花间一壶酒，独酌无相亲。</p>
</div>
</body>
</html>
居中
