day03-CSS属性
2018-08-15 本文已影响0人
我是一只菜鳥
1.选择器的权重
类型选择器（元素选择器）：0001
class选择器：0010
id选择器：0100
层级（包含）选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
伪类选择器：0001
谁的权重值大，谁的优先级就高
2.css浮动
标准流：快标签一个占一行，从上往下布局。
行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行
脱硫：浮动、定位
1.浮动：就是让竖着显示的标签横着显示
float: left和right
注意：1.如果要使用浮动，那么同一级都要使用浮动
2.如果父标签浮动，那么子标签的位置会跟着一起浮动
3.布局基本顺序：从上往下，从左往右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top1{
width: 100%;
height: 150px;
background-color: lightskyblue;
float: left;
}
#m1{
width: 20%;
height: 500px;
background-color: lawngreen;
float: left;
}
#m2{
width: 65%;
height: 500px;
background-color: red;
float: left;
}
#m3{
width: 15%;
height: 500px;
background-color: yellow;
float: left;
}
#bottom1{
width: 100%;
height: 100px;
background-color:skyblue;
float: left;
}
#top2{
float: left;
width: 100%;
height: 150px;
background-color: royalblue;
}
#mid1{
float: left;
width: 25%;
height: 500px;
background-color: lawngreen;
}
#mid2{
float: left;
width: 75%;
height: 100px;
background-color: yellow;
}
#mid3{
float: left;
width: 55%;
height: 400px;
background-color: blue;
}
#mid4{
float: left;
width: 20%;
height: 100px;
background-color: greenyellow;
}
#mid5{
float: left;
width: 20%;
height: 400px;
background-color: brown;
}
</style>
</head>
<body>
<div id="top2">
</div>
<div id="mid1">
</div>
<div id="mid2">
</div>
<div id="mid3">
</div>
<div id="mid4">
</div>
<div id="mid5">
</div>
</body>
<!--<body>
<div id="top1">
</div>
<div id="m1">
</div>
<div id="m2">
</div>
<div id="m3">
</div>
<div id="bottom1">
</div>
</body>-->
</html>
3.文字环绕
文字环绕：被文字环绕的标签浮动，文字不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*被环绕的对象浮动*/
#d1{
float: left;
width: 100px;
height: 100px;
background-image: url(../day01-html/img/lufeitongxiang.jpeg);
background-size: 100px 100px;
}
/*文字*/
#d2{
width: 300px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
asdjlf oadfj i ad fajf skjjfljfosd拉萨东方是放假哦收到附件收到附件口萨克附件是否阿斯顿佛科技示范圣诞节佛山警方澳式sdfp asifksjf io案件多发的积分啊发啊发哦是的金佛啊会计法收到附件恺撒奖大佛啊设计费破卡释迦佛看
</div>
</body>
</html>
4.清除浮动
1.清除浮动：是指清除因为浮动而产生的问题（高度塌陷） -- 问题不是什么时候都会产生的
2.怎么清除浮动？
a.添加空的div
在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的clear:both;
问题：可能会产生大量的额外的代码
b.设置overflow:hidden
在父标签中设置样式表的overflow的值为hidden
c.万能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 100%;
height: 150px;
background-color: cornflowerblue;
}
#d2{
width: 100%;
background-color: red;
/*2.清除浮动*/
overflow: hidden;
}
/*3.清除浮动*/
/*.d2:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.d2{
zoom: 1;
}*/
#d2_1{
background-color: greenyellow;
float: left;
}
#d2_2{
background-color: yellow;
float: right;
}
#d3{
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
<div id="d2_1"><img src="../day01-html/img/lufei.jpg"/></div>
<div id="d2_2"><img src="../day01-html/img/lufeitongxiang.jpeg"/></div>
<!--<div style="clear: both;"></div>-->
</div>
<div id="d3">
</div>
</body>
</html>
5display属性
1.HTML中标签分为块和行内
2.CSS中标签分为3类：块、行内块、行内（display）
（在标准流中）
block:块（一个占一行，默认宽度100%，高度根据内容确定；直接设置宽高有效）
inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高)
inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)
通过改变标签的diaplay的值，可以让一个标签在块、行内块和行内之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接（这个间隙目前没有办法清除）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: block;
background-color: red;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" style="width: 500px; height: 100px;"/>
<span id="" style="background-color: yellow; width: 1000px;">
abc
</span>
<span id="" style="background-color: gray; width: 1000px;">
abc
</span>
<div id="">
aaa <br />
bbb <br />
ccc
</div>
</body>
</html>
6.定位
定位
1.position:
想要设置标签的距离值（例：top）有效，必须设置标签的参考对象
initial:默认值
absolute:相对第一个非position的值非static,非initial的父标签进行定位
relative:正常位置定位(相对不设置position时的自己)
fixed:相对于浏览器定位
sticky:不滚动的时候按标准流定位，滚屏的时候按相对浏览器定位
2.距离
top:标签的顶部距离其他标签的位置
bottom:标签的底部距离其他标签的位置
left:标签的左边距离其他标签的位置
right:标签的右边距离其他标签的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 500px;
height: 500px;
background-color: yellow;
position: relative;
/*top: 100px;
left: 100px;*/
}
#d2{
width: 100px;
height: 100px;
background-color: greenyellow;
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div style="height: 2000px; background-color: deepskyblue;">
</div>
</body>
</html>
7.relative练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
position: relative;
/*left: 20px;*/
margin-left: 20px;
margin-top: 20px;
}
</style>
<!--<script type="text/javascript">
for (var i = 0; i < 20; i++){
document.write("<div class='c1'></div>")
}
</script>-->
</head>
<body>
<div style="overflow: hidden; width: 500px;">
<div class="c1">
</div>
<div class="c1">
</div>
<div class="c1">
</div>
<div class="c1">
</div>
<div class="c1">
</div>
<div class="c1">
</div>
<div class="c1">
</div>
<div class="c1">
</div>
</div>
<div id="" style="height: 100px; background-color: red;">
</div>
</body>
</html>
8.盒子模型
每一个标签都是由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: yellow;
/*1.设置内容大小*/
width: 300px;
height: 100px;
/*2.padding的值有4个：可以单独设置，也可一起设置*/
/*padding-left: 20px;*/
padding: 10px; /*上下左右的内边距都是10*/
padding: 20px 40px; /*上下20, 左右40*/
/*3.边框：可以单独设，也可一起设
格式：宽度 样式 颜色
a.样式 solid-实线 dotted-点状线 double-双线 dashed-虚线
*/
/*同时设置边框的宽度、样式、颜色*/
/*border-left: 5px solid red;*/
border: 5px solid red;
/*单独设置边框的颜色...*/
border-color: greenyellow;
/*设置边框角度*/
border-radius: 10px;
/*4.外边距（margin）*/
margin-top: 50px;
margin-left: 50px;
margin: 10px 20px 30px 40px; /*上 右 下 左*/
}
</style>
</head>
<body>
<div id="">
6666
</div>
</body>
</html>
9.居中
1.垂直居中
a.固定标签高度
b.设置属性line-height的值和高度一样
2.水平居中
text-aligen:center;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 200px;
background-color: #6495ED;
}
p{
width: 300px;
height: 66px;
background-color: yellow;
line-height: 66px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>嫩草欸哦鞥电脑裁判</p>
</div>
</body>
</html>
