ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Day10 CSS基础

2022-03-24 23:58:59  阅读:156  来源: 互联网

标签:Title color 基础 height width Day10 red CSS 200px


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

只在父标签左飘

作业 注册页面

 

标签:Title,color,基础,height,width,Day10,red,CSS,200px
来源: https://www.cnblogs.com/zhutao2014/p/16052450.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有