选择器权重
<!--选择器的权重
类型选择(元素选择器):0001
class选择器:0010
id选择器:0100
伪类选择器:0001
层级(包含)选择器:多个选择器的权重之和
群组选择器:分开看每个选择器的权重
谁的权重的值大，谁的优先级就高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.c1{color: yellow;
}
#d1{
color: plum;
}
a{
color: blue;
}
</style>
</head>
<body>
<a href="" id="d1" class="c1"><h1>Hello</h1></a>
</body>
</html>
浮动
<!--
标准流:
块标签是一个占一行。从上往下布局。默认宽度是100%
行内标签一行可以显示多个，从左往右布局，自到遇到边界就自动换行
脱流:浮动,定位
1.浮动:就是让竖着显示的标签横着来，快的默认宽度是内容的宽度
float:left和right
注意:1.如果要使用浮动，那么同一级的所有标签都要浮动
2.如果父标签浮动，难么子标签的位置也会跟着动
3.布局基本顺序，从上往下，从左往右
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top01{
float:left ;
background-color: red;
width: 100%;
height: 250px;
}
#top02{
float: left;
height: 500px;
width: 15%;
background-color: deeppink;
}
#top03{
float: left;
height: 500px;
width: 65%;
background-color: yellow;
}
#top04{
float: right;
height: 500px;
width: 20%;
background-color: blue;
}
#top05{
float: right;
height: 900px;
width: 100%;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="top01"></div>
<div id="top02"></div>
<div id="top03">@catlite多谢提醒！查找了下，逗号的优先级是最低的，()的优先级的最高的，所以有些时候才需要使用强制运算符"()"来改变执行(优先级别)顺序，有了这个方向，我再去看看。谢谢啦~......</div>
<div id="top04"></div>
<div id="top05"></div>
</body>
</html>
文字环绕
<!--文字环绕:
被文字环绕的标签浮动，文字标签不浮动-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
float: left;
width: 60px;
height: 60px;
background-color: yellow;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
JavaScript 是世界上最流行的脚本语言。JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。JavaScript 被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
</div>
</body>
</html>
清除浮动
<!--清除浮动:
1.是指清除因为浮动而产生的问题(高度塌陷)---这个问题不是什么时候都会产生的
2.怎么清除浮动
a.添加空的div:
在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表:clear:both
可能会产生大量代码
b.设置overflow:
在父标签里设置样式表overflow的值为hidden
c.万能清除法
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮动方案*/
.clear{
overflow: hidden;
}
/*3.清除浮动方案3*/
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="height: 150px; width: 100%; background-color: red;"></div>
<div id="" style="background-color: coral;" class="clear">
</div>
<div>
<div style="height:400px ; width: 40%; background-color: #0000FF;"></div>
<div style="height:400px ; width: 30%; background-color:pink;"></div>
</div>
<!--1.清除浮动方案1-->
<div id="" style="clear: both;">
</div>
<div id="" style="height:300px ; background-color:black;">
</div>
</body>
</html>
定位
<!--定位
top:标签顶部距离其他标签的位置
bottom:标签的底部距离其他标签的位置
left:标签左边距离其他标签的位置
right:标签右边距离其他标签的位置
-->
<!--2.position
想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方法
initial:(默认值)没有参考对象
absolute:相对第一个position的值是非static，非initial的父标签进行定位
relative:正常位置定位(按标准流定位)
fiexd:相对于浏览器定位
sticky:不滚动的时候按标准流布局，滚动时按浏览器定位
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d4{
position: absolute;
width: 500px;
height: 550px;
background-color: royalblue;
}
#d5{
position: absolute;
width: 400px;
height: 350px;
background-color: orange;
top: 70px;
left: 80px;
}
</style>
</head>
<body>
</body>
<div id="d4">
<div id="d5">
</div>
<div id="" style=" ">
</div>
</div>
</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: green;
position: relative;
/*left: 20px;
top: 20px;*/
margin-top: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="d1" style=" width: 500px;background-color: yellow;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</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;
}*/
body,p,a{
margin: 0;
padding: 0;
}
#d1{
float: left;
background-color: sandybrown;
/*1. 设置内容大小*/
width: 100px;
height: 100px;
/*2. padding的值有四个
* 可以单独设，也可以一起设
*/
/*padding-left:20px ;
padding-top: 10px;*/
padding: 10px; /*上下左右的内边距都是10*/
padding: 20px 40px; /*上下是20，左右是40*/
/*3.边框
* 可以单独设，也可以一起设
* 格式: 宽度 样式 颜色
* a.样式 solid-实线 dotted-点状线 double-双线 dashed-虚线
*/
/*单独设置一条边框的宽度、样式和颜色*/
/*border-left:5px solid red;
border-bottom:8px solid green;*/
/*同时设置4条边框的宽度、样式和颜色*/
border: 3px solid black;
/*单独设置某一条边的颜色*/
border-left-color: royalblue;
/*设置边框圆角的弧度*/
/*border-radius: 5px;*/
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
/*4.外边距*/
/*单独设置每个外边距*/
/*margin-top: 100px;
margin-left: 50px;
margin-right: 100px;*/
/*给所有的外边距设置成一样的值*/
/*margin:上 右 下 左
*margin: 上/下 右/左
*/
margin: 20px;
}
</style>
</head>
<body>
<div id="d1">
abc
</div>
<div id="" style="height: 100px; width: 100px; background-color: blueviolet; float: left;">
</div>
</body>
</html>
居中
<!--垂直居中
a.固定标签高度
b.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
background-color: hotpink;
text-align: center;
}
p{
height: 50px;
line-height: 50px;
width: 200px;
background-color: green;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="">
<p>二十四桥明月夜</p>
</div>
</body>
</html>
display
<!--1.HTML中元素分为块和行内
2.CSS中标签分为3类:块，行内块，行内(display)
block:块(一个占一行，默认宽度是100%,高度默认根据内容来确定；直接设置宽高有效)
inline-block:行内块(一行可以有多个,默认宽高是内容的宽高，直接设置宽高有效)
inline:行内(一行可以有多个,默认宽高是内容的宽高，直接设置宽高无效)
通过改变标签的display值，可以让一个标签在块，行内块，行内之间任意切换
注意:inline-block标签的右边默认有一个问题，不能和其他的标签无缝连接(间隙无法清除)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#w1{
background-color: red;
height: 80px;
width: 50%;
display: inline;
}
</style>
</head>
<body>
<p id="w1">ok</p>
</body>
</html>
