张夏楠的学习日记

张夏楠 · 发表于 2022-2-21 23:39:18

横向浮动：

.top div{float: left;}
.top ul{float: right;}

复制代码

修改样式：

.body{border: 1px solid red; font-size: 12px;color:#333;width:960px;margin:0 auto;}

复制代码

a标签样式效果用伪类调：

<style type="text/css">
*{margin:0;padding: 0;} ——公共css样式
.body{border: 1px solid red; font-size: 12px;color:#333;width:960px;margin:0 auto;}
ul{list-style: none;}
.clear{display: block;overflow: hidden;}
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:red;}
a:active{color:red;}
a{text-decoration: none;}
.head{border: 1px solid blue;}
.top{border: 1 px solid green;line-height: 34px;}
.top div{float: left;}
.top ul{float: right;}
.top ul li{float: left;margin-left:8 px;}
</style>

复制代码

张夏楠 · 发表于 2022-2-26 23:41:01

1.什么是盒子模型？
布局方式，由TABLE布局转变为DIV布局，页面由多个盒子模型组成。

张夏楠 · 发表于 2022-2-28 23:57:34

盒子模型：外边框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
div{border:1px solid red;margin:20px;padding:20px;}
</style>
</head>
<body>
<div>
我是盒子
</div>
</body>
</html>

复制代码

body盒子的边框是红色盒子的外边距；

删除margin:20px;后红色盒子和黑色盒子重合：副级盒子的内边距相当于子级盒子的外边距

在body中加入padding后，

<style type="text/css">
body{border:1px solid black;padding:20px;}
div{border:1px solid red;padding:20px;}
</style>

复制代码

理解内外边距：

张夏楠 · 发表于 2022-3-2 23:37:55

margin:外边距（边框与副级单位（div的副级标签）的距离）;padding:内边距（文本内容与边框之间的距离）

写0像素的时候单位可以删去；div盒子的上下左右的边距写法：

div{border:1px solid red;margin:0px 0px 20px 20px;padding:20px;}

复制代码

<span></span>文本标签

张夏楠 · 发表于 2022-3-18 00:02:21

内联元素与块级元素：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div class="blockcode"><blockquote><head>
<meta charset="utf-8">
<title>内联元素与块级元素</title>
<style type="text/css">
.box01{border:1px solid red;width:300px;height:300px;padding:30px;margin:30px;}
</style>
</head>
<body>
<div class="box01">
春娇与志明
</div>
</body>

复制代码

<html>
<head>
      <meta charset="utf-8">
      <title>内联元素与块级元素</title>

</head>
<body>
         <a href="#">百度一下你就知道</a>
         <i>1</i>
         <u>23</u>
         <b>456</b>
</body>
</html>
另起一行：运用段落标签<p></p>

内联元素都是写在同一行里，因为他们都是文本标签；块级元素都是另起一行，独占一行

<meta charset="utf-8">
<title>内联元素与块级元素</title>
<style type="text/css">
*{border:1px solid red;}
</style>
</head>
<body>
<a href="#">百度一下你就知道</a>
<i>1</i>
<u>23</u>
<b>456</b><div>我是div</div>
</body>

复制代码

：
外层边框为html边框，内层边框包括body边框、“百度一下”边框、div边框等

张夏楠 · 发表于 2022-3-18 23:34:27

margin和padding的内联元素可以设置左右，不能设定上下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>内联元素与块级元素</title>
<style type="text/css">
body{border:1px solid red;}
</style>
</head>
<body>
<span>第一个</span>
<span style="width:200px;height:200px;margin-left:100px;padding-bottom:100px;">第二个</span>
<span>第三个</span>
</body>
</html>

复制代码

：第二个有左边距
内联元素与块级元素的区别：块级元素独占一行，可以设置宽高，内外边距等，而内联元素不能设置宽高和上下内外边距。

相对定位于绝对定位：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>相对定位与绝对定位</title>
<style type="text/css">
.div01{border:1px solid red;width:200px;height: 100px;}
.div02{border:1px solid blue;width:200px;height: 100px;}
.div03{border:1px solid green;width:200px;height: 100px;}
</style>
</head>
<body>
<div class="div01">第一个盒子</div>
<div class="div02">第二个盒子</div>
<div class="div03">第三个盒子</div>
</body>
</html

复制代码

相对定位：

<style type="text/css">
.div01{border:1px solid red;width:200px;height: 100px;}
.div02{
border:1px solid blue;
width:200px;
height: 100px;
background-color:blue;
position: relative; //相对定位
top:30px;
left:50px;
}
.div03{border:1px solid green;width:200px;height: 100px;}
</style>

复制代码

若欲将其向左或上移动，可将top和left的值设置为负值;相对定位占着位置不动。

绝对定位：

.div02{
border:1px solid blue;
width:200px;
height: 100px;
background-color:blue;
position: absolute;
top:60px;
left:50px;
}

复制代码

		自动登录	找回密码
密码			立即注册

张夏楠的学习日记

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源