上层应用的通信协议
浏览器/WEB应用程序
1 基于TCP协议(三次握手)
2 基于请求响应模式, 先请求
3 无连接
application/x-www-form-urlencoded : name=zhutao2014&pwd=123
json : {"user":"yuan","pwd":123}
multipart/form-data
application/x-www-form-urlencoded
json : {"user":"zhutao2014","pwd":123}
"""
POST / HTTP/1.1
请求头
contentType=application/x-www-form-urlencoded
user=zhutao2014&pwd=123
"""
s="user=zhu&pwd=123"
if contentType== application/x-www-form-urlencoded {
urlencoded解析数据
}else if {
}
浏览器地址栏 url 默认get请求
超链接a标签 <a href=”url?参数”></a> 默认get请求 闭合标签
form表单(get post) method
postman
"""
HTTP/1.1 200 OK 响应首行
contentType=text/html 响应头
img/
json
<html>
</html>
{"code":200,"msg":"登录成功"}
"""
浏览器读状态码
浏览器可以切换新协议:
服务器有推送模式时,web socket
h1-h6 块标签
p
br
b strong em i 内联标签
div span span能精准控制
img src属性
a href target
ul li 列表
table tr td/th
form action method enctype
input type=”text” name=””
input type=”password” name=””
input type=”checkbox” name=”” value checked
input type=”redio” name=”” value
input type=”date” name=”” value
input type=”submit”
form表单限制区域
select name
option value selected
option value
textarea name value
div+css p+css h1+css
像素 变大 font-size: 32px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*css代码: 选择器选中元素{属性:属性值}*/
p{
color: blue;
font-size: 32px;
}
</style>
</head>
<body>
<p>welcome to Web</p>
<p>welcome to Web</p>
<p>welcome to Web</p>
</form>
</body>
</html>
一般不要用,维护比较难 (html和css没有解开)
<body>
<p style="color:red">welcome to Web</p>
<p>welcome to Web</p>
<p>welcome to Web</p>
</body>
link引入文件
rel=”icon” 引入图标文件
rel=”stylesheet” 引入css
<link rel="icon" href="">
<link rel="stylesheet" href="common.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<p>welcome to Web</p>
<p>welcome to Web</p>
<p>welcome to Web</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*css代码:选择器选中元素{属性1:属性值1;属性2:属性值2....}*/
p{
color: blue;
font-size: 32px;
}
</style>
</head>
<body>
</body>
</html>
选择器 属性控制
id选择器 太精准,不能重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*css代码:选择器选中元素{属性1:属性值1;属性2:属性值2....}*/
p{
color: blue;
font-size: 32px;
}
/* id选择器*/
#i2{
color: green;
}
</style>
</head>
<body>
<p>p1</p>
<p id="i2">p2</p>
<p id="i3">p3</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*css代码:选择器选中元素{属性1:属性值1;属性2:属性值2....}*/
/*标签名选择器*/
p {
color: red;
}
/* id选择器*/
#i2 {
color: green;
}
/*class选择器*/
.c1 {
color: blue;
}
</style>
</head>
<body>
<p>p1</p>
<p id="i2">p2</p>
<p id="i3">p3</p>
<p class="c1">p4</p>
<p class="c1">p5</p>
<p class="c1">p6</p>
</body>
</html>
打印结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*class选择器*/
.c1 {
color: red;
font-style: italic;
}
.c2 {
color: blue;
background-color: lightcoral;
font-style: italic;
}
.c3 {
color: green;
background-color: lightcoral;
font-style: italic;
}
</style>
</head>
<body>
<p class="c1">p4</p>
<p class="c2">p5</p>
<p class="c3">p6</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*class选择器*/
.c1 {
color: red;
}
.c2 {
color: blue;
}
.c3 {
color: green;
}
.c4 {
font-style: italic;
}
</style>
</head>
<body>
<p class="c1 c4">p4</p>
<p class="c2 c4">p5</p>
<p class="c3 c4">p6</p>
</body>
</html>
<p class="c1 c4">p4</p>
<p class="c2 c4">p5</p>
<p class="c3 c4">p6</p>
<style>
* {}
div * {}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: green;
}
div * {
color: red;
}
</style>
</head>
<body>
<div>DIV1</div>
<div>
<div>
DIV2
</div>
<div>
<div>
DIV3
</div>
</div>
</div>
<span>span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* class选择器*/
.c1 {
color: red;
}
.c2 {
color: blue;
}
.c3 {
color: green;
}
.c4 {
font-style: italic;
}
</style>
</head>
<body>
<p>p1</p>
<p id="i2">p2</p>
<p id>p3</p>
<p class="c1 c4">p4</p>
<p class="c2 c4">p5</p>
<p class="c3 c4">p6</p>
<div>DIV</div>
<span>span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p id="i2">p2</p>
<p id>p3</p>
<p class="c1">p4</p>
<p class="c1">p5</p>
<p class="c1">p6</p>
<div>DIV</div>
<span>span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: aqua;
}
div {
color: darkviolet;
}
</style>
</head>
<body>
<p>p1</p>
<p id="i2">p2</p>
<p id>p3</p>
<p class="c1">p4</p>
<p class="c1">p5</p>
<p class="c1">p6</p>
<div>DIV</div>
<span>span</span>
</body>
</html>
打印结果:
<body>
<div class="c1">
<div class="c2">DIV1</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 父标签 子标签*/
.c1 .c2 {
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>
</html>
# 一般直接都定位到了,不用再通过子标签定位了
<style>
#i1 {
color: blue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 .c2 {
color: red;
}
.c1 p {
color: blue;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
<p>PPP</p>
<p>PPP</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 .c3 .c4{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
<p>PPP</p>
<p>PPP</p>
<p>PPP</p>
<div class="c3">
<div class="c4">DIV4</div>
</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 .c4{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
<p>PPP</p>
<p>PPP</p>
<p>PPP</p>
<div class="c3">
<div class="c4">DIV4</div>
</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>
</html>
打印结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 > .c4{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
<p>PPP</p>
<p>PPP</p>
<p>PPP</p>
<div class="c3">
<div class="c4">DIV4</div>
</div>
<div class="c4">DIV5</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 > .c3 > .c4{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
<p>PPP</p>
<p>PPP</p>
<p>PPP</p>
<div class="c3">
<div class="c4">DIV4</div>
</div>
<div class="c4">DIV5</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 > * > .c4{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">DIV1</div>
<div class="c3">
<div class="c4">DIV4</div>
</div>
<div class="c4">DIV5</div>
<div class="c6">
<div class="c4">DIV6</div>
</div>
<div class="c7">
<div class="c4">DIV7</div>
</div>
<div class="c8">
<div class="c9">
<div class="c4">DIV9</div>
</div>
</div>
</div>
</body>
</html>
打印结果
class=c1的p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.c1 {
color: red;
}
</style>
</head>
<body>
<div class="c1">d1</div>
<p class="c1">p1</p>
<p>p2</p>
</body>
</html>
打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.c1,h3 {
color: red;
}
</style>
</head>
<body>
<div class="c1">d1</div>
<p class="c1">p1</p>
<p>p2</p>
<h3>hello world</h3>
</body>
</html>
打印结果
基本
后代子代
与或
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 + .c2 {
color: red;
}
</style>
</head>
<body>
<div class="item">i1</div>
<div class="item c1">i2</div>
<div class="item c2">i3</div>
<div class="item c3">i4</div>
<div class="item c5">i5</div>
</body>
</html>
c1和c3没有挨着,找不到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*普通兄弟选择器*/
.c1 ~ .c3 {
color: red;
}
</style>
</head>
<body>
<div class="item">i1</div>
<div class="item c1">i2</div>
<div class="item c2">i3</div>
<div class="item c3">i4</div>
<div class="item c5">i5</div>
</body>
</html>
打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*普通兄弟选择器*/
.c1 ~ .item {
color: red;
}
</style>
</head>
<body>
<div class="item">i1</div>
<div class="item c1">i2</div>
<div class="item c2">i3</div>
<div class="item c3">i4</div>
<div class="item c5">i5</div>
</body>
</html>
打印结果
<标签名 属性1="属性值1" 属性2="属性值2" ...>内容部分</标签名>
<标签名 属性1="属性值1" 属性2="属性值2" .../>
标签选择器
<div> <p>
属性选择器
class .
id #
<div class="c1" id="i1"></div>
<input type="text">
E[att] 匹配所有具有att属性的E元素,不考虑它的值。E可以省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type] {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1" id="i1"></div>
<input type="text">
<input type="password">
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1" id="i1"></div>
<input type="text">
<input type="password">
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
[user="u1"] {
color: red;
}
</style>
</head>
<body>
<div class="c1" id="i1"></div>
<input type="text">
<input type="password">
<div user="u1">user div</div>
<p user="u1">user p</p>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
div[user="u1"] {
color: red;
}
</style>
</head>
<body>
<div class="c1" id="i1"></div>
<input type="text">
<input type="password">
<div user="u1">user div</div>
<p user="u1">user p</p>
</body>
</html>
注意:[class=”c1”] 没有波浪号匹配不到 <div class="c1 c2" id="i1">DIV1</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
[class~="c1"] {
color: red;
}
</style>
</head>
<body>
<div class="c1 c2" id="i1">DIV1</div>
<input type="text">
<input type="password">
<div user="u1">user div</div>
<p user="u1">user p</p>
</body>
</html>
浏览器打印结果
四个情况
E[att]
E[att=val]
E[att~=val]
E[attr^=val]
E[attr$=val]
E[attr*=val]
匹配多个空格隔开的若干属性值中的一个,注意区分* ,*任意字符
原始的用法,不能匹配到 class=”c1 c2”的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
[class~="c1"] {
color: red;
}
</style>
</head>
<body>
<div class="c1 c2" id="i1">DIV1</div>
<input type="text">
<input type="password">
<div user="u1">user div</div>
<p user="u1">user p</p>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
[class*="1"] {
color: red;
}
a[href$="png"]{
color:green;
}
</style>
</head>
<body>
<div class="c1 c2" id="i1">DIV1</div>
<div class="c11">DIV11</div>
<input type="text">
<input type="password">
<div user="u1">user div</div>
<p user="u1">user p</p>
<div class="img">
<a href="http://www.aaaaa/1.png">png1</a>
<a href="http://www.bbbbb/2.jpg">jpg</a>
<a href="http://www.ccccc/3.git">gif</a>
<a href="http://www.ccccc/4.png">png</a>
</div>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[type="text"] {
border: 1px solid red;
}
[class*="1"] {
color: red;
}
</style>
</head>
<body>
<div class="c1 c2" id="i1">DIV1</div>
<div class="c11">DIV11</div>
<input type="text">
<input type="password">
<div user="u1">user div</div>
<p user="u1">user p</p>
</body>
</html>
打印结果
class中带有 1的都匹配
:hover |
a:hover |
选择鼠标指针位于其上的链接。 |
找到原文件,使用ie打开
D:\GoWork\src\gitee.com\zhutao2014\s9练习\day10\10伪类选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: red;
}
a:hover{
color: blue;
}
a:active{
color: purple;
}
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="www.test.com" target="_blank">点击</a>
</body>
</html>
注意使用google没有看到a:visited点击后效果
鼠标悬浮上去,给个颜色
、
:first-child |
p:first-child |
选择属于父元素的第一个子元素的每个 元素。 |
:last-child |
p:last-child |
选择属于其父元素最后一个子元素每个 元素。 |
:before |
p:before |
在每个 元素的内容之前插入内容。 |
:after |
p:after |
在每个 元素的内容之后插入内容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">点击</a>
<p>p1</p>
<div>DIV</div>
<p>p2</p>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
display: block;
content: "DIV";
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">点击</a>
<p class="c1">p1</p>
<p>p2</p>
</body>
</html>
浏览器打印结果
两个值分别为(上下50px)和左右0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
display: block;
margin: 50px 0;
content: "";
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">点击</a>
<p class="c1">p1</p>
<p>p2</p>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
display: block;
margin: 50px 0;
content: "111";
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">点击</a>
<p class="c1">p1</p>
<p>p2</p>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">XXX</div>
</div>
</body>
</html>
小米官网,body的css属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
#i1{
color: green;
}
div{
color: orange;
}
</style>
</head>
<body>
<div class="c1" id="i1">DIV</div>
</body>
</html>
行内式 1000 id: 100 class : 10 标签选择器: 1 继承: 0 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 .c3 .c4 .c5 {
color: red;
}
#i2{
color: green;
}
</style>
</head>
<body>
<div class="c2">
<div class="c3">
<div class="c4">
<p class="c5" id="i2">PPP</p>
</div>
</div>
</div>
</body>
</html>
打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
#i1{
color: green;
}
div{
color: orange;
}
</style>
</head>
<body>
<div class="c1" id="i1">DIV</div>
<div class="c2">
<div class="c3">
<div class="c4">
<p class="c5" id="i2">PPP</p>
</div>
</div>
</div>
</body>
</html>
浏览器打印结果
优先级 40
优先级30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 .c3 .c4 .c5{
color:red;
}
.c2 .c3 .c5{
color: green;
}
.c2 .c3 .c4 p{
color: orange;
}
</style>
</head>
<body>
<div class="c1" id="i1">DIV</div>
<div class="c2">
<div class="c3">
<div class="c4">
<p class="c5" id="i2">PPP</p>
</div>
</div>
</div>
</body>
</html>
浏览器打印结果
优先级一致时,谁在下面 按谁的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 .c3 .c5{
color:red;
}
.c2 .c4 .c5{
color: green;
}
</style>
</head>
<body>
<div class="c2">
<div class="c3">
<div class="c4">
<p class="c5" id="i2">PPP</p>
</div>
</div>
</div>
</body>
</html>
浏览器打印结果
仅限测试使用,优先级最高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 .c3 .c5{
color:red;
}
.c2 .c4 .c5{
color: green;
}
.c5 {
color: blue!important;
}
</style>
</head>
<body>
<div class="c2">
<div class="c3">
<div class="c4">
<p class="c5" id="i2" style="color: orange">PPP</p>
</div>
</div>
</div>
</body>
</html>
浏览器打印结果
文本相关属性 |
|
|
|
font-family |
font-size |
letter-spacing |
line-height |
font-style |
font-variant |
text-align |
text-indent |
font-weight |
font |
text-transform |
word-spacing |
color |
direction |
|
|
列表相关属性 |
|
|
|
list-style-image |
list-style-position |
list-style-type |
list-style |
表格和其他相关属性 |
|
|
|
border-collapse |
border-spacing |
caption-side |
empty-cells |
cursor |
|
|
|
选择器作用: 控制一个或多个标签
体重 调粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
font-size: 32px;
font-weight: bolder;
font-style: italic;
font-family: "Times New Roman";
color: rgb(255,0,255);
}
</style>
</head>
<body>
<div class="c1">DIV</div>
</body>
</html>
浏览器打印结果
水平居中 center
text-align: left;
text-align: center;
取消下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
font-size: 32px;
font-weight: bolder;
font-style: italic;
font-family: "Times New Roman";
color: rgb(255,0,255);
text-align: center;
}
a {
text-decoration: none;
color: orange;
}
</style>
</head>
<body>
<div class="c1">DIV</div>
<a href="www.baidu.com">点击</a>
</body>
</html>
text-decoration: underline;
浏览器给的有默认a标签的颜色,比继承div的高,需改a标签才生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2{
color: red;
}
</style>
</head>
<body>
<div class="c1">DIV</div>
<div class="c2">
<a href="">点击</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 a{
color: red;
}
</style>
</head>
<body>
<div class="c1">DIV</div>
<div class="c2">
<a href="">点击</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
}
</style>
</head>
<body>
<div class="c1">user</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100%;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1">user</div>
</body>
</html>
文本的上间距和下间距一样
div默认为文本的一整行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100%;
height: 300px;
border: 1px solid red;
line-height: 300px;
}
</style>
</head>
<body>
<div class="c1">user</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 80%;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1">useruseruseruseruseruseruser
useruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruser
useruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruser</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 80%;
height: 300px;
/**/
border: 1px solid red;
line-height: 300px;
}
</style>
</head>
<body>
<div class="c1">useruseruseruseruseruseruser
useruseruseruseruseruseruseruseruseruseruseruseruseruseruseruser
useruseruseruseruseruseruseruseruseruseruseruruseruseruseruseruser</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 80%;
height: 300px;
/**/
border: 1px solid red;
line-height: 300px;
}
.c2{
width: 200px;
height: 70px;
background-color: lightblue;
font-size: 32px;
}
</style>
</head>
<body>
<div class="c1">useruseruseruseruseruseruser
useruseruseruseruseruseruseruseruseruseruseruseruseruseruseruser
useruseruseruseruseruseruseruseruseruseruseruruseruseruseruseruser</div>
<div class="c2"><</div>
</body>
</html>
文本框
上边 top-line
下边baseline
底线 bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2{
width: 180px;
height: 70px;
border: 1px solid red;
line-height: 70px;
font-size: 22px;
text-align: center;
}
</style>
</head>
<body>
<div class="c2">DIV</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 100%;
height: 300px;
border: 1px solid red;
}
.c2{
width: 90px;
height: 70px;
font-size: 22px;
text-align: center;
line-height: 70px;
border: 1px solid red;
}
.c2:hover{
font-size: 22px;
color: white;
}
</style>
</head>
<body>
<div class="c1">user</div>
<div class="c2"><</div>
</body>
</html>
光标移动变白色hover
vertical-align属性设置元素的垂直对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
vertical-align: baseline;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="www.baidu.com"><img src="https://news-bos.cdn.bcebos.com/mvideo/log-news.png" alt="百度新闻" height="46px" width="137px">gyXx</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
vertical-align: bottom;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="www.baidu.com"><img src="https://news-bos.cdn.bcebos.com/mvideo/log-news.png" alt="百度新闻" height="46px" width="137px">gyXx</a>
</body>
</html>
默认
img{
vertical-align: baseline;
}
改为top
img{
vertical-align: top;
}
img{
vertical-align: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
vertical-align: -10px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="www.baidu.com"><img src="https://news-bos.cdn.bcebos.com/mvideo/log-news.png" alt="百度新闻" height="46px" width="137px">gyXx</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 80%;
height: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 80%;
height: 600px;
border: 1px solid red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58ad23dddd5e4_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650456702&t=7a559ffc95b3fa86f216620c42ffc9d2");
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
.c1 {
width: 80%;
height: 600px;
border: 1px solid red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58ad23dddd5e4_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650456702&t=7a559ffc95b3fa86f216620c42ffc9d2");
background-repeat: no-repeat;
}
.c1 {
width: 80%;
height: 600px;
border: 1px solid red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58ad23dddd5e4_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650456702&t=7a559ffc95b3fa86f216620c42ffc9d2");
background-repeat: repeat-x;
}
距离左边距100像素,距离上边界200像素
.c1 {
width: 80%;
height: 600px;
border: 1px solid red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58ad23dddd5e4_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650456702&t=7a559ffc95b3fa86f216620c42ffc9d2");
background-repeat: no-repeat;
background-position: 100px 200px;
}
background-position: center;
<style>
.c1 {
width: 80%;
height: 600px;
border: 1px solid red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58ad23dddd5e4_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650456702&t=7a559ffc95b3fa86f216620c42ffc9d2");
background-repeat: no-repeat;
background-position: center;
}
</style>
background: no-repeat center url("");
div块比背景图片小,只能看到背景图片的一部分
默认看到左上角
调整前,显示图片左上角
代码
<style>
.c1 {
width: 100px;
height: 100px;
border: 1px solid red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58ad23dddd5e4_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650456702&t=7a559ffc95b3fa86f216620c42ffc9d2");
background-repeat: no-repeat;
background-position: -10px -30px;
}
</style>
调整后,图片位于中间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 100px;
height: 100px;
/*border: 1px solid red;*/
border-width: 3px;
border-style: dashed;
border-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
<style>
.c1 {
width: 100px;
height: 100px;
/*border: 1px solid red;*/
border-width: 10px;
border-style: dashed;
border-color: red;
}
</style>
10px 不占100*100像素区域
<style>
.c1 {
width: 100px;
height: 100px;
border-right: 10px solid red;
}
</style>
<style>
.c1 {
width: 100px;
height: 100px;
border-bottom: 10px solid red;
}
</style>
border-radius: 20%;
右下角弧度
border-bottom-right-radius: 25%;
<style>
.c1 {
width: 100px;
height: 100px;
border: 10px solid red;
/*border-width: 10px;*/
/*border-style: dashed;*/
/*border-color: red;*/
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 100px;
height: 100px;
border: 10px solid red;
/*border-width: 10px;*/
/*border-style: dashed;*/
/*border-color: red;*/
border-top-right-radius: 60%;
border-bottom-right-radius: 60%;
font-size: 60px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="c1"><</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 300px;
height: 300px;
border-right: red 10px dashed;
border-bottom: red 10px dashed;
/*border-top-right-radius: 60%;*/
/*border-bottom-right-radius: 60%;*/
font-size:60px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="c1"><</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 300px;
height: 300px;
border: red 10px solid;
border-top-right-radius: 60%;
border-bottom-right-radius: 60%;
font-size:60px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="c1"><</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*list-style: circle;*/
/*list-style: square;*/
/*list-style: lower-roman;*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
}
.c2{
background-color: red;
}
</style>
</head>
<body>
<div class="c1">DIV1</div>
<span class="c2">SPAN</span>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.c3{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="c1">DIV1</div>
<div class="c2">DIV2</div>
<div class="c3">DIV3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
display: none;
}
.c3{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="c1">DIV1</div>
<div class="c2">DIV2</div>
<div class="c3">DIV3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
/*display: none;*/
visibility: hidden;
}
.c3{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="c1">DIV1</div>
<div class="c2">DIV2</div>
<div class="c3">DIV3</div>
</body>
</html>
点击时,通过设置display:none减少浏览器与服务器交互
显示评论div,通过display:none隐藏其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
display: none;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
display: none;
}
.c3{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
display: none;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
display: block;
/*visibility: hidden;*/
}
.c3{
background-color: red;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<span class="c3">SPAN</span> <span class="c3">SPAN</span> <span class="c3">SPAN</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
display: none;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
display: inline;
}
.c3{
background-color: red;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<!--<div class="c3">评论</div>-->
<span class="c3">SPAN</span> <span class="c3">SPAN</span> <span class="c3">SPAN</span>
</body>
</html>
块级标签 独占一行,内联标签 不能设置长宽
1 display:inline-block
2 float
1 拥有块级标签的可以设置长宽的功能,也拥有内联标签不独占一行的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
display: inline-block;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
display: inline-block;
}
.c3{
width: 200px;
height: 200px;
background-color: rebeccapurple;
display: inline-block;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
display: inline-block;
}
.c2{
width: 200px;
height: 200px;
background-color: lightgreen;
display: inline-block;
margin-left: 50px;
}
.c3{
width: 200px;
height: 200px;
background-color: rebeccapurple;
display: inline-block;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: left;
}
.c2 {
width: 200px;
height: 200px;
background-color: lightgreen;
float: left;
}
.c3 {
width: 200px;
height: 200px;
background-color: rebeccapurple;
float: left;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
有块级和内联特性以外,
流动模型(Flow),即文档流,浏览器打开HTML网页时,从上往下,从左往右,逐一加载。
在正常情况下,HTML元素都会根据文档流来分布网页内容的。
文档流有2大特征:
① 块状元素会随着浏览器读取文档的顺序,自上而下垂直分布,一行一个的形式占据页面位置。
② 行内元素会随着浏览器区队文档的顺序,从左往右水平分布,一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: left;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
绿色和蓝色在正常文件流,红色浮动不在一个层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: right;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
/*float: left;*/
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
浏览器显示结果
浮动属性,上一个浮动的,放在后面;上一个不浮动,就放在上层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
/*float: left;*/
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
浏览器打印结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: left;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
clear: left;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
上个元素是浮动的,往下行排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: right;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
clear: both;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div><span>商品名称</span> <span>规格与包装</span> <span>评论</span></div>
<div class="c1">商品名称</div>
<div class="c2">规格与包装</div>
<div class="c3">评论</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: right;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
clear: both;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.head {
width: 100%;
height: 80px;
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
background-color: lightgreen;
}
.head .head2 {
width: 500px;
height: 80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
</div>
<div class="content"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: right;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
clear: both;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.head {
width: 100%;
height: 80px;
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
background-color: lightgreen;
float: left;
}
.head .head2 {
width: 500px;
height: 80px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
</div>
<div class="content"></div>
</body>
</html>
浏览器打印结果
正常文档流 父标签和子标签一样高,会随子标签高度膨胀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border:1px solid red;
}
.c2{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: right;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
clear: both;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.head {
width: 100%;
height: 80px;
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
background-color: lightgreen;
float: left;
}
.head .head2 {
width: 500px;
height: 100px;
background-color: blue;
float: right;
}
.content {
width: 100%;
height: 500px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
</div>
<div class="content"></div>
</body>
</html>
父亲不设置为0 变成一条线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
float: right;
}
.c2 {
width: 210px;
height: 200px;
background-color: green;
float: left;
clear: both;
}
.c3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.head {
width: 100%;
/*height: 80px;*/
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
background-color: lightgreen;
float: left;
}
.head .head2 {
width: 500px;
height: 100px;
background-color: blue;
float: right;
}
.content {
width: 100%;
height: 500px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
</div>
<div class="content"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head {
width: 100%;
/*height: 80px;*/
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
float: left;
}
.head .head2 {
width: 500px;
height: 100px;
background-color: blue;
float: right;
}
.content {
width: 100%;
height: 500px;
background-color: lightpink;
clear: both;
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
</div>
<div class="content"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head {
width: 100%;
/*height: 80px;*/
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
float: left;
}
.head .head2 {
width: 500px;
height: 100px;
background-color: blue;
float: right;
}
.content {
width: 100%;
height: 500px;
background-color: lightpink;
}
.c1 {
clear: both;
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
</div>
<div class="c1"></div>
<div class="content"></div>
</body>
</html>
class=”c1”标签位置也可以放在上个div的最后
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
<div class="c1"></div>
</div>
<div class="content"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head {
width: 100%;
/*height: 80px;*/
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
float: left;
}
.head .head2 {
width: 500px;
height: 100px;
background-color: blue;
float: right;
}
.content {
width: 100%;
height: 500px;
background-color: lightpink;
}
.head:after{
display: block;
clear: both;
content: "";
}
</style>
</head>
<body>
<div class="head">
<div class="head1"></div>
<div class="head2"></div>
<div class="c1"></div>
</div>
<div class="content"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head {
width: 100%;
/*height: 80px;*/
border:1px solid red;
}
.head .head1 {
width: 400px;
height: 80px;
float: left;
}
.head .head2 {
width: 500px;
height: 100px;
background-color: blue;
float: right;
}
.content {
width: 100%;
height: 500px;
background-color: lightpink;
}
.clearfix:after{
display: block;
clear: both;
content: "";
}
</style>
</head>
<body>
<div class="head clearfix">
<div class="head1"></div>
<div class="head2"></div>
<div class="c1"></div>
</div>
<div class="content"></div>
</body>
</html>
position
内容和border的间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 10px solid red;
padding: 50px;
}
.c2 {
width: 200px;
height: 200px;
background-color: green;
}
.c3 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1">111</div>
</body>
</html>
上 右 下 左
1个值代表4个方向
2个值代表 上下50 左右100宽点
3个值 上 ,下 ,左右
/*padding: 50px;*/
/*padding: 50px 100px;*/
padding: 50px 100px 200px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 10px solid red;
padding-top: 200px;
}
.c2 {
width: 200px;
height: 200px;
background-color: green;
}
.c3 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1">111</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 10px solid red;
/*padding: 50px;*/
/*padding: 50px 100px;*/
/*padding: 50px 100px 200px;*/
margin: 20px;
}
.c2 {
width: 200px;
height: 200px;
background-color: green;
}
.c3 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c2"></div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 10px solid red;
margin-bottom: 20px;
}
.c2 {
width: 200px;
height: 200px;
background-color: green;
}
.c3 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c2"></div>
</body>
</html>
.c1{
width: 200px;
height: 200px;
border: 10px solid red;
margin-bottom: 20px;
}
.c2 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 20px;
}
margin-left: -5px;
默认margin=8px
设置margin=0顶格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 200px;
border: 1px solid red;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*height: 200px;*/
/*border: 1px solid red;*/
margin: 0;
}
.c1{
width: 60%;
height: 200px;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
margin: 100px auto;
三个子div