【无标题】HTML+CSS

最新推荐文章于 2024-08-06 15:31:28 发布

つ微凉徒眸挚半

最新推荐文章于 2024-08-06 15:31:28 发布

阅读量987

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_73696461/article/details/128554149

版权

一、第一部分

1.1内容一：

VSCode编译器基本使用：

ctrl+s:保存
ctrl+a:全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+向下：快速复制一行
alt+向上或向下：快速移动一行
tab:向后缩进
tab+shift:向前缩进
ctrl+alt+方向键(上下):添加光标
ctrl+shift+l:所有相同单词后添加光标

1.2内容二：

HTML:结构
CSS:样式
JavaScript:行为（互动）

`<style>
       div{color:red;font-style:italic;}
       </style>
       <div>`HTML+CSS系列教程</div>

以上为文字的颜色和样式的改变（红色and斜体）

二、第二部分

主要内容：HTML基础结构和属性

1.1 内容一：HTML:超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>（也叫标签）：

          <header>
+         <footer>`

语言：编程语言
标记的写法：
单标签 <header>
双标签 <header></header>
创建标签的快捷键：单词+tab键-> <单词>

1.2 内容二：HTML初始代码

<!DOCTYPE html><!--文档声明:为一个html文件-->
<html lang="en"><!--html文件最外层标签:包裹所有html标签代码 lang="en"表示英文网站 lang="zh-CN"表示一个中文网站-->
<head>
    <meta charset="UTF-8"><!--元信息:是编写网站中的一些赋值信息 charset="UTF-8"国际编码,让网站不出错.-->
    <title>我是一个网页标题</title><!--设置网页的标题-->
    </head>
    <body>
    hello world<!--显示网页内容-->
    </body>
    </html>

快捷添加和删除注释:
1.ctrl +/
2.shift +alt +a

! + tab键:快速创建初始代码

1.3 内容三 : HTML语义化

好处:
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。

A. 标题与段落

标题->双标签:<h1></h1>......<h6></h6>
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签.
段落->双标签:<p></p>
文本修饰标签：
1.强调 -> 双标签：<strong></strong>、<em></em>
区别：
1.写法和展示效果是有区别的一个加粗，一个斜体。
2.strong强调性更强,em强调性稍弱。
2.上、下标：<sup><sup/>、<sub></sub>
3.删除和插入文本：<del></del>、<ins></ins>

实际操作：

<!DOCTYPE html>
<html lang "en">
    <head>
        <meta charset="UTF=8">
    <title>我是一个网页标题</title>

    </head>
    <body>
     <h1><strong>南京邮电大学通达学院</strong></h1>
     <p><em>南京邮电大学通达学院(Tongda College of Nanjing University of Posts and Telecommunications)</em>位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人。</p>
     <h2>创办时间</h2>
     <p><del>2000</del> <ins>1999年</ins></p>
     <h2>主管部门</h2>
     <p>江苏省教育厅</p>
    </body>
</html>

1.4 内容四：路径

相对路径： ./ (当前级别文件)、…/（上一级别文件）
绝对路径

1.5 内容五：图片标签

img - >单标签
src :引入图片的地址
alt :当图片出现问题的时候，可以显示提示文字
title :提示信息
width、height :图片大小

<img src="" alt="" title="图片提示信息" width="" height="" >

1.6 内容六：跳转链接

a -> 双标签 <a></a>
href属性：链接的地址
target属性:可以改变链接打开方式,默认情况下:在当前页打开_self 新窗口打开_blank
base- > 单标签:改变链接的默认行为.

<head>
<base target="_blank">
</head>

<body>
1.<a href="" >文字</a>

2.<a>
<img src="图片地址" alt=".....">
</a>
3.<a href="" target="">文字</a>
</body>

1.7 跳转锚点

法一：#号 + id属性
法二：#号 + name属性（注意name属性加给的是a标签）
实机演示:
法一演示：

<!DOCTYPE>
<html lang="en">
    <head>
    
        <meta charset="UTF-8">
      
            <title>我是一个网页标题</title>

        
        </head>
    <body>
        <a href="#a">我是一个标题</a>
       <a href="#b">我是第二个标题 </a>
       <a href="#c"> 我是第三个标题</a>
       <h2 id="a">我是一个标题</h2>
       <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <h2 id="b">我是第二个标题</h2>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <h2 id="c">我是第三个标题</h2>
      
      
      
      
      
      
      
      
      
       
     </body>
</html>

法二演示：

<body>
a href="#a">第一项</a>
      <a href="#b">第二项</a>
      <a name="a"></a>
        <h2>第一项</h2>
      <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <a name="b"></a>
        <h2>第二项</h2>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
      
      
      
       
  
</body>

1.8 特殊字符

& + 字符
解决冲突左右尖括号、添加多个空格的实现

实机演示:

<body>
    <p>
        &lt; 123 &gt;&reg;&copy;

    </p>
    
</body>

1.9 列表标签

无序-> ul li 符合嵌套的规范。
有序-> ol li 一般用的少，无序可以实现
(type 可以更改属性，有序列表以后可以通过CSS修饰获得)

无序：
正确:

<body>
<ul type="circle">
    <li>第一项</li>
</ul>
</body>

错误:

<body>
<ul>
  <p>
    <li>第一项</li>
  </p>
</ul>

</body>
<!--<ul>和<il>之间不能有其他的标签,但是<il></il>之间可以.-->

有序：
演示：

<body>
<ol type="1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
<ol>
</body>

2.0 定义列表

<dl>(define list)定义列表
<dt>(define list title)定义专业术语或名词
<dd>(define list define)对名词的解释
实机演示：

<body>
<dl>
	<dt>一<dt>
	<dd>1</dd>
	<dt>二<dt>
	<dd>2</dd>
	<dt>三<dt>
	<dd>3</dd>
</dl>
</body>

hr标签：

<hr color="red" width="500px" align="right" noshade>//noshade消除阴影

在这里插入图片描述

2.1 嵌入列表

实机演示：

<body>
    <strong><h1>好美味小吃</h1></strong>
    <ul>
        <li>小吃类</li>
        <ul>
            <li>煮粉干</li>
            <li>拌芹菜</li>
            <li>蛋炒饭</li>
            <li>鸡蛋</li>
            <li>米饭</li>
        </ul>
        

    </ul>
    <ul>
        <li>卤味类</li>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>
    
</body>

2.2 表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<td>:定义表头
<caption>：定义表格表题
注：有嵌套关系
语义化标签：<tHead>,<tBody>,<tFood>
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次

<table>
    <caption>天气预报</caption>
<thead>
    <tr>
        <th>日期</th>
        <th>天气情况</th>
        <th>气温</th>
    </tr>
    <tr>
        <td>2022.10.18</td>
        <td>晴天</td>
        <td>12~20</td>
        
    </tr>
    <tr>
        <td>2022.10.19</td>
        <td>多云</td>
        <td>9~18</td>
    </tr>

</thead>
<tfoot>
    阿巴阿巴
</tfoot>
</table>

2.3 表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的属性
rowspan:合并行
colspan:合并列
align:左右对齐
valign:上下对齐

<table border="1" cellpadding="30" cellspacing="30">
    <caption>天气预报</caption>
<thead>
    <tr>
        <th colspan="2">日期</th>
        <th>天气情况</th>
        <th>气温</th>
    </tr>
    <tr>
        <td rowspan="2">2022.10.18</td>
        <td>白天</td>
        <td>晴天</td>
        <td>12~20</td>
        
    </tr>
    <tr>
       
        <td>黑天</td>
        <td>晴天</td>
        <td>12~20</td>
        
    </tr>
    <tr>
        <td rowspan="2">2022.10.19</td>
        <td>白天</td>
        <td>多云</td>
        <td>9~18</td>
    </tr>
    <tr>
       
        <td>黑天</td>
        <td>多云</td>
        <td>9~18</td>
    </tr>

</thead>

colspan=“2“和rowspan=“2”相当于输入了两列（行），相当于在原有基础上多了两列（行），所以原有2列（行）时其实在它们之前还有两列（行）。

实机演示：

<table border="1" cellpadding="60" cellspacing="60">
    <caption>天气预报</caption>
<thead>
    <tr valign="bottom">
        <th colspan="2">日期</th>
        <th>天气情况</th>
        <th>气温</th>
    </tr>
    <tr align="right">
        <td rowspan="2" >2022.10.18</td>
        <td>白天</td>
        <td>晴天</td>
        <td>12~20</td>
        
    </tr>
    <tr align="right">
       
        <td>黑天</td>
        <td>晴天</td>
        <td>12~20</td>
        
    </tr>
    <tr >
        <td rowspan="2">2022.10.19</td>
        <td>白天</td>
        <td>多云</td>
        <td>9~18</td>
    </tr>
    <tr>
       
        <td>黑天</td>
        <td>多云</td>
        <td>9~18</td>
    </tr>

</thead>
<tfoot>
    阿巴阿巴
</tfoot>
</table>

在这里插入图片描述

2.4 表单组合实例

表单标签：form 、input（单标签）有一个type属性，决定是什么控件。
<textarea> 多行文本框
<select> <option>下拉菜单

在这里插入图片描述
实机操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <table border="1" cellpadding="30">
            <tbody>
                
                <tr>
                    <td>电子邮箱：</td>
                    <td><input type="text" placeholder="请输入电子邮箱"></td>
                </tr>
                <tr>
                    <td>设置密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td>真实姓名：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="radio" name="gender">男 &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="radio" name="gender">女</td>
                </tr>
                <tr>
                    <td>生日：</td>
                    <td>
                        <select >
                            <option selected disabled>请选择</option>
                            <option >2000</option>
                            <option >2001</option>
                            <option >2002</option>

                        </select>年
                        <select >
                            <option selected disabled>请选择</option>
                            <option >1</option>
                            <option >2</option>
                            <option >3</option>
                        </select>月
                        <select >
                            <option selected disabled>请选择</option>
                            <option >1</option>
                            <option >2</option>
                            <option >3</option>
                        </select>日
                    </td>
                </tr>
                <tr>
                    <td>我现在：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>验证码：</td>
                    <td><input type="text"></td>
                </tr>
                <tr> 
                    <td colspan="2" align="center">
                    <form>
                    <input type="submit" value="提交" style="width: 100px; height: 30px;">
                    </form>
                    </td>
                </tr>
            </tbody>
           
        </table>
    </form>
</body>
</html>

第二部分

主要学习CSS

1.1 CSS基础语法

<div>(块) <span>(内联)

格式：选择器（属性1：值1；属性2：值2）
单位：px ->像素、%->百分比
基本样式：width、height、background-color
CSS注释：1. ctrl + / 2. shift + ctrl + A

1.2 内联与内部样式

内部样式：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div{ width:50% ;height:50% ;background-color: green;}
   </style>
</head>
<body>
   <div>这是一个块</div>
   <div>这是一个块</div>
</body>
</html>

内联样式：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div style="width:50% ;height: 50px; background-color:green">这是一个块</div>
   <div style="width:50%;height: 50px; background-color:green">这是一个块</div>
</body>
</html>

1.3 外部样式

1.<link>标签 rel、href 2.@import(不建议使用)等页面加载完成后再显示css
CSS中的颜色表示法：单词表示法、十六进制表示法、RGB三原色表示法。

<head>
<link rel="stylesheet" href="./common.css">
</head>

1.4 背景样式

background-color:背景颜色
background-image:背景图片
background-repeat:背景图片的平铺方式
background-position:背景图片的位置
background-attchment:背景图随滚动条的移动方式（有许多属性，其中scroll为默认值按元素进行偏移，fixed按照浏览器进行偏移）
background-size：调节背景大小（cover可以把背景放大，使其可以完全覆盖背景区域，可能会因为太大，有些显示不出来）（contain也是放大，但是它是自适应的，铺不满时，会留白。）

1.5 边框样式

border-style:边框样式
border-width:边框大小
border-color:边框颜色
（注：针对某一条边可以进行单独设置）
例如:
div{width ; height: border-top/left/right/bottom-color:......}

1.6 CSS文字样式

文字的类型：font-family 样式有空格的需要“ “（双引号）

<style>
div{font-family:文字样式}
</style>

文字的大小：font-size 可以数字也可英文（默认 16px）
以下方式不推荐，且尽量大小设置为偶数。
字体粗细：font-weight ：模式:（正常 normal 加粗 bold）
写法:单词 || 数字（100~900，100-500正常，500-900都是加粗）
字体样式：font-style 模式：正常（normal）斜体（italic）
写法：单词（normal、italic、oblique）
注：oblique也是表示斜体，用得比较少。
区别：1.italic 带有倾斜属性的字体可以设置。
2.oblique 没有倾斜属性的也能设置。

1.7 CSS段落样式

test-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰
注：添加多个文本修饰：line-through underline overline
test-transform：文本大小写
小写：lowercase
大写：uppercase
只对首字母大写：capitalize
text-indent：文本缩进
首行缩进
em相对单位：1em永远与字体大小相同
text-align：文本对齐方式
对齐方式：left、right、center、justify（两端点对齐）
line-height：定义行高
默认行高：不是固定值，根据当前字体大小变化
取值方式：1. 数字（px） 2.scale（比例值，跟文字大小）
letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）
英文和数字不能折行问题：
1.word-break：break-all；（非常强烈）
2.word-wrap：break-word；（不是那么强烈）
实机操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 800px;}
        h1{text-align: center;color:  #FF6800;}
        h2{color:#87C8FB;text-indent: 2em ;}
        #p1{font-style: italic;font-weight: bold;text-indent: 2em;}
        #p2{color: #A4E88D;line-height: 30px;text-indent: 2em;}
        #p3{color: #9EF4FB;line-height: 30px;text-indent: 2em;font-style: italic;text-decoration: underline}
        #p4{color:; line-height: 30px;text-indent: 2em;letter-spacing : 10px; font-weight: bold;}
        #p5{color:#F9B4F8;line-height: 30px;text-indent: 2em;;}
    </style>
</head>
<body>
    <div>
        <h1>Angelbaby</h1>
        <h2>基本信息</h2>
        <p id="p1">杨颖（Angelababy），1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
        <p id="p2">2009年主演电影《全城热恋》。2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿，2015年5月参演好菜坞电影《独立日2》；7月，主演电影《摆渡人》。</p>
        <h2>早年经历</h2>
        <p id="p3">1989年2月28日Angelababy出生在上海，中文名扬械、杨顾自小随家人到上海定星，在上海的消艺学控学演戏及就复13岁时，格顾回香港加入了Talent Bang 还担任Viva Club Disney主持。</p>
        <h2>个人生活</h2>
        <p id="p4">2015年5月27日，黄晓明和An g ela baby(杨颖)在青岛民政局领证完婚 。</p>
        <p id="p5">2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>
        
    </div>
</body>
</html>

1.8 CSS复合样式

复合样式是通过空格的方式实现的，复合写法有的不需要顺序，有的需要（例如：font 只能 size family在最后且不能缺少这两个。）
其他：例如background : red url() repeat 0 0 ;
border : 1px red solid ;(不需要考虑顺序)
实机演示：

<style>
     div{width: 1300px; height: 1500px;
        background:  red url(./QQ图片20221020231714.jpg) no-repeat;<!--注意每个单独的语句后要加分号隔开。-->
        border: 1px solid green;
        font: italic bold 50px 黑体 }
    </style>
</head>
<body>
    <div>这是一个块</div>
    
</body>

1.9 CSS选择器：

ID选择器：#elem{} id=“elem”

1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchButton(小驼峰) SearchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

CLASS选择器：. elem{} class=“elem”

注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法

<style>
        .div1{background : red ;}
        .p1{font: italic bold 50px 黑体;}
        .p2{font:  100px 宋体;}
    </style>
</head>
<body>
    <div class="div1">这是一个块</div>
    <p class="p1">这是一段话</p>
    <p class="p2">这是一段话</p>
</body>

标签选择器（TAG选择器）
eg：div{} <div></div>
使用场景：
1.去掉某些标签的默认样式
2.复杂的选择器中，如层次选择器
群组选择器（分组选择器）
可以通过逗号的方式，添加统一的CSS样式，来达到代码复用。

<style>
      div,.p1,.p2{background:  red;}
      /*或者是div,p{background: red}  */
    </style>
</head>
<body>
    <div class="div1">这是一个块</div>
    <p class="p1">这是一段话</p>
    <p class="p2">这是一段话</p>
</body>

通配选择器
*{ } - > div,ul,ol,li,h1,h2......{} （前者都可以控制后面所有标签）
注：尽量避免使用通配选择器，因为会给所有标签添加样式，慎用。
使用场景：去掉标签所有样式时。
层次选择器
后代 M N { }
父子 M > N { }
兄弟 M ~ N { } 当下M下面的兄弟N标签
相邻: M + N { } 当前M下面相邻的N标签
后代演示：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li {background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <ul>
        <li>111</li>
            <ol>
                <li>111</li>
                <li>111</li>
            </ol>
        
    </ul>
    <ol>
        <li>

        </li>
    </ol>
</body>

父子演示：

<style>
      ul > li {border: 1px  red solid;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <ul>
        <li>
            <ol>
                <li>111</li>
                <li>111</li>
            </ol>
        </li>
    </ul>
</body>

兄弟演示：

<style>
      div ~ ul  {border: 1px  red solid;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <ul>
        <li>
            <ol>
                <li>111</li>
                <li>111</li>
            </ol>
        </li>
    </ul>
    <ul>
        <li>
            <ol>
                <li>   546465   </li>
            </ol>
        </li>
    </ul>
    <ol>
         <li>111</li>

         <li>222</li>
    </ol>
    <ul>
        <li>111</li>
    </ul>

相邻演示：

<style>
      div +  p {border: 1px  red solid;}
    </style>
</head>
<body>
    <p>这是一段话</p>
    <div>这是一个块</div>
    <p>这是一段话</p>
    <p>这是一段话</p>
    <p>这是一段话</p>
</body>

属性选择器
M [attr] { }
1. = :完全匹配
2. *= ：部分匹配
3.^ = :初始匹配
4. $ = :结束匹配
伪类选择器
CSS伪类用于向某些元素添加特殊效果，一般用于初始样式添加不上的时候用伪类来添加。

： link 初始访问前链接颜色
：visited访问过之后显示
：hover鼠标移入时显示
：active点击后显示的颜色
注意:
1.link visited 只能给a标签添加，hover和active 可以给所有标签添加。
2.如果四个伪类都生效，一定要注意顺序：LVHA
3.一般网站只能去设置： a{} a:hover{ }
: after、: before 用于后续添加一些文字或修饰
：checked、：disabled用于表单的选择修饰
：focus用于文本输入框

实机演示：

<style>
    a:link { color:rgb(226, 180, 43);}
    a:visited{ color :aquamarine}
    a:hover{ color:brown}
    a:active{color: blue;}
    input:focus{ background-color:red}
    input:checked{width: 100px ;height: 100px;}
    :disabled{width: 500px;height: 100px;color: red;}
   </style>
</head>
<body>
   <a href="#">zshisfdh</a>
   <input type="text">
   <input type="checkbox" disabled>
  <select >
   <option value="" disabled>请选择</option>
   <option value="">1</option>
</body>

结构性伪类选择器

nth-of-type（）角标是从第一项开始的，1表示第一项…… | n值表示从0到无穷大
first-of-type：所有第一项
last-of-type：所有最后一项
only-of-type：所有中只有一项
nth-of-child（）在同类型中的第几个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-of-type(3){color:red;}
        li:first-of-type{color: green;}
        li:last-of-type{color:blue}
        div:only-of-type{background-color: aqua;}
        h2:nth-of-type(2n-1){color:yellow}
    </style>
</head>
<body>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <ul>
        <li>123123</li>
        <div>456456</div>
        <li>123123</li>
        <li>123123</li>
        <li>123123</li>
        <li>123123</li>
    </ul>
        <h2>123123123</h2>
        <h2>123123123</h2>
        <h2>123123123</h2>
        <h2>123123123</h2>
        <h2>123123123</h2>
</body>
</html>

2.0 CSS继承

文字相关的可以被继承
布局相关的样式不能被继承（默认是不能被继承的，但是可以通过设置继承 inherit 值）

2.1 CSS优先级

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置的样式
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级更高。
单一样式优先级
style 行间 > id >class > tag (标签)> *(通配) > 继承

注:
style 权重 1000
id 权重 100
class 权重 10
tag 权重 1
! important
提升优先级，非规范方式，不建议使用。（不能对继承进行使用）
标签+类与单类
标签+类 > 单类
群组优先级
群组与单一选择器的优先级相同，靠后的优先级更高

优先级比较方法：

权重法：
eg: p h .elem #vxc :1 + 1 +10 +100
但是不同等级下的有着本质差别，不能通过相加而越级超越。
约分法
p h li ------>li
ul p #vxc ----->#vxc

第三部分

CSS盒子模型

组成：content ->padding->border->margin
物品填充物包装盒盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值：30px （上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom

注:
1.背景色填充到margin以内的区域（不包括margin区域）
2.文字在content区域添加。
3.padding不能为负数，而margin可以为负数。

box-sizing：
盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box ：width、height - > content
border-box：width、height - > content padding border
使用场景：
1.不用去计算一些值
2.解决一些百分比的问题

对比演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 200px;height: 500px;background-color: red; padding: 50px;border: 10px blue solid ;margin: 5px;}
        #box2{width: 200px ;height: 500px; padding: 50px;background-color: blue;border: 10px red solid;margin: 5px;
        box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box1">这是一个盒子</div>
    <div id="box2">这也是一个盒子</div>
</body>
</html>

盒子模型的一些问题：
1.margin叠加问题，出现在上下margin同时存在的时候，会取上下值中较大的值为叠加值。
2.margin传递问题，出现在嵌套结构中，只对margin-top的问题。

扩展：
1.margin左右自适应是可以的，但是上下不能。
2.width、height不设置时，对盒子模型的影响。（上下两个盒子自动对齐自适）

标签类型

block（块）:div、p、ul、li、h1……
1.独占一行
2.支持所有样式
3.不写宽时候，宽度由内容决定
4.所占的区域一定为矩形

inline （内联）：span、a、em、strong、img……
1.挨在一起
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占区域不一定是矩形
5.内联标签之间会有间隙，原因：换行产生
inline-block（内联块）：input、select……
1.挨在一起，但是支持宽高

注意：布局一般用块，修饰文字一般用内联标签

标签嵌套规范

(ul、 li) (dl、 dt、 dd) ( table、 tr、 td)

块能嵌套内联
<div><span></span><a href="#"></a></div>
块不一定嵌套块正确：<div><div></div></div>错误:<p><div></div></p>
内联是不能嵌套块

特殊：<a href="#">
			<div></div>
		</a><!--a标签是一个特殊标签，它有它自己的特性，不完全属于内联和块的分类-->

透明度和手势

opacity：0（透明）~1（不透明）0.5（半透明）
注意：占空间，所有子内容也会透明
rgba(): 0 ~ 1
注意：可以让指定样式透明，而不影响其他样式
cursor (手势)
default：默认箭头
要实现自定义手势：
准备图片：.cur 、.ico
例如：cursor:url(./img/cursor.ico/),auto;
最大、最小宽高
min-width、min-height；max-width、max-height
%单位：换算 -> 以父容器的大小换算的

CSS默认值

有默认值的：
没有默认值的：

CSS rest

*{margin :0;padding:0}
优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能
body，p，h1，ul{margin ：0；padding：0；}
ul {list-style：none；}
a { text-decoration：none；color： }
img在嵌入块时会有一段空白：

在这里插入图片描述
可以用两种方式解决：

img{dispaly:block}
img{vertical-align:bottom;}bottom(底线)->y的最下面、baseline（基底）- >x的最下面

PS 软件应用

此内容自主动手操作。

float 浮动

文档流
文档流是文档中可显示对象在排列时所占用的位置
float特性
加浮动的元素，会脱离文档流，会沿着父容器靠左靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行来排列。
float取值
left、right、none（默认）

注意：
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加

如何清除浮动
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死。不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow : hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
display : inline-block(BFC规范)，不推荐。父容器会影响到后面的元设置空标签；不推荐，会多添加一个标签。
after 伪类：推荐，是空标签的加强版，目前各大公司的做法。

CSS定位

position：
static（默认）、relative、absolute、fixed、sticky
relative：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不能影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
absolute:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖失元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
相对static定位以外的第一个父元素进行定位
父层中若都未定义absolute和relative，则其相对body进行定位
z-infex
数值越大，层次越高（static无效）

文本的首行缩进和间距

p{
            font-size: 20px;
            text-indent: 2em;//首行缩进2字符
            letter-spacing: 10px;//文字间距10px 英文也可以用word-spacing
        }

二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
           list-style: none;
        }
        #box>li{
            width: 150px;
           height: 30px;
           border: 1px;
           text-align: center;
           font-size: 30px;
           line-height: 30px;
           background-color: blue;
        }
        #box>li:hover{
            background-color: white;
        }
        #box>li ul{
            display: none;
            background-color: white;
        }
        #box>li:hover ul{
            display: block;
        }
        #box>li li:hover{
            background-color: green;
            color: white;
        }//">"表示前面的亲儿子选项（靠得最近的）
    </style>
</head>
<body>
  <ul id="box">
    <li>菜单
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </li>
  </ul>
</body>
</html>

补充

width：calc（100%-100px）用于分栏布局
input将选中吧区域扩大到文字部分：

<input type="radio" name="sex" id="man"></input>
<label for="man">男</label>

input提交文件：

 <input type="file">
    <br>
    <form action="填后端方向">
    <input type="image" src=" ">
    </form>

下拉菜单

<select name="" id="" size="1" multiple>//size表示显示几个，multiple表示多选，按shift和ctrl进行多选
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>//value值提交给后端
   </select>

文本域

<style>
/* vertical垂直方向，horizontal水平方向。默认值为both，固定大小为none。 */
    textarea{
        resize: horizontal; 
    }
</style>
<body>
    <div>
   <textarea name="" id="" cols="30" rows="10" placeholder="1111"></textarea>
</div>
</body>

数据列表

 <input type="text" list="mylist">
   <datalist id="mylist">
    <option value="123"></option>
    <option value="31234"></option>
    <option value="45621"></option>
    <option value="13154"></option>
   </datalist>

表单属性
<input type="text" autofocus multiple required>//autofocus表示聚焦，multiple表示可以写多个用逗号隔开，require表示必填。
盒子阴影：
h-shadow:必需的。水平阴影的位置，允许负值
v-shadow：必需的。垂直阴影的位置，允许负值
blur：可选。模糊距离
spread：可选。大小
color：可选，颜色
inset：可选，由内而外的改变阴影

接上一部分：

fixed：
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky：
在指定的位置，进行粘性操作
居中
利用定位和margin进行居中

CSS添加省略号

width：必须有一个固定的宽
white-space：nowrap：不让内容折行
over-flow：hidden：隐藏溢出的内容
text-overflow：ellipsis：添加省略号

<style>
        div{
            width:100px;
            border: 1px black solid;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
    
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

显示情况：
在这里插入图片描述

CSS精灵

主要将多个图片放在一个图中进行加载，减少递交次数，增快加载速度。

CSS圆角设置

boder-radius：可以使用px和百分号%

boder-radius：10px 20px //前者表示的是左上角，右下角的圆角值

半圆演示：

box{
	width:300px
	height:0px
	background-color:red
	boder-redius:150px 150px 0 0
	}

在这里插入图片描述
全圆演示：

#box{
	width:300px;
	height:300px;
	background-color:red;
	border-radius:50%(150px);
	}

在这里插入图片描述

椭圆角

#box{
	width:300px;
	height:300px;
	background-color:red;
	border-radius:50px/40px;
	}

在这里插入图片描述

PC端布局

通栏：自适应浏览器的宽度
版心：固定一个宽度，并让容器居中
实际操作：

在这里插入图片描述

css：

*{margin: 0px;padding: 0px;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: darkgrey;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial;width: 1514px;}

.l{ float: left;}

.r{ float: right;}

.clear::after{ content: ""; display: block;clear: both;}

.container{width: 1080px; ;margin:0 auto ;position: relative;}

.container-fluid{width:100%;}

#head{height :81px}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 58px;}

index：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{position: relative;}
        #banner .banner_list{width: 100%;height: 469px;background:center 0 no-repeat;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%;background:center 0 no-repeat;position:absolute;left: 0;top: 0;opacity: 1;z-index: 1;}
        #banner .banner_list li .active{opacity: 1;z-index: 10;}
        #banner .banner_list li a{display: block;width: 100%;height: 100%;}
        #banner .banner_btn{width: 100%;position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
        #banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50% ;box-sizing: border-box;margin: 0 6px;cursor: pointer;} 
        #banner .banner_btn li.active{background: white;}

        #service{overflow: hidden;min-height: 107px;}
        .service_list{text-align: center;margin-top: 34px;}
        .service_list li{float: left;width: 250px;margin:0 10px;}
        .service_list div{width: 102px;height: 102px;margin: 0 auto;}
        .service_list li:nth-of-type(1) div{background-image: url(./img/web1.png);}
        .service_list li:nth-of-type(2) div{background-image: url(./img/mail1.png);}
        .service_list li:nth-of-type(3) div{background-image: url(./img/graphic1.png);}
        .service_list li:nth-of-type(4) div{background-image: url(./img/e-bussiness1.png);}
        .service_list h3{font-size: 18px;color: #434343;line-height: 36px;}
        .service_list p{font: size 14px;color: #6d6d6d ;line-height: 22px;}
    </style>
</head>
<body>
    <div id="head" class="container ">
        <div class="head_logo l">
            <a href="#">
                <img src="./img/logo.png" alt="博文尚美";title="博文尚美">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME </a>
            </li>
            <li>
                <a href="#">ABOUT </a>
            </li>
            <li>
                <a href="#">PROTFOLIO </a>
            </li>
            <li>
                <a href="#">SERVICE </a>
            </li>
            <li>
                <a href="#">NEWS </a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
    <div id="banner" class="contaner-fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(./img/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./img/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./img/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./img/banner.png);">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
           <li class="active"></li>
           <li></li>
           <li></li>
           <li></li>
        </ol>
    </div>
    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
    <ul class="service_list">
       <li>
            <div></div>
            <h3>1.WEB DESIGN</h3>
            <p>文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
       </li>
       <li>
            <div></div>
            <h3>2.GRAPHIC DESIGN</h3>
            <p>
                文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
        </li>
        <li>
            <div></div>
            <h3>3.E-BUSINESS PLAN</h3>
            <p>
                文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
        </li>
        <li>
            <div></div>
            <h3>4.MALBOXAGENTS</h3>
            <p>
                文本文本文本文本文本文本文本
                <br>
                文本文本文本文本
            </p>
        </li>
    </ul>
    </div>
</body>
</html>

box-sizing:border-box告诉浏览器width包含了padding和borde

strong和b、em和i标签

几者都是表示强调的标签，表现为加粗和斜体
区别在于strong和em是具备语义化的，而b和i不具备语义化

引用标签

blockquote：引用大段解释
q：引用小段的短语解释
abbr ：缩写或首字母缩略词
address：引用文档地址信息
cite:引用著作的标题

iframe嵌套页面

frameborder：规定是否显示框架周围的边框
width：定义iframe宽度
height定义ifame中的高度
scrolling规定是否在iframe中显示滚动条
规定在iframe中引入的URL
srcdoc：规定在iframe中显示的页面内容
实机演示：

<iframe src="http://www.taobao.com" frameborder="1" scrolling="1" height="400" width="400"></iframe>

在这里插入图片描述

pre与code

用作在网页中显示代码·< >·分别用&lt和&gt代替

实机演示：

<body>
    <pre>
        <code>
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0 &gt;
        </code>
    </pre>
</body>

在这里插入图片描述

map 与 area

给特殊图形添加链接，area能添加的热区形状：矩形、圆形、多边形。
矩形：rect 圆形：circl 多边形：poly

<img src="" alt="" usemap="#sh">
    <map name="sh">
        <area shape="poly" coords="此处写坐标" href="http://www,taobao.com" alt="">
    </map>

embed和object

给flash和一些插件添加标签
（现在一般情况下不会使用，因为浏览器的原因）

<embed src="加入插件地址"></embed>
<object>
		<param name="movie" value="加入插件地址">
</object>

audio和video

audio表示嵌入音频文件，video标签表示嵌入视频文件。默认控件不显示，可以通过controls属性来显示控件。（属于H5的功能）
为了能够支持多个备选文件的兼容支持，可以配合source标签。

<audio scr="加入音频地址" controls loop（重复播放）autoplay(自动播放)></audio>
<video src="加入视频地址" controls></video>
<video>
	<source scr="加入视频地址（MP3）"></source>
	<source scr="加入视频地址（MP4）"></source><!--顺次进行调试看何种形势可以播放
	--!>
</video>

文字注解与文字方向

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签调整文字顺序

<ruby>
	含<rt>han</rt>
</ruby>
<p>
	<bod dir="rtl(反序/ltr正序)">123</bod>
<p/>

<style>span{direction:rtl;unicode-bidi:bidi-override;}</style>
<span>123</span>

link扩展学习

添加标题栏的小图标：(放入head)

<link rel="icon" type="/img/x-icon（stylesheet、dns-prefetch）" herf="图标网址.icon">

meta标签扩展学习

meta辅助信息：

<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="网站描述">
    <meta name="keywords" content="网站关键字">
    <meta name="renderer" content="webkit">

HTML5新语义化标签

head（页眉）、footer（页脚）、main（主体）、hgroup（标题组合）、nav（导航）
article（独立的内容）、aside（辅助信息的内容）、section（区域）、figure（描述图像或视频）、figcaption（描述图像或视频的标题部分）经常一块用
datalist（选项列表）、details/summar（文档细节/文档标题）、progress/meter（定义进度条/定义度量范围）、time（定义日期或时间）、mark（带有记号的文本）。

<main>
       <article>
        <section>
            <input type="text" list="elems">
            <datalist id="elems">
                <option value="a"></option>
                <option value="abc"></option>
                <option value="abcx"></option>
                <option value="abxds"></option>
                <option value="hsdfga"></option>
                <option value="dfhfds"></option>
                <option value="dbdffbdge"></option>
            </datalist>
            <details （open）>
                <summary>HTML</summary>
                <P>超文本</P>
            </details>
            <progress min="0" max="10" value="8"></progress>
            <meter min="0" max="100" value="80" low="90" high="100"></meter>
            <meter min="0" max="100" value="80" low="60" high="100"></meter>
            <meter min="0" max="100" value="80" low="60" high="70"></meter>
            <p>
                今天是<time title="11-24">几月几</time>
            </p>
            <p>
                今天是<mark>几月几</mark>
            </p>
        </section>
       </article>
    </main>

Flex弹性盒模型

-作用在flex容器上-	-作用在flex子项上-
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flew-basis
align-items	flex
align-content	align-self

flex-direction

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse	显示为行。但方向和row属性值是反的
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的

<style>
        #box1{
            width: 300px;
            height: 300px;
            border: 1px black solid;
            margin: 20px auto;
            display: flex;
            flex-direction:row-reverse（column、column-reverse）;
            }
        #box1 div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: white;
            text-align: center;
            background-color: red;
            }
    </style>

在这里插入图片描述

flex-wrap

取值	含义
nowrap	默认值，表示单行显示，不换行，自适应大小
wrap	宽度不够换行显示
wrap-reverse	宽度不够换行显示，但是是从上往下开始，也就是原本换行在下面的子项现在跑到上面

 <style>
        #box1{
            width: 300px;
            height: 300px;
            border: 1px black solid;
            margin: 20px auto;
            display: flex;
            flex-wrap:no-wrap（wrap、 wrap-reverse）;
            }
        #box1 div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: white;
            text-align: center;
            background-color: red;
            }
    </style>

在这里插入图片描述

flex-flow

flex-flow：column wrap；//和flex-direction：column；flex-wrap：wrap；两者和起来效果相同。

justify-content

<style>
        #box1{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            justify-content: center（加属性）;
            border: 1px solid;
        }
       #box1 div{
                    width: 50px;
                    height: 50px;
                    background-color: red;
                    border: 1px solid;
       }
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
       
    </div>
</body>

以下图片对应上方表格每一个属性

在这里插入图片描述

align-content和align-items
前者（只对应一行，无效果）：

后者：

折行时会自动分块：

content是整体进行对齐

items是以个体进行：
作用在flex子项的css

flex:0 1 auto;//分别指grow、shrink、basis

flex：0
在这里插入图片描述

flex-grow：0
在这里插入图片描述

_grid网格布局

grid-template-colums和grid-template-rows

grid-template-rows:1fr 1fr 1fr ;//也可以grid-template-rows:repeat(3,1fr);或者（auto，1fr）v7
grid-template-columns:1fr 1fr 1fr ;//也可以grid-template-columns:repeat(3,1fr);

在这里插入图片描述

grid-template-areas和grid-template:

css:
#box4{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            display: grid;
            grid-template-rows:1fr 1fr 1fr ;
            grid-template-columns:1fr 1fr 1fr ;
            border: 1px solid;
            grid-template-areas: 
            "a1 a1 a1"
            "a2 a2 a3"
            "a2 a2 a3";//或者：grid-template:
            					"a1 a1 a1"1fr
           					    "a2 a2 a3"1fr
            					"a2 a2 a3"1fr
            					/1fr 1fr 1fr;

        }
       #box4 div{
                    background-color: red;
                    border: 1px solid;
                    
       }
       #box4 div:nth-child(1){grid-area: a1;}
       #box4 div:nth-child(2){grid-area:a2;}
       #box4 div:nth-child(3){grid-area:a3;}
</div>
            <div id="box4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

grid-column-gap和grid-row-gap

前者表示竖直方向上的间隙，后者表示横向。
grid-gap属性是两者之和grid-gap:20px 10px前横后竖。

作用在grid子项上的css属性

span对应块个数.

#box3{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            display: grid;
            border: 1px solid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
        }
       #box3 div{
                    background-color: red;
                    border: 1px solid;
                    grid-column-start: 2;
                    grid-column-end: 3;//或者grid-column：2/3；
                    grid-row-start: 2;
                    grid-row-end: 3;//或者grid-column：2/3；
       }

在这里插入图片描述
网格相对于容器分布方式

justify-content：center水平居中
align-content：center垂直居中
简写形式：place-content:center center

单元格内容：

justify-items:center
align-items:center
简写形式：place-items:center center

移动端布局

物理像素/css像素=设备像素比（dpr）
常用分布方式：百分比、弹性盒子、rem布局

::webkit-scrollbar{display:none;}隐藏滚动条
column-count：；设置列数
column-span：横跨几列
break-inside：avoid避免盒子里面折行

横竖屏：

竖屏：@media screen and (orientation:portrait)and(max-width:720px)
横屏：@media screen and(orientation:landspace)(对应样式)

em、rem

vh、vw：

100vh：视口高度
100vw：视口宽度

渐变

线性渐变：linear-gradient() 支持多颜色、不同角度、不同区域
径向渐变：radial-gradient（形状属性，中心位置,渐变区域，颜色）记得在不同浏览器中要加前缀：-webkit-、moz
重复渐变：:repeat-……

动画过渡

transition：(all(表示要变得属性值) 2s(表示出现动画的延迟时间) linear（匀速） 2（消失的时间延迟）
transition-prooerty:表示要变得属性值
transition-duration:动画时间
transition-delay:延迟时间
transition-time-function:过渡动画类型

平移

transform：transitionX（）、transitionY（）

缩放

transition:scale()、scaleX（）、scaleY（）
transform-origin：center（中心点位置）

旋转

transform：rotate（角度）正：顺时针、rotateX（）绕着X轴转

倾斜

transform：skewX（）正值向右、skewY正值向上

关键帧动画

animation-name：对象名字
animation-duration：动画时间
animation-time-function：播放速度曲线
animation-delay：延迟时间
animation-iteration-count：次数
animation-play-state：running、pause运行状态
animation-direction:动画运行方向（normal正常、reverse反方向、alternate交替、alternate反方向交替）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: red;
            animation: div1(对象名字) 5s（动画时间） linear（播放速度） infinite（次数）;
            animation-fill-mode:forwards最后画面;(backwards初始画面)
        }
        @keyframes div1{
            from{
                width: 300px;
                height: 300px;
                background-color: red;
            }
            to{
                width: 600px;
                height: 600px;
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

逐帧动画

animation：step（帧数，end看不到最后一帧、start看不到第一帧）
animation：run 5s step-end

つ微凉徒眸挚半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】HTML+CSS

HTML语言：编程语言标记的写法：单标签双标签创建标签的快捷键：单词+tab键-> 快捷添加和删除注释:1.ctrl +/2.shift +alt +a ! + tab键:快速创建初始代码好处:1.在没有CSS的情况下，页面也能呈现出很好的内容结构。2.有利于SEO，让搜索引擎爬虫更好的理解网页。3.方便其他设备解析（如屏幕阅读器、盲人阅读器等
复制链接

扫一扫