表单标签
form ---提交、重置
input
select 下拉菜单
textarea 多行输入框
选择器的权重
伪类选择器：0001
类型选择（元素选择器）：0001
class选择器：0010
id选择器：0100
层级（包含）选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重值大，谁的优先级就高
浮动
标准流：块标签一个占一行，从上往下布局。
行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行
脱流：浮动、定位
1、浮动：就是让竖着显示的标签横着来，块的默认宽度是内容的宽度
float：left和right
注意:1、如果要使用浮动，那么同一级的所有标签都要浮动
2、如果父标签浮动，那么子标签的位置会跟着一起动
3、布局基本顺序：从上往下，从左往右
练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
#top{
float: left;
background-color: blue;
height: 100px;
width: 100%;
}
#m1{
float: left;
background-color: darkred;
height: 400px;
width: 25%;
}
#m2{
float: left;
background-color: black;
height: 400px;
width: 65%;
}
#m3{
float: left;
background-color: darkmagenta;
height: 400px;
width: 10%;
/*如果宽度之和超过100%，最后一个会换行显示*/
}
#bottom{
float: right;
background-color: silver;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="bottom"></div>
</body>
</html>
文字环绕：被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*被环绕的对象浮动*/
#d1{
float: left;
height: 50px;
width: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
在 Mozilla，我们认为隐私是健康互联网的基石。
这就是我们创建 Firefox 以及所有产品的初衷，目的是让您能够更好地控制您在网上共享的信息以及与我们共享的信息。我们力求只收集为大家改进 Firefox 而需要的信息。
在本“隐私声明”中，我们会说明 Firefox 共享的数据，并帮助您设置，以减少共享内容。我们还遵守在 Mozilla 隐私政策中规定的，有关如何获取、处理并共享我们从 Firefox 收集的信息的惯例。
</div>
</body>
</html>
效果图
清除浮动
1、清除浮动：是指清除因为浮动而产生的问题（高度塌陷）---问题不是什么时候都会发生
2、怎么清除浮动？
a、添加空的div,在父标签（高度塌陷的标签）的最后添加一个空的div，并设置这div的样式表：clear:both。可能会产生大量的额外的代码
b、设置overflow:hidden,在父标签中设置样式表的overflow的值为hidden。
语法：clear:overflow:hidden
c、万能清除发
after{display:block;clear:both}
display
HTML中标签分为块和行内
CSS中标签分为3类：块、行内块、行内（display）
（在标准流中）
block:块（一个占一行：默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
inline-block:行内块（一行可以有多个，默认宽高是内容的宽高；直接设置宽高是有效）
inline:行内（一行可以有多个，默认宽高是内容的宽高；设置宽高无效）
通过改变标签的display的值，可以让一个标签在块、行内块和行内任意切换
注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接，
这个间隙目前无法清除
定位
1.距离
top: 标签顶部距离其他标签的位置
bottom: 标签的底部距离其他标签的位置
left: 标签的左边距离其他标签的位置
right: 标签的右边到其他标签的位置
2.position
想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
--- initial:（默认值）没有参考对象
absolute: 相对第一个position的值是非static,非initial的父标签进行定位
relative: 正常位置定位（按标准流定位）
fixed: 相对于浏览器定位
sticky: 不滚动的时候按标准流布局，滚动的时候相对浏览器定位
盒子模型
每一个标签都是由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: chartreuse;
float: left;
/*设置内容大小*/
width: 100px;
height: 100px;
/*padding的值有四个
*可以单独设置
padding-left: 20px;
padding-top: 20px;
* 全部设置 */
padding :100px ;/*(上下左右的距离都是10)
padding 20px 40px;(上下的距离是20，左右的距离是40)*/
/*3、边框
*可以单独设置，也可以一起设置
* 格式：宽度 样式 颜色
* a、样式 solid--实线 dotted--点状线 double--双线 dashed--虚线 */
/*同时设置4条边框的宽度、样式和颜色*/
border:3px double red;
/*单独设置某一条边的颜色*/
border-left: 20px solid blue;
/*4、外边距*/
/*单独设置每个外边距
* 上 右 下 左*/
margin-top: 20px;
margin-left:20px ;
margin-right:20px ;
/*5、设置边框圆角*/
/*设置所有圆角*/
/*border-radius:10px ;*/
border-top-left-radius: 20px; /*左上角*/
}
</style>
</head>
<body>
<div id="">
萨达
</div>
<div id="">
ABCDEFGH
</div>
</body>
</html>
效果图
网友评论