Day10 CSS基础

2022/3/25 6:24:43

编程Tag： 基础 title css width height color RED Day10 200px

本文主要是介绍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 块标签

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

<!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选择器太精准，不能重复

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>

拥有两个类的样式

4 通配选择器

<!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的组合选择器

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

# 一般直接都定位到了，不用再通过子标签定位了

<!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" .../>

标签选择器

属性选择器

class .

id #

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

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

浏览器打印结果

^ 开头

$ 结尾

想要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选择器的优先级

选择器的优先级

行内式 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;
}

background-position

距离左边距100像素，距离上边界200像素

居中

background-position: center;

background 三合一操作

background: no-repeat center url("");

属性案例

div块比背景图片小，只能看到背景图片的一部分

默认看到左上角

调整前，显示图片左上角

代码

调整后，图片位于中间

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

10px 不占100*100像素区域

设置右边框

设置下边框

border-radius: 20%;四个角弧度

border-radius: 20%;

右下角弧度

border-bottom-right-radius: 25%;

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

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

绿色和蓝色在正常文件流，红色浮动不在一个层级

设置红色向右浮动

浏览器显示结果

浮动属性，上一个浮动的，放在后面；上一个不浮动，就放在上层

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

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

红色有可能是右浮动

清除浮动案例-浮动塌陷与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的最后

做布局使用

修改为: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基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Day10 CSS基础

01 上节回顾

http协议语法（*****）

请求格式

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

向服务端发送请求的形式

响应格式

HTML

基本标签

常用标签

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

02 CSS的引入方式

三种引入方式

style标签

行内样式

css文件

03 css选择器

css基本选择器

1 标签名选择器 p标签

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

3 class选择器

目的 三个颜色红绿蓝

用三个类，存在重复代码

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

拥有两个类的样式

4 通配选择器

练习

练习1

练习2

练习3

04 css的组合选择器

让div1变红？

父子兄弟关系

后代选择器

示例

示例 改为.c1 .c4

子代选择器 >

示例1

示例2

层级越多 受干扰越少

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

05 与或选择器

与选择器

不加空格

示例 只想让p1变红？

或选择器 ，

使用 ，逗号分割

示例 让p1和h3都变红

06 兄弟选择器 + ~

毗邻兄弟，紧紧挨着的 +

使用+号就是紧紧的挨着的

普通兄弟选择器 ~

一直往下找

没有找到，显示灰色

兄弟选择器，不包含自身标签

07 属性选择器

回顾标签语法

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

E element

示例-单写属性[type]

修改

自定义属性

配合 与选择器 使用

本质是[class~=”c1”]

正则用法

~ 不是全等于，可以匹配到了

^ 开头

$ 结尾

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

*

下午08 伪类选择器

anchor伪类

四种状态

link 默认状态

hover （悬浮）鼠标放上去，没点击

active 点击没有松开

visited 点击后

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

下午09 伪类选择器2

after和before

http协议语法（*）

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

目的三个颜色红绿蓝

示例改为.c1 .c4

层级越多受干扰越少

示例只想让p1变红？

或选择器，

使用，逗号分割

示例让p1和h3都变红

配合与选择器使用

1 在选择前或后加增加div