day22css属性
2018-08-15 本文已影响0人
剑眉星目cz
选择器的权重
类型选择（元素选择器）：0001
class选择器：0010
id选择器：0100
伪类选择器：0001
层级（包含）选择器：多个选择器的权重之和
群主选择器：分开看每个选择器的权重
谁的权重的值大，谁的优先级就高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body #d1{
color: peru;
}
.c1{
color: deepskyblue;
}
#d1{
color: green;
}
a{
color: red;
}
</style>
</head>
<body>
<a href="" id="d1" class="c1">
百度一下
</a>
</body>
</html>
浮动
标准流：块标签是一个占一行，从上往下布局。
行内标签一行可以显示多个，从左往右布局，直到遇到边界自动换行
脱流：浮动、定位
1.浮动：就是让竖着显示的标签横着来
floa：left和right
注意：1.如果要使用浮动，那么同一级的所有的标签都要浮动
2.如果父标签浮动，那么子标签的位置会跟着一起动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#red {
float: left;
}
#green{
float: left;
}
</style>
</head>
<body>
<div id="red" style="width: 100px;height: 80px;background-color: red;">
<a href="">百度一下</a>
</div>
<div id="green" style="width: 200px;height: 180px;background-color: greenyellow;">
</div>
</body>
</html>
文字环绕
文字环绕：被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*被环绕的对象浮动*/
#d1{
float: left;
width:30px ;
height: 30px;
background-color: yellow;
}
#d2{
width: 100px;
}
</style>
<body>
<div id="d1">
</div>
<div id="d2">
顶风违产能法您的书覅就你发你姐倒角机夫飞机您分为你发的水泥水泥地你发觉你境内外
</div>
</body>
</html>
清除浮动
1.清除浮动
指清除因为浮动而产生的问题（高度塌陷）---问题不是什么时候都会产生的
2.怎么清除浮动？
a.添加空的div:
在父标签（高度塌陷的标签）的最后添加一个空的div,并且设置这个div的样式表：clear：both
可能会产生大量的额外的代码
b.设置overflow：
在父标签中设置样式表的overflow的值为hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮动方案2*/
.clear{
overflow: hidden;
}
</style>
</head>
<body>
<div style="height: 100px;background-color: red;"></div>
<div style="background-color: royalblue;"class="clear">
<div style="width: 30%;background-color: peru;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: plum;height: 200px;float: right;"></div>
<!--1.清除浮动方案一-->
<div id="" style="clear: both;" ></div>
</div>
<div style="height: 100px;background-color: green;"></div>
</body>
</html>
display
1.标签分为块和行内
2.在css中标签分为三类：块、行内块、行内（display）
block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定，直接设置宽高有效）
inline-block:行内块(一行可以有多个，默认宽高是内容的宽度，直接设置宽高有效)
inline:行内（一行可以有多个，默认宽高是内容的宽高，设置宽高无效）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
/*display: inline;*/
/*display: block;*/
display: inline-block;
background-color: hotpink;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p id="">
aaa <br />
bbb
</p>
</body>
</html>
定位
1.距离
top:标签顶部距离其他标签的位置
bottom:标签的底部离其他标签的位置
left:标签的左边离其他标签的位置
right:标签的右边离其他标签的位置
2.position
想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方式
--- initial：（默认值）没有参考对象
absolute:相对第一个position的值是非static非initial的父标签进行定位
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: cadetblue;
/*margin-top: 240px;*/
top: 200px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: salmon;
/*top: 100px;*/
right: 20px;
bottom: 50px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2" style="height: 100px;background-color: yellow;">
</div>
</div>
</body>
</html>
relative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div{
float: left;
width: 100px;
height: 100px;
background-color: black;
position: relative;
margin-left:20px ;
margin-top:20px ;
}
</style>
</head>
<body>
<div style="width: 500px;">
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
<script type="text/javascript">
for(var i = 0;i <100;i++)
{
document.write("<div></div>")
}
</script>
</div>
</body>
</html>
盒子模型
每一个标签都是由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: sandybrown;
/*1.设置内容大小*/
width: 100px;
height: 100px;
/*2.padd的值有四个
* 可以单独设，也可以一起设
* */
/*padding-left: 20px;
padding-top: 10px;*/
padding: 100px;/*上下左右的内边距都是10*/
padding: 20px 40px;/*上下是20左右是40*/
/*3.边框
*可以单独设，也可以一起设
*格式：宽度 样式 颜色
* a.样式 solid-实线 dotted-点状线 double-双线 dashed-虚线
* b.
*/
/*单独设置一条边框的宽度、样式和颜色*/
/*border-left:10px solid red;
border-bottom: 8px solid green;*/
/*同时设置四条边框的宽度、样式和颜色*/
border: 3px solid black;
/*同时设置一条边的颜色*/
border-left-color: royalblue;
/*设置整个的弧度*/
/*border-radius: 50px;*/
/*设置某一个角的弧度*/
border-top-left-radius: 300px;
border-bottom-right-radius: 300px;
/*4.外边距*/
margin-top: 100px;
margin-left: 50px;
margin-right: 100px;
/*给所有的外边距设置成一样的值*/
/*margin:上 右 下 左
*margin:上/右 下/左
*/
margin: 20px;
}
</style>
</head>
<body>
<div id="">
abc
</div>
</body>
</html>
居中
1.垂直居中
a.固定标签的高度
b.设置line-height的值和高度一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
width: 100%;
line-height: 100px;
background-color: hotpink;
text-align: center;
}
p{
display: inline-block;
/*垂直居中*/
height: 50px;
line-height: 50px;
width: 300px;
background-color: green;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<p>
床前明月光，疑是地上霜
</p>
</div>
</body>
</html>
