Day10 CSS基础

2022/3/25 6:24:43

本文主要是介绍Day10 CSS基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

01 上节回顾

http协议语法(*****)

上层应用的通信协议

浏览器/WEB应用程序

 

 

1 基于TCP协议(三次握手)

2 基于请求响应模式, 先请求

3 无连接

 

请求格式

content-type 声明请求体数据格式

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

 

 

HTML

基本标签

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

 

CSS 样式的渲染以及元素的布局

div+css p+css h1+css

 

02 CSS的引入方式

三种引入方式

style标签

像素 变大 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>

css文件

 

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>

 

03 css选择器

css基本选择器

1 标签名选择器 p标签

<!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>

选择器 属性控制

2 id选择器 太精准,不能重复

 

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>

 

3 class选择器

<!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>

 

class特定用法,减少代码重复

<!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>

4 通配选择器

<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>

练习

练习1

<!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>

 

练习2

<!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>

 

练习3

<!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>

 

打印结果:

 

04 css的组合选择器

 

<body>
<div class="c1">
    <div class="c2">DIV1</div>
</div>
<div class="c1">DIV2</div>
<div class="c2">DIV3</div>
</body>

让div1变红?

父子兄弟关系

后代选择器

<!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>

示例 改为.c1 .c4

<!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>

打印结果:

 

 

 

子代选择器 >

示例1

<!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>

示例2

<!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>

层级越多 受干扰越少

有没有 .c1 中间不管什么class .c4的?

<!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>

打印结果

 

05 与或选择器

与选择器

不加空格

class=c1的p标签

 

示例 只想让p1变红?

<!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>

打印结果

 

或选择器 ,

使用 ,逗号分割

示例 让p1和h3都变红

<!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>

打印结果

 

06 兄弟选择器 + ~

基本

后代子代

与或

兄弟选择器

毗邻兄弟,紧紧挨着的 +

<!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>

打印结果

 

07 属性选择器

回顾标签语法

<标签名 属性1="属性值1" 属性2="属性值2" ...>内容部分</标签名>
<标签名 属性1="属性值1" 属性2="属性值2" .../>

 

 

标签选择器

<div> <p>

属性选择器

class .

id #

<div class="c1" id="i1"></div>
<input type="text">

单写属性,不管属性对应的值是什么

E element

E[att]          匹配所有具有att属性的E元素,不考虑它的值。E可以省略

 

示例-单写属性[type]

<!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]

注意:[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>

 

浏览器打印结果

 

^ 开头

 

$ 结尾

想要png和jpg的变绿,注意a默认为蓝色

<!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的都匹配

 

下午08 伪类选择器

anchor伪类

四种状态

link 默认状态

hover (悬浮)鼠标放上去,没点击

active 点击没有松开

visited 点击后

: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点击后效果

 

 

 

 

 

鼠标悬浮上去,给个颜色

 

本身是黑色,增加hover 为蓝色

 

 

下午09 伪类选择器2

after和before

:first-child

p:first-child

选择属于父元素的第一个子元素的每个 元素。

:last-child

p:last-child

选择属于其父元素最后一个子元素每个 元素。

:before

p:before

在每个 元素的内容之前插入内容。

:after

p:after

在每个 元素的内容之后插入内容。

 

1 在选择前 或 后加增加div

1.1 通过改变结构实现的

<!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>

浏览器打印结果

 

 

1.2 通过 css展示div

1.3 display:block 块级标签

<!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>

浏览器打印结果

 

1.4 margin:

两个值分别为(上下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>

浏览器打印结果

 

1.4.2 通过样式

<!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>

 

浏览器打印结果

 

下午10 优先级

样式继承

<!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属性

 

 

 

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

示例2.1 id(高)和四个类标签优先级比较

<!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>

打印结果

 

示例2.2 id高于class

<!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>

浏览器打印结果

 

 

示例2.3 class高于基本标签p

优先级 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>

浏览器打印结果

 

示例2.4

优先级一致时,谁在下面 按谁的

<!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>

 

浏览器打印结果

 

 

层级越深,优先级越高

important

优先级低,改不动

仅限测试使用,优先级最高

<!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

 

 

 

下午11 css文本属性

选择器作用: 控制一个或多个标签

文本属性操作

font-size 字体像素

font-weight 调粗细 100-900

体重 调粗细

font-style 倾斜

font-family 字体

color

 

 

 

 

<!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>

浏览器打印结果

 

 

位置上控制

text-align(文本对齐方式)

水平居中 center

text-align: left;

text-align: center;

text-decoration: none;

取消下划线

<!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标签设置

浏览器给的有默认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>

修改为.c1 a

<!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>

 

下午12

 

 

 

 

行高

<!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>

 

 

 

高度height

 

 

文本的上间距和下间距一样

 

 

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>

 

 

 

对比增加底线高度line-height: 300px; 前后区别

<!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>

 

 

line-height

添加c2

<!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>

 

 

 

下午13 vertical-align 字体行高

加边框

<!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 字体行高

vertical-align属性设置元素的垂直对齐方式

浏览器默认把图片显示在baseline上

<!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;
}

 

 

 

 

 

改为10像素

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>

 

 

 

 

下午14 背景属性

<!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>

 

background-color

 

 

background-image

<!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>

 

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: 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;
}

 

 

background-position

距离左边距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 三合一操作

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>

调整后,图片位于中间

 

 

下午15 边框属性

border

<!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-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>

 

 

 

练习

练习1

<!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>

 

 

 

练习2

<!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>

下午16 列表属性

列表属性

和div样式一样,列表阅读性更强

<!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>

 

 

 

 

下午17 三个属性-display属性

display属性

<!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>

 

 

 

 

 

 

 

 display: none; 隐藏块

 

 

 

 

 

示例

display:none;会失去原来的位置

<!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>

 

visibility: hidden;原来位置保留

<!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>

 

 

 

display:block 拥有块级标签属性

<!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>

 

display:inline; 拥有内联标签属性

<!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>

下午18 display属性2

 inline-block

做布局面临的css的核心问题

如何能够将可以设置长宽的元素,在一行显示

块级标签 独占一行,内联标签 不能设置长宽

解决方案

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>

 

 

下午19 float基本语法

 

<!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>

 

 

有块级和内联特性以外,

 

 

 

 

float概念

流动布局

流动模型(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>

浏览器显示结果

 

 

浮动属性,上一个浮动的,放在后面;上一个不浮动,就放在上层

 

 

 

c1不变 c2 c3浮动

<!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>

 

浏览器打印结果

 

 

下午20 清除浮动(未整理)

clear:left

默认没有清除

<!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>

 

左边不能有浮动元素

 

 

clear:both

上个元素是浮动的,往下行排

 

 

红色有可能是右浮动

<!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>

 

 

 

清除浮动案例-浮动塌陷与clearfix

<!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>

 

 

问题? 浮动文档流盖住普通文本工作流,怎么处理

 

 

 

 

修改content,增加clear:both; 左右两边不能有浮动

<!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>

 

 

 

 

 

 

<div class=c1></div> 实质是把正常文档流切到浮动的下边

放下边

<!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>

 

修改为:after

<!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>

做切换使用,规范用clearfix

<!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>

 

after 让css模拟div标签

下午21 内外边距

position

内外边距与盒模型

 

内边框

内容和border的间距

内容区,没设置padding

 

<!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>

 

 

 

 

 

 

 

 

内边距50,绿色内容为200px 200px

上 右 下 左

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>

 

 

 

 

外边距

 

 

设置margin

<!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>

 

 

 

 

 

 

两个都设置 以最大的为主  20px

.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;

 

 

下午22 margin案例(未整理)

外边距的案例

浏览器自带对body有个边距

默认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>

 

上下为0 左右为auto 此时居中

 

 

 

margin: 100px auto;

 

内层div 居中

下午23

画盒模型

子div 利用margin居中

再放盒子

一堆a标签

 

第二个大盒子

三个子div

 

 

设置完盒子,加样式css

浮动,推荐float

只在父标签左飘

作业 注册页面

 



这篇关于Day10 CSS基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程