01浮动
标准流:
a.块标签一个占一行，从上往下占一行。
b.行标签一行可以显示多个从左往右布局，直到遇到边界就自动换行。
脱流：浮动、定位
1.浮动：就是让竖着显示的标签橫着显示,块的宽度默认是内容的宽度。
float:left right
注意:
1.如果同一级的模块，要浮动就都浮动。
2.如果父标签浮动，那么子标签的位置会跟着一起浮动 。
3.布局顺序：从上往下，从左往右。
02选择器的权重
类型选择（元素选择器）0001
class选择器 0010
id选择器 0100
层级（包含）选择器：
多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重的值大：谁的优先级就高
文字环绕：被文字环绕的标签浮动，文字标签不浮动
03清除浮动
1.清除浮动：
是指清除因为浮动产生的问题（高度塌陷） ---问题不是什么时候都会产生的
2.怎么清除浮动：
a.添加空的div
在父标签（塌陷的标签）的最后一个空的div，并且设置clear：both
可能会产生大量的额外的代码
b.设置overflow
在父标签设置样式表中设置 overflow：hidden
c.万能清除法
<style type="text/css">
/*清除浮动 */
.clear{
overflow: hidden;
}
#d1{
clear: both;
}
</style>
</head>
<body>
<div style="width: 100%;float: right; height: 150px; background-color: #FFC0CB;"></div>
<!--方案二 ，overfloat：hidden -->
<div class="clear" style="width: 100%; background-color: gainsboro; ">
<div style="height: 200px; float:left; background-color: blue; width: 30%;"></div>
<div style="height: 200px; float:right; background-color: blue; width: 30%;"></div>
<!--方案一，空div、clear：both -->
<div id="d1"></div>
</div>
<div style="height: 100px; floa:left; background-color:red; width: 100%;"></div>
</body>
04 display
HTML中标签分为块和行内
css中标签分为三类：块、行内块、行内(display)
block：块(一个占一行，默认宽度是100%，高度默认根据内容来确定，直接设置宽高有效)
inline—block:行内块(一行可以有多个，默认的高度是内容的宽高；设置宽高有效)
inline：行(一行可以有多个，默认设置宽高无效)
通过改变标签的display的值，可以让一个标签在行、行内块和块之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能会让其他标签无缝连接（这个间隙，目前没有办法清除）
<style type="text/css">
div{
display: block;
background-color: #00FFFF;
}
</style>
</head>
<body>
<span style="width:100px; height: 100px; background-color:sandybrown ;">ssss</span>
<input type="text" name="" style="width: 200px; height: 200px; background"/>
<div id="">
aaa
<br>
bbb
</div>
</body>
06 定位
top:标签顶部距离其他标签的位置
bottom：标签的底部距离其他标签的位置
left：标签的左边距其他标签的位置
right：标签右边到其他标签的位置
2.position
想要设置标签的left或者top，bottom，right的值有效，必须设置标签的参考方式
initial(默认值)没有参考对象
absolute:相对第一个position的值非static,非initial的父标签进行定位
relative：正常位置定位（按照标准流定位）
fixed:相对于浏览器定位
sticky：不滚动的时候按标准流布局，滚动的时候相对浏览器布局
08 盒子模型
每一个标签都是有四个部分组成：
1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2.内边距（padding）：可见的，并且不能显示内容（通过设置padding来改变其值，默认是0）
3.边框（boder）：可见的，如果有内边距，边框就显示在内边距上，否则显示在内容上
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: salmon;
/*设置内容大小 */
width:100px;
height:100px;
/* padding的值有四个*/
/* 可以单独设,也可以一起设 */
padding-left: 20px;
padding:10px;/*上下左右的边距都是10px*/
padding:20px 40px;/*上下是20px,左右是40px*/
/*3.边框
可以单独设，也可以一起设
格式：宽度，样式，颜色
a.样式 solid：实线 dotted-点状线 double-双线 dashd：虚线
*/
border-left: 10px solid red;
border-bottom: 8px solid green;
/*单独设置某条边的颜色、颜色、样式 */
border-left-color:lightpink;
/*4.外边距 */
/* 单独设置*/
margin-top: 100px;
margin-left: 50px;
margin-right:50px ;
/*给所有的外面距设置成一样的值 */
/*margin：上 右 下 坐 */
margin: 10px 20px 30px 40px;
/* 5.设置圆角*/
/* border-radius: 100px; */
/*设置边框圆角的弧度 */
border-top-left-radius: 30px;
}
</style>
</head>
<body>
<div id="">
abc
</div>
<div id="">
</div>
</body>
</html>
[图片上传失败...(image-397db4-1534342198772)]
网友评论