python之路-CSS的学习

CSS基本概念

CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一

优点：

1.使网页代码更少，网页下载更快
2.实现了内容与样式的分离，使网站维护更快捷
3.使网页与浏览器的兼容性更好

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）

CSS样式

2.css的编写方式

2.1 行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

    </head>
    <body>
        <div style="color: red;font-size: 20px">css初体验</div>
        <div style="color: red;font-size: 30px">css初体验</div>
        <div style="color: red;font-size: 40px">css初体验</div>
    </body>
</html>

2.2 内部样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             div{
 8                 color: red;
 9                 font-size: 12px;
10 
11             }
12         </style>
13     </head>
14     <body>
15         <div >css初体验</div>
16         <div >css初体验</div>
17         <div >css初体验</div>
18     </body>
19 </html>

View Code

各种选择器
--标签选择器（此类型做修改时，相同标签的属性均被修改）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             div{
 8                 color: red;
 9                 font-size: 12px;
10 
11             }
12         </style>
13     </head>
14     <body>
15         <div >css初体验</div>
16         <div >css初体验</div>
17         <div >css初体验</div>
18     </body>
19 </html>

View Code

--id选择器(可以单独修改某个标签的属性)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             #one{
 8                 color: red;
 9                 font-size: 12px;
10             }
11              #two{
12                 color: red;
13                 font-size: 12px;
14             }
15              #three{
16                 color: red;
17                 font-size: 12px;
18             }
19 
20         </style>
21     </head>
22     <body>
23         <div id="one" >css初体验</div>
24         <div id="two">css初体验</div>
25         <div id="three">css初体验</div>
26     </body>
27 </html>

View Code

id不要重复只能唯一
--类选择器（对同一类型做修改，名字可以相同也可以不相同）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             .one{
 8                 color: red;
 9                 font-size: 12px;
10             }
11              .three{
12                 color: pink;
13                 font-size: 12px;
14             }
15 
16         </style>
17     </head>
18     <body>
19         <div class="one" >css初体验</div>
20         <div class="one">css初体验</div>
21         <div class="three">css初体验</div>
22     </body>
23 </html>

View Code

--包含选择器(有包含关系,可以是id选择器，也可以是类选择性)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             .four span{
 8                 color: green;
 9                 font-size: 48px;
10             }
11 
12         </style>
13     </head>
14     <body>
15         <div class="one" >css初体验</div>
16         <div class="one">css初体验</div>
17         <div class="three">css初体验</div>
18         <div class="four">
19             <span>css测试</span>
20         </div>
21     </body>
22 </html>

View Code

--分组选择器（网页中有很多元素，并且想同时对这些元素进行修改）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             div,span,h2{
 8                 color: yellow;
 9                 font-size: 30px;
10             }
11         </style>
12     </head>
13     <body>
14         <div class="one" >css初体验</div>
15         <div class="one">css初体验</div>
16         <div class="three">css初体验</div>
17         <div class="four">
18             <span>css测试</span>
19         </div>
20         <span>hahahaaha</span>
21         <h2>weiweiiweiwe</h2>
22     </body>
23 </html>

View Code

--通用选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             * {
 8                 background-color: gray;
 9             }
10         </style>
11     </head>
12     <body>
13         <div class="one" >css初体验</div>
14         <div class="one">css初体验</div>
15         <div class="three">css初体验</div>
16         <div id="four">
17             <span>css测试</span>
18             <p>css1231231</p>
19         </div>
20         <span>hahahaaha</span>
21         <h2>weiweiiweiwe</h2>
22     </body>
23 </html>

View Code

--伪类选择器（对超链接进行操作）

:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式

a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             a:hover{
 8                 color: yellow;
 9             }
10             a:active{
11                 color: green;
12             }
13             a:visited{
14                 color: pink;
15             }
16             a:link{
17                 color:red;
18             }
19         </style>
20     </head>
21     <body>
22     <a href="http://www.baidu.com" target="_blank">百度</a>
23 
24     </body>
25 </html>

View Code

选择器的优先级：

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             #show {
 8                 color: red;
 9             }
10             .show1{
11                 color: green;
12             }
13             * {
14                 color: blue;
15             }
16 
17         </style>
18     </head>
19     <body>
20 
21         <h2 id="show" class="show1" style="color: yellow">weiweiiweiwe</h2>
22     </body>
23 </html>

View Code

2.3 外部样式(将syle中的内容写入文件中，通过link连接,文件名用.css结尾)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <link rel="stylesheet" href="a.css">
 7         <style type="text/css">
 8 
 9 
10         </style>
11     </head>
12     <body>
13 
14         weiweiiweiwe
15     </body>
16 </html>

View Code

3.css的基本属性
--文字段落
边框设置：border
宽度，样式，颜色 (border: 1px solid red;) 1px代表边框的粗细，solid代表框的线是实线。

文本行高：line-height 如果想居中的话，一般这个值等于标签的height的值就可以。（上下距离）
语法： line-height：行高值(像素)

水平对齐： text-align （左右距离）
left：左对齐；
right：右对齐
center：居中对齐

文字属性

font-size: 字体大小

color:　　　颜色

背景属性
背景颜色：background-color
关键字：red pink orange

背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <link rel="stylesheet" href="a.css">
 7         <style type="text/css">
 8             #myimage{
 9                 width: 150px;
10                 height: 150px;
11                 background-image: url("images/1.jpg");
12             }
13 
14 
15         </style>
16     </head>
17     <body>
18         <div id="myimage">
19 
20         </div>
21 
22     </body>
23 </html>

View Code

背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <link rel="stylesheet" href="a.css">
 7         <style type="text/css">
 8             #myimage{
 9                 width: 150px;
10                 height: 150px;
11                 background-image: url("images/1.jpg");
12                 background-repeat: repeat-y;
13             }
14 
15 
16         </style>
17     </head>
18     <body>
19         <div id="myimage">sdfjiejfisjdifejjifsidfjie</div>
20 
21     </body>
22 </html>

View Code

背景位置(案例：现在一般都是选一张大图，这张图片中包含好多小图片，通过移动位置就可以看到不同的内容)：

background-position
background-position-x:200px ;
background-position-y:100px;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <link rel="stylesheet" href="a.css">
 7         <style type="text/css">
 8             #myimage{
 9                 width: 17px;
10                 height: 19px;
11                 background-image: url("images/123.png");
12                 border: 1px solid red;
13                 background-position-y:72px;
14             }
15 
16 
17         </style>
18     </head>
19     <body>
20         <div id="myimage"></div>
21 
22     </body>
23 </html>

View Code

4.布局属性

边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right

margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             #user{
 8                 width: 400px;
 9                 height: 200px;
10                 border: 1px solid red;
11             }
12             #root{
13                 width: 300px;
14                 height: 100px;
15                 border: 1px solid blue;
16                 margin-top: 10px;
17                 margin-left: 10px;
18                 margin: auto;   左右居中
19             }
20 
21         </style>
22     </head>
23     <body>
24         <div id="user">
25             <div id="root"></div>
26         </div>
27 
28     </body>
29 </html>

View Code

填充属性
padding是对内元素，用来控制元素内部元素的位置
四边填充 padding
上填充 padding-top
下填充 padding-bottom
左填充 padding-left
右填充 padding-right

padding 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             #main{
 8                 width: 400px;
 9                 height: 200px;
10                 border: 1px solid red;
11                 padding-top: 10px;
12                 padding-bottom: 10px;
13                 padding-left: 10px;
14                 padding-right: 10px;
15             }
16 
17 
18         </style>
19     </head>
20     <body>
21         <div id="main">字体测试</div>
22 
23     </body>
24 </html>

View Code

布局属性float(类似于淘宝商城中商品的排列)

float:none; 默认值
float:left; 左浮
float:right; 右浮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             .one{
 8                 width: 200px;
 9                 height: 100px;
10                 border: 1px solid red;
11                 float: left;
12                 margin: 0 10px;
13             }
14 
15         </style>
16     </head>
17     <body>
18         <div class="one">one</div>
19         <div class="one">one</div>
20         <div class="one">one</div>
21 
22     </body>
23 </html>

View Code

案例1：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style type="text/css">
 7             body{
 8                 margin: 0;
 9             }
10             .contnet{
11                 width: 980px;
12                 margin: 0 auto;
13                 line-height: 48px;
14             }
15             .main{
16                 height: 48px;
17                 /*border: 1px solid red;*/
18                 background-color: gray;
19             }
20             #user1{
21 
22                 /*height: 48px;*/
23                 /*border: 1px solid blue;*/
24                 float: left;
25 
26             }
27             #user2{
28                 /*height: 48px;*/
29                 /*border: 1px solid blue;*/
30                 float: right;
31 
32             }
33             a:hover{
34                 color: red;
35             }
36 
37 
38         </style>
39     </head>
40     <body>
41         <div class="main">
42             <div class="contnet">
43             <div id="user1">请登录</div>
44                 <div id="user2">
45                     <a href="#">我的淘宝</a>
46                     <a href="#">我的支付宝</a>
47                 </div>
48             </div>
49         </div>
50 
51     </body>
52 </html>

View Code

布局属性position

fixed : 将某个元素固定在页面的某个位置（类似于网页中的广告、返回顶部的模块，还有下拉时，顶部菜单栏一直保持在页面的最上端）

特点：

1.相对于浏览器的窗口来进行定位的
2.固定到窗口的某个位置上，不随内容而滚动
3.如果不设置定位坐标，就在原来的位置，否则反之

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             body{
 8                 margin: 0;
 9             }
10             .info{
11                 height: 300px;
12                 border: 1px solid red;
13                 position: fixed;
14                 top:0;
15                 left: 0;
16                 right: 0;
17             }
18             .info1{
19                 height: 900px;
20                 border: 1px solid blue;
21             }
22             .info2{
23                 width: 90px;
24                 height: 48px;
25                 border: 1px solid yellow;
26                 position: fixed;
27                 right: 0;
28                 bottom: 0;
29             }
30 
31         </style>
32     </head>
33     <body>
34         <div class="info">sdfsdfsdfsdf</div>
35         <div class="info1"> sdfsdfsdfsdf</div>
36         <div class="info2">返回顶部</div>
37 
38     </body>
39 </html>

View Code

absolute : 绝对定位(相对于浏览器定位的)

特点：
1.相对于（父级元素的定位方式（relative ）来进行定位找祖先元素是否有定位，如果没有定位，找到body，就相对body来定位如果找到祖先元素有定位，相对祖先元素来定位
2.不占空间

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             body{
 8                 margin: 0;
 9             }
10             .one{
11                 width: 200px;
12                 height: 100px;
13                 border: 1px solid red;
14                 position: absolute;
15                 left: 50px;
16                 right: 50px;
17             }
18             .two{
19                 width: 200px;
20                 height: 100px;
21                 border: 1px solid red;
22             }
23             .three{
24                 width: 200px;
25                 height: 100px;
26                 border: 1px solid red;
27             }
28         </style>
29     </head>
30     <body>
31         <div class="one"></div>
32         <div class="two"></div>
33         <div class="three"></div>
34 
35     </body>
36 </html>

View Code

如果有父级元素的话就是相对于父级元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             body{
 8                 margin: 0;
 9             }
10             .one{
11                 width: 200px;
12                 height: 100px;
13                 border: 1px solid red;
14                 position: absolute;
15                 left: 50px;
16                 right: 50px;
17             }
18             .two{
19                 width: 200px;
20                 height: 100px;
21                 border: 1px solid red;
22             }
23             .three{
24                 width: 200px;
25                 height: 100px;
26                 border: 1px solid red;
27             }
28             .wrap_one{
29                 width: 300px;
30                 height: 150px;
31                 border: 1px solid green;
32                 position: relative;
33             }
34         </style>
35     </head>
36     <body>
37         <div class="two"></div>
38         <div class="wrap_one">
39             <div class="one"></div>
40         </div>
41         <div class="three"></div>
42 
43     </body>
44 </html>

View Code

案例练习：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             .one{
 8                 width: 200px;
 9                 height: 100px;
10                 border: 1px solid red;
11                 position: relative;
12                 margin: 0 auto;
13             }
14             #two{
15                 width: 50px;
16                 height:50px;
17                 background-color: black;
18                 position: absolute;
19                 left: 0;
20                 bottom:0;
21 
22 
23 
24             }
25             #three{
26                 width: 50px;
27                 height:50px;
28                 background-color: black;
29                 position: absolute;
30                 right:0;
31             }
32             #four{
33                 width: 50px;
34                 height:50px;
35                 background-color: black;
36                 position: absolute;
37                 right:0;
38                 bottom:0;
39             }
40         </style>
41     </head>
42     <body>
43         <div class="one">
44             <div id="two"></div>
45         </div>
46         <div class="one">
47             <div id="three"></div>
48         </div>
49         <div class="one">
50             <div id="four"></div>
51         </div>
52 
53     </body>
54 </html>

View Code

relative：相对定位(相对于原来的位置，坐标原点，左上角)

特点：
1.相对定位是相对于，自身的左上角为坐标点
2.占据空间

定位方式通常与定位坐标一起使用
定位坐标：要定位的元素偏离目标位置多远的距离
Top，left，right，bottom

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             body{
 8                 margin: 0;
 9             }
10             .one{
11                 width: 200px;
12                 height: 100px;
13                 border: 1px solid red;
14                 position: relative;
15                 left: 50px;
16                 right: 50px;
17             }
18             .two{
19                 width: 200px;
20                 height: 100px;
21                 border: 1px solid red;
22             }
23             .three{
24                 width: 200px;
25                 height: 100px;
26                 border: 1px solid red;
27             }
28         </style>
29     </head>
30     <body>
31         <div class="one"></div>
32         <div class="two"></div>
33         <div class="three"></div>
34     </body>
35 </html>

View Code

商品列表案列

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Title</title>
  6         <style>
  7             body{
  8                 background-color: gray;
  9                 margin: 0;
 10             }
 11             .pg-body{
 12                 width: 780px;
 13                 margin: 0 auto;
 14                 border: 1px solid red;
 15                 background-color: white;
 16             }
 17             .item{
 18                 padding: 10px;
 19                 border: 1px solid #dddddd;
 20                 margin: 10px;
 21                 float: left;
 22                 position: relative;
 23             }
 24             p{
 25                 text-align: center;
 26                 font-size: 12px;
 27             }
 28             span{
 29                 color: red;
 30                 padding: 30px;;
 31             }
 32             .hot{
 33                 position: absolute;
 34                 right: 0;
 35                 top:0;
 36             }
 37             h2{
 38                 text-align: center;
 39             }
 40         </style>
 41     </head>
 42     <body>
 43         <div class="pg-body">
 44             <h2>限时抢购</h2>
 45             <div class="item">
 46                 <img src="images/01.jpg" alt="">
 47                 <p>[特价款]雷朋板材光学眼镜架<br>
 48                 年终盛典 满128减30元</p>
 49                 <span>￥476.00</span> <u>￥1360</u>
 50                 <div class="hot">
 51                     <img src="images/xsq.png" alt="">
 52                 </div>
 53 
 54             </div>
 55             <div class="item">
 56                 <img src="images/01.jpg" alt="">
 57                 <p>[特价款]雷朋板材光学眼镜架<br>
 58                 年终盛典 满128减30元</p>
 59                 <span>￥476.00</span> <u>￥1360</u>
 60                 <div class="hot">
 61                     <img src="images/xsq.png" alt="">
 62                 </div>
 63 
 64             </div>
 65             <div class="item">
 66                 <img src="images/01.jpg" alt="">
 67                 <p>[特价款]雷朋板材光学眼镜架<br>
 68                 年终盛典 满128减30元</p>
 69                 <span>￥476.00</span> <u>￥1360</u>
 70                 <div class="hot">
 71                     <img src="images/xsq.png" alt="">
 72                 </div>
 73 
 74             </div>
 75             <div class="item">
 76                 <img src="images/01.jpg" alt="">
 77                 <p>[特价款]雷朋板材光学眼镜架<br>
 78                 年终盛典 满128减30元</p>
 79                 <span>￥476.00</span> <u>￥1360</u>
 80                 <div class="hot">
 81                     <img src="images/xsq.png" alt="">
 82                 </div>
 83 
 84             </div>
 85             <div class="item">
 86                 <img src="images/01.jpg" alt="">
 87                 <p>[特价款]雷朋板材光学眼镜架<br>
 88                 年终盛典 满128减30元</p>
 89                 <span>￥476.00</span> <u>￥1360</u>
 90                 <div class="hot">
 91                     <img src="images/xsq.png" alt="">
 92                 </div>
 93 
 94             </div>
 95             <div class="item">
 96                 <img src="images/01.jpg" alt="">
 97                 <p>[特价款]雷朋板材光学眼镜架<br>
 98                 年终盛典 满128减30元</p>
 99                 <span>￥476.00</span> <u>￥1360</u>
100                 <div class="hot">
101                     <img src="images/xsq.png" alt="">
102                 </div>
103 
104 
105             </div>
106             <div style="clear: both"></div>
107 
108         </div>
109 
110 
111     </body>
112 </html>

View Code

布局属性z-index

设置对象的层叠顺序

特点：
较大 number 值的对象会覆盖在较小 number 值的对象之上

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             *{
 8                  margin: 0;
 9              }
10             .one{
11                 height: 2000px;
12                 background-color: #999999;
13             }
14             .two{
15                 height: 2050px;
16                 background-color: blue;
17                 position: fixed;
18                 top:0;
19                 left: 0;
20                 right: 0;
21                 opacity: 0.3;
22 
23             }
24             .three{
25                 width: 400px;
26                 height: 500px;
27                 background-color: white;
28                 position: fixed;
29                 top: 100px;;
30                 left: 400px;;
31                 right: 400px;
32                 z-index: 10;
33             }
34 
35         </style>
36     </head>
37     <body>
38         <div class="one"></div>
39         <div class="two"></div>
40         <div class="three"></div>
41     </body>
42 </html>

View Code

设置z-index值就是为了防止标签顺序混乱后导致层叠出问题。

布局属性overflow

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             body{
 8                 margin: 0;
 9             }
10             .info{
11                 width: 48px;
12                 height: 48px;
13                 background-color: red;
14             }
15 
16         </style>
17     </head>
18     <body>
19         <div class="info">sdfsdfsdfsdfwerwieroweirwoeriwoeriew</div>
20 
21 
22     </body>
23 </html>

View Code

如果没有设置overflow属性，就是如下情况

设置overflow属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             body{
 8                 margin: 0;
 9             }
10             .info{
11                 width: 100px;
12                 height: 100px;
13                 background-color: red;
14                 overflow-x: auto;
15 
16             }
17 
18         </style>
19     </head>
20     <body>
21         <div class="info">sdfsdfsdfsdfwerwieroweirwoeriwoeriew</div>
22 
23 
24 
25 
26     </body>
27 </html>

View Code

display属性

block：将元素变成块级标签，可以设置高度和宽度
Inline：将元素变成行内标签，不能设置高度和宽度
Inline-block：同时具有两种
none：标签消失

案例制作：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             * {
 8                 margin: 0;
 9             }
10             #main{
11                 height: 48px;
12                 background-color: blue;
13                 line-height: 48px;
14             }
15             #info1{
16                 float: left;
17             }
18             #info2{
19                 height: 48px;
20                 float: right;
21             }
22 
23             #info2 a:hover{
24                 color: white;
25                 background-color: red;
26             }
27             .meue{
28                 display: inline-block;
29                 color: white;
30             }
31         </style>
32     </head>
33     <body>
34         <div id="main">
35             <div id="info1">
36                 <div id="info">抽屉新热榜</div>
37             </div>
38             <div id="info2">
39                 <a class="meue">全部</a>
40                 <a class="meue">42区</a>
41                 <a class="meue">段子</a>
42                 <a class="meue">挨踢1024</a>
43                 <a class="meue">图片</a>
44                 <a class="meue">你问我答</a>
45             </div>
46 
47 
48         </div>
49 
50     </body>
51 </html>

View Code

简单来说，line-height是行高的意思，height则是定义元素自身的高度。

5.浏览器兼容性的问题
6.页面布局

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>页面布局</title>
  6         <style>
  7             body{
  8                 margin: 0;
  9             }
 10             .pg-head{
 11                 height: 48px;
 12                 background-color: #2459a2;
 13             }
 14             .pg-body .pg-menu{
 15                 width: 10%;
 16                 background-color: bisque;
 17                 /*height: 1000px;*/
 18                 position: absolute;
 19                 top: 48px;
 20                 left: 0;
 21                 bottom: 0;
 22             }
 23             .pg-body .pg-content{
 24                 width: 90%;
 25                 position: absolute;
 26                 top: 48px;
 27                 right: 0;
 28                 bottom: 0;
 29                 background-color:yellow ;
 30                 overflow: auto;
 31                 z-index: 9;
 32             }
 33             .pg-head .logo{
 34                 color: white;
 35                 width: 10%;
 36                 line-height: 48px;
 37                 text-align: center;
 38                 background-color: red;
 39             }
 40             .left{                               /*提前定义好，在行内样式里面可以直接应用*/
 41                 float: left;
 42             }
 43             .right{
 44                 float: right;
 45             }
 46             .pg-head .userinfo img{
 47                 border-radius: 50%;       /*设置图片的裁剪*/
 48             }
 49             .pg-head .userinfo{
 50                 border: 1px solid red;
 51                 margin-top: 4px;
 52                 width: 140px;
 53             }
 54             .pg-head .userinfo .infolist{
 55                 display: none;                     /*隐藏*/
 56             }
 57             .pg-head .userinfo:hover .infolist{
 58                 display: block;
 59                 color: red;
 60             }
 61             .pg-head .userinfo .infolist{
 62                 position: absolute;
 63                 top: 43px;
 64                 right: 36px;
 65                 background-color: green;
 66 
 67             }
 68             .pg-head .userinfo .infolist a{
 69                 display: block;
 70                 color: white;
 71                 width: 140px;
 72             }
 73 
 74         </style>
 75     </head>
 76     <body>
 77         <div class="pg-head">
 78            <div class="logo left">         <!--这里就是使用定义好的left-->
 79                 <span>欢迎光临</span>
 80             </div>
 81             <div class="userinfo right" style="position: relative" >
 82                 <img src="image/08.jpg" alt="" width="40" height="40">
 83                 <div class="infolist" style="position: absolute;z-index: 10">
 84                     <a href="#">我的信息</a>
 85                     <a href="#">退出</a>
 86                 </div>
 87             </div>
 88         </div>
 89         <div class="pg-body">
 90             <div class="pg-menu">这是菜单</div>
 91             <div class="pg-content">
 92                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 93                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 94                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 95                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 96                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 97                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 98                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
 99                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
100                 <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
101 
102             </div>
103         </div>
104 
105     </body>
106 </html>

View Code

内在div容器位于外在div容器的中间，且内在div容器具有长度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             .w{
 8                width: 980px;
 9                 margin: 0 auto;
10             }
11         </style>
12     </head>
13     <body style="margin: 0">
14         <div style="height: 48px;background-color: red">
15             <div class="w" style="height: 48px;background-color: green;">lwqlwqlwqlwlqlwqlwq</div>
16 
17         </div>
18 
19     </body>
20 </html>

View Code

响应式布局（对浏览器的拉伸，内容的位置做出相应的改变）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7         @media  (min- 700px){
 8             .item{
 9                 width: 20%;
10                 float: left;
11             }
12         }
13         @media (max- 700px) {
14             .item{
15                 width: 33.3%;
16                 float: left;
17             }
18 
19         }
20         @media (max- 600px) {
21             .item{
22                 float: left;
23                 display: none;
24             }
25 
26         }
27     </style>
28     </head>
29 
30     <body>
31         <div>
32             <div class="item">
33                 <lable>用户名</lable>
34                 <input type="text" />
35             </div>
36             <div class="item">
37                 <lable>用户名</lable>
38                 <input type="text" />
39             </div>
40             <div class="item">
41                 <lable>用户名</lable>
42                 <input type="text" />
43             </div>
44             <div class="item">
45                 <lable>用户名</lable>
46                 <input type="text" />
47             </div>
48         </div>
49 
50     </body>
51 </html>

View Code

7.小知识点补充
a:hover 表示对所有的a标签进行hover修改
a:hover c1 表示对a标签下的c1标签进行hover修改

border-redius 对图片进行修剪

text-decoration 取消超链接的下划线

如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。

此时加入这个特性就可以了

.clearfix:after{     content: '.';     display: block;     clear: both;     visibility: hidden;     height: 0; }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7         .clearfix:after{
 8             content: '.';
 9             display: block;
10             clear: both;
11             visibility: hidden;
12             height: 0;
13         }
14     </style>
15     </head>
16     <body>
17         <div style="background-color: green" class="clearfix">
18             <div style="border: 1px solid red;float: left; 50px;height: 48px;"></div>
19             <div style="border: 1px solid red;float: left; 50px;height: 48px;"></div>
20             <div style="border: 1px solid red;float: left; 50px;height: 48px;"></div>
21             <div style="border: 1px solid red;float: left; 50px;height: 48px;"></div>
22             <div style="border: 1px solid red;float: left; 50px;height: 48px;"></div>
23 
24         </div>
25 
26     </body>
27 </html>

View Code

相关阅读:
58） Gitlab加入LDAP认证 (windows AD)
57）《乌合之众》读书笔记【1】
56）监控系统简单介绍
 前端学习建议汇总（留着自己看的心灵鸡汤）
vscode分享代码插件Polacode
PHP论坛实现积分系统的思路
 thinkphp删除图片的方法实现
 php高并发问题解决思路
 PHP和Thinkphp模拟留言板，应对XSS攻击（超完整！）
sql server特殊字符查询问题及ESCAPE的使用
原文地址：https://www.cnblogs.com/l-w-q/p/6396271.html