HTML+CSS基础学习

最新推荐文章于 2024-04-03 04:40:43 发布

请叫我聪明鸭

最新推荐文章于 2024-04-03 04:40:43 发布

阅读量6k

点赞数 15

分类专栏： html+css入门基础学习文章标签： html css vscode

本文链接：https://blog.csdn.net/qq_45919348/article/details/122492465

版权

html+css入门基础学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS基础学习

HTML

1.VScode+Typora快捷方式

a.Typora：

（1）、高亮： == # == ，内敛公式使用：$\textcolor{red}{红色文字} $

（2）、ctrl+shift+K 插入代码块

（3）、

b.vscode ：

无论光标在哪里，ctrl+enter 都会成下一段落，ctrl+shfit都会说上一行
加缩进 tab 减缩进 tab+shfit
快捷书写：！+Enter
自动填充格式：shfit+alt+F
*section*6>(h2>{章节 $KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲+p\*3>lorem)* …$

2.定义：

定义网页中有什么，是可扩展的标记语言

XML：是可扩展的标记语言

HTML是w3c组织定义的语言标准：HTML是用于描述页面结构的语言

结构：有什么东西，该东西表示什么含义

HTML:超文本标记语言

MDN：可以用来查询不会的使用时候：h1 mdn

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

与之间的文本描述网页
与之间的文本是可见的页面内容
与
之间的文本被显示为标题
与
之间的文本被显示为段落

3.第一个网页

1.书写格式

超链接的书写 =网址+名字

<a href="http://www.duyiedu.com"> 渡以教育</a>

标题的书写：

 <title>  标题元素 </title>

2.元素构成

元素=起始标记+结束标记+元素内容+元素属性

属性=局部属性+全部属性

–局部属性：某些元素特有的属性

–全局属性：所有元素通用的属性

有些元素没有结束标记，这样的元素叫做空元素,例如

3.元素的嵌套

元素是不能相互嵌套的

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

4.标准的文档结构

HTML：页面、HTML文档

<!DOCTYPE html>
此为文档申明，告诉浏览器，当前文档使用的HTML标准是HTML5
不写文档申明，将导致浏览器进入怪异渲染模式

<html lang="en">
    </html>
根元素，一个页面最多有一个，并且是所有其他元素的父元素或者是祖先元素，
lang属性：language 全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成

4.基本的 HTML 标签

a、head 标题

是通过

-

等标签进行定义的，“h $KaTeX parse error: Expected '}', got 'EOF' at end of input: *6{$ 级标题} ”+Enter 回车会生成六个标题

b、p 段落

<p>这是一个段落.</p>

lorem：乱数假文，p*6>lorme+enter 回车生成不一样的文字

c、 span 元素

无语义，用来组合文档中的行内元素。

==***以前：某些元素在显示时候会独占一行（块级元素），而某些元素不会（行级元素）

现在：到了HTML5，已经弃用这种说法

d、pre 元素

pre 元素可定义预格式化的文本。

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时候，会被折叠成一个空格

例外:在pre元素中的内容不会出现空白折叠，在pre元素内部出现的内容，会按照源码格式显示在页面上，该元素通常用于在网页上显示一些代码。显示代码时候，通常外面套code元素，code元素表示代码区域

e、实体字符

通常用于在页面中显实一些特殊符号

-小于符号：&lt

-大于符号：&gt

-空格符号：&nbsp

-版权符号：&copy

-& 符号： &amp

    打印特殊符号 ： &copy;  &lt;p&gt;

f、a元素

标签定义超链接，用于从一张页面链接到另一张页面。

href 属性

href属性它指示链接的目标。

跳转地址

跳转某个锚点

id属性：全局属性，表示元素在文档中的唯一编号

<body>

    <!-- a[href="#chapter$"]*6>{章节$}-->

    <a href="#chapter1">章节1</a><a href="#chapter2">章节2</a><a href="#chapter3">章节3</a><a href="#chapter4">章节4</a><a href="#chapter5">章节5</a><a href="#chapter6">章节6</a>
<!-- []表示添加个属性 -->
    <!-- ((h2[id="chapter$"]>{章节$})+p>lorem)*6 -->
    <h2 id="chapter1">章节1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <h2 id="chapter2">章节2</h2>
    <p>Laborum laudantium autem sint nisi! Commodi, debitis! Architecto</p>
    <h2 id="chapter3">章节3</h2>
    <p>Ad reprehenderit voluptas est maxime aspernatur, accusantium, asperiores dolorem perferendis?</p>
    <h2 id="chapter4">章节4</h2>
    <p>Unde, dolor placeat assumenda.</p>
    <h2 id="chapter5">章节5</h2>
    <p>Mollitia ipsa neque velit eos ducimus.</p>
    <h2 id="chapter6">章节6</h2>
    <p>Recusandae,  etur. Dolorem, iste tenetur!</p>

</body>

功能链接：点击后触发某个功能

-触发后执行JS代码，javascript

<body>
    <a href="javascript:alert('你好！')">
        弹出：你好！
    </a>
</body>

-发送邮件，mailto，要求用户上有发送邮件的软件，可以直接弹出软件

  <a href="mailto:2959220821@qq.com">
        点击给我发送邮件
    </a>

-拨号，tel，要求用户计算机安装有拨号软件或使用移动端访问

a href="tel:15527921895">
        拨号
    </a>

target属性

表示跳转窗口位置

target的取值：

_self:在当前窗口中打开，默认值

_blank:在新窗口中打开

    <!-- 超链接  -->
  <a href="http://www.duyiedu.com"   target="_blank">渡以教育</a>
    <a href="http://www.duyiedu.com"   target="_blank">渡以教育</a>
    <a href="http://www.duyiedu.com"   target="idname">渡以教育</a>

g.img元素

h、table表格属性

由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表单中有两种类型的单元格：

表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

表格

描述

定义表格

定义表格标题。caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

定义表格的表头。属性值有colspan横跨两列,rowspan横跨两行

定义表格的行。valign 属性规定表格行中内容的垂直对齐方式(top对内容进行上对齐,bootom对内容进行下对齐,middle居中对齐)。

定义表格单元。

定义表格的页眉。

定义表格的主体。

定义表格的页脚。

定义用于表格列的属性。

定义表格列的组。

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

HTML核心

1.路径的写法

a.站内资源和站外资源

站内资源：当前网站的资源，自己的东西

站外资源：非当前网站的资源，百度、新浪图片等‘

b、绝对路径和相对路径

站外资源：绝对路径

站内资源：相对路径

c、书写格式

绝对路径url地址：协议名：//主机名：端口号/路径

协议名：http，https，file（本地文件）

主机名：域名、IP地址

端口号：如果是http协议，默认端口号是80，如果是https协议，默认端口号是443

相对路径

以./开头，./表示当前资源所在的目录，相对路径中 ./是可以省略的

…/表示返回上一级目录

<body>
    <a  href="./target.html">
        相对路径的写法->target.html
    </a>
</body>

src属性：

source

<body>
  <img src="https://tse1-mm.cn.bing.net/th/id/R-C.c6c03edea530e9caa677c9d17f193a4d?rik=MBgpsjumbTD5eQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fca186d97701674b996264b2d352894a7.jpg&ehk=HunG%2fPF7pUbpcS34cWpNvlS%2faoDPbcaTYL6LFFPQIIM%3d&risl=&pid=ImgRaw&r=0">  

</body>

alt属性：

当图片资源失效时，将使用该属性的文字替代图片

<body>
  <img src=" https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
  alt="这是百度的一张图片">  
</body>

和map元素联用

图像映射（image-map）指带有可点击区域的一幅图像

<body>


  <a target="_blank" href="https://baike.baidu.com/item/%E7%90%83%E7%B1%BB%E8%BF%90%E5%8A%A8/24132244">
    <img 
      usemap="#ballMap"
      src="https://tse1-mm.cn.bing.net/th/id/R-C.9701b5f9f7ad1b5b93eb2579f67c7776?rik=DQ%2bJW1jBBmqn8w&riu=http%3a%2f%2fa3.att.hudong.com%2f68%2f67%2f01300000211103121732674229017.jpg&ehk=yFH5T%2bm1p1SqICyOacABcOIFdhdyS4ZOSD5UkKfNO1c%3d&risl=&pid=ImgRaw&r=0"
      alt="这是百度的一张星球图片">
  </a>

  <map name="ballMap">
    <area shape="circle" coords="278,342,177" href="https://china.nba.com/" target="_blank">
  </map>
    
   shape：表示形状，有circle，rect（矩形）
    coords:表示坐标值（x，y，r）
    rect：矩形（左上角，右下角）
    poly;多边形（每个点的坐标）
    href：链接地址
    图片坐标原点的确定：图片左上角为原点，向右为+x，向下为+y
衡量坐标时最好用自带画图工具
</body>

和figure元素联用

通常用于把图片、图片标题、描述包裹起来

子元素：figcaption

h、多媒体元素

video视频

controls：控制控件的显示，取值只是controls

<body>
    <video src="./../第一个网页/media/open.mp4" style="width: 500px;" controls="controls"></video>
</body>

布尔属性：某些属性只有两种状态，在HTML5中，可以不用书写属性值

autoplay：布尔属性，自动播放

muted：布尔属性，静音播放

loop：布尔属性，循环播放

audio音频

和视频一样，拥有auto play，muted，loop

i、列表元素

1、有序列表（ol）

ol:order list 只能是子元素li

子元素li:list item

<body>
    把大象装进冰箱需要几步
    <ol  reversed>
        <li>打开冰箱</li>
        <li>放进去</li>
        <li> 关门</li>
    </ol>
</body>
reversed是倒序的

2.无序列表（ul）

把ol改为ul

ul：unordered list

无序列表常用来制作菜单或新闻列表

3、定义列表（dl）

通常用于一些术语的定义

dl：definition list 定义列表

子元素dt：definition title 术语标题

子元素dd：definition description 术语的描述

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

j、容器元素

容器元素：

该元素代表一个块区域，内部用于放置其他元素

div元素：

没有语义

语义化容器元素：

header：通常用于表示页头，也可以用于表示文章的头部

footer：通常用于表示页脚，也可以用于表示文章的尾部

article：通常用于表示整篇文章

section：通常用于表示文章的章节

aside：通常用于表示侧边栏

h、元素包含关系

容器元素中可以包含任何元素

a元素几乎可以包含任何元素

某些元素由固定的包含关系

标题元素和段落元素不能相互嵌套，并且不能包含容器元素

i、nav标签

HTML进阶

iframe元素

在网页中嵌入另外一个网页，iframe可替换元素：

通常是行盒

通常显示的内容通常取决与元素的属性

css不能完全控制其中的样式

具有行块的特点

CSS

1.定义：

用于描述页面战术的语言，决定网页中的东西长什么样子

2.浏览器

Chrom：内核是Webkit/Blink

3.所有元素与展示效果无关

展示效果（加粗、倾斜、、、）

元素展示到页面的效果是由CSS决定的，因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

==重要：==选择什么元素，取决于内容的含义，而不是显示出的效果。

4、CSS基础

a、为网页添加样式

CSS 选择器

css规则=选择器+声明块

选择器：选中元素

ID选择器：

选中的是对应所有id值得元素

 #test {
            background-color: cornflowerblue;
        }
 <p id="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci facilis accusantium temporibus omnis, maiores deserunt officia vero sequi necessitatibus minima accusamus perspiciatis nam dolore, voluptatem blanditiis illum commodi a labore?</p>

元素选择器：

选择元素

p {
  text-align: center;
  color: red;
}
p:link {
  text-align: center;
  color: red;
}这种情况p也算元素选择器

类选择器：

用class定义

.red{
         color: cornflowerblue;
       }
<h1 class="red">
        为网页添加样式
    </h1>

内部样式表（内联样式）：

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的

外部样式表（推荐）：

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观，每张 HTML 页面必须在 head 部分的元素内包含对外部样式表文件的引用。也可书写到独立得css文件中。

可解决多页面样式重复得问题

有利于浏览器缓存，提高网页响应速度

有利于代码分离，容易阅读和维护

元素样式表：

可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

b.常见样式声明

color:

元素内部文字得颜色，预设值：定义好的单词，三原色：

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>

background-color：

属性指定元素的背景色。

font-size：

字体大小，px：绝对单位像素，越大字体越大。em:相对单位，相对于父元素，每个元素都要有字体大小，如果没有就是基准字号。

font-weight:

表示文字粗细程度

font-family：

文字类型，必须计算机用户中存在得字体才有效，使用多个字体来匹配不同环境，sans-serif是非衬线字体，当其他字体电脑都没有时候，就让电脑自行选择一个字体

font-style：

字体样式，通常用它设置斜体。italic是设置倾斜，

font-style：italic

i元素 em元素默认是倾斜字体，实际使用中通常用它表示一个图标

text-decoration：

文本修饰，给文本加线

del元素：表示错误得内容

s元素：过期得内容

text-indent:

首行文本缩进

line-height：

每行文本得高度，该值越大，每行文本得距离越大，设置行高为容器得高度，可以让单行文本垂直居中

width：宽度

hight：高度

垂直居中

height：10px；

line-height：10px；

letter-space:

文字间隙

text-algin：

文字内部得水平排列方式 center：居中

box-sinzing

规定两个并排的带边框的框：

-content-box：在宽度和高度之外绘制元素的内边距和边框。

-border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

-inherit:规定应从父元素继承 box-sizing 属性的值。

背景透明

每个颜色都有透明通道，0~1

rgba(红，绿，蓝，alpha)，alpha的值影响透明度
hex：#红绿蓝透

border-radius

border-radius：50%；画圆

cursor: pointer

鼠标变成小手的形状

overflow：

overflow 属性规定当内容溢出元素框时发生的事情。

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

scrollTop() ：

方法返回或设置匹配元素的滚动条的垂直位置。

border-box:

规定两个并排的带边框的框：

值	描述
content-box	规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。内容区的实际宽度会是width加上border + padding的计算值
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。内容区的实际宽度会是width减去border + padding的计算值
inherit	规定应从父元素继承 box-sizing 属性的值。

transform():

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。translate（10px,20px）
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。沿x轴放大x倍，沿着y轴放大y倍
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

CSS3:box-shadow:

box-shadow属性可以设置一个或多个下拉阴影的框。

box-shadow: *h-shadow v-shadow blur spread color* inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

CSS3弹性布局：display:flex

是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间

盒子隐藏

display：none 不生成盒子
visibility：hidden ，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

背景图

和img元素的区别：

img元素是属于html的概念，背景图属于css，

当图片属于网页内容时，必须使用img元素
当图片仅用于美化页面时，必须使用背景图

background-imag:

background-repeat：

默认情况下背景图会在横坐标和纵坐标中进行重复，repeat-x在x方向重复，no-repeat不重复，

    <style>
        body{
            background-image: url(../定位/定位练习二级菜单/斗鱼截图.PNG);
        }
    </style>
</head>
<body>
    <div></div>
</body>

background-size：

contain（全部显示），cover（图片填满且比例不变）

background-position：

设置图片位置 background-position：center top表示横向靠左纵向靠上

background-attachment：

通常用它控制背景图是否固定，背景相对于视口

c、选择器

简单选择器

1.ID选择器：

2.元素选择器；

3.类选择器：

4.通配符选择器（*）：选择所有元素

5.属性选择器（[ ])：根据属性名或者属性值选择属性

6.伪类选择器：选中某些元素得某种状态

link：超链接未访问时候得状态

visited:超链接访问之后得状态

hover：鼠标移动上去得状态

active：激活状态，鼠标按下状态

a:hover{
    color: springgreen;
}
a:active{
    color: crimson;
}

特殊：nth-child(a):表示前面选择的元素是父元素的第a个元素，a是数字几代表第几个元素

 <style>
        .parent .child:nth-child(1){
            background-color: lime;
            color: maroon;
    }
     表示双数的情况
     .parent .child:nth-child(2n){
            background-color: lime;
            color: maroon;
    }
    </style>
    
</head>

<body>
    <div class="parent">
        <div class="child">
            Lorem, ipsum dolor.
        </div>
        <div class="child">
            Ex, sunt porro?
        </div>
        <div class="child">
            Dignissimos, velit facilis.
        </div>
    </div>
</body>

==first-child：==选择第一个子元素

first-of-type：选中的是子元素中第一个a元素

 <style>
        /* 选中a元素，并且a元素必须是第一个子元素 */
        a:first-child{
            color: rebeccapurple;
        }
        /* 选中的是子元素中的第一个a元素 */
        a:first-of-type{
            color:red ;
        }
       /*选中a元素，并且a元素必须是最后一个子元素  */
        a:last-child{
            color: sandybrown;
        }
        /* 选中的是子元素中的最后一个a元素 */
        a:last-of-type{
            color:blue
        }
    </style>
</head>

<body>
    <div>
        <nav>
            <p>
                哈哈哈
            </p>
            <a href="">Lorem.</a>
            <a href="">Laudantium!</a>
            <p>
                哈哈哈
            </p>
        </nav>
    </div>
</body>

7.伪元素选择器：

before：

after：

first-letter：元素选择器，选择第一个元素

<style>
    能选择数字1.4中的1
        .test::first-letter{
            font-size: 1.5em;
            color: mediumseagreen;
        }
    </style>
</head>
<body>
    <div class="test">
        <section class="test1">1.4</section>
        <section class="test2">2.2</section>
    </div>
</body>

first-line:选中元素中第一行的文字

selection:选中被用户框选的文字

<style>
        div::first-line{
            color: burlywood;
        }
        /* 框选文字 */
        p::selection{
            color: chartreuse;
        }
    </style>
</head>
<body>
  
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui praesentium
         similique ab molestias beatae obcaecati optio quos nesciunt numquam, fugiat,
          quisquam culpa. Quibusdam libero eaque et ab deleniti, quasi voluptatibus.</div>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit sapiente omnis, eligendi vitae iste dicta enim ipsum aperiam rerum officiis perferendis? Cum enim veniam soluta nam laborum porro cupiditate voluptate.</p>
</body>

选择器的组合

并且
后代元素空格
子元素 >
相邻兄弟元素 +（此元素和此元素的下一个元素）
兄弟元素 ~（后面的所有兄弟元素）

选择器的并列

多个选择器用逗号分开，

d、层叠

解决冲突的过程，浏览器自动处理

1.比较重要性‘

作者样式表中的！important
作者样式表中的普通样式
浏览器默认样式表中的样式

作业样式表：开发者书写的样式

2.比较特殊性

看选择器，选择器选中的范围越窄越特殊

千位：如果是内联样式（），记作1，否则记为0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器（【】）、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器（before和after）的数量

3.比较源次序性

书写靠后的胜出

e、继承

子元素会继承父元素的某些css属性，通常跟文字内容相关的属性都能被继承

f、优先级属性值的计算过程

定义：一个元素，从所以属性都没有值到所有属性都有值，这个计算过程

步骤：

确定声明值：参考样式表（作者样式表或者浏览器默认表等）中没有冲突的声明，作为css属性值
层叠冲突：对样式表中有冲突的声明使用层叠规则，作为css属性值

比较重要性，比较特殊性，比较源次序确定最终属性
使用继承：对任然没有值得属性，若可以继承则继承父元素得值

使用默认值：对任然没有值得属性，使用默认值

<style>
        div{
            color: green;
        }
    </style>
</head>
<body>
    <div>
     <a href="">
        a 元素
    </a>
    <p>
        p元素
    </p>
    </div>
    运行结果”a元素“为蓝色，”  p元素“为绿色，因为a元素在确定声明值时候，确定为浏览器默认声明，作为css属性值，但是p元素在第三步得时候继承了父元素得值

特殊得两个css取值： p元素

inherit：手动（强制）继承，将父元素得值取出应用到该元素
initial：初始值，将该属性设置为默认值

g、盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

行盒：display=inline 的元素

块盒：display=block的元素

 <style>
        .container{
            display: inline;
            border: 3px royalblue dotted;
            background-color: sandybrown;
        }
        p{
            display: block;
            border: 3px solid;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="container"> 
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
           gnissimos magnam totam! Alias cumque modi 
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quibusdam numquam ra
        tione molestAlias mai.</p>
</body>

行盒在页面中不换行，块盒独占一行

display默认值是inline

盒子的组成部分:无论是行盒还是块盒，都是由一下几个部分组成，从内到外分别是：

内容 content

内容部分通常叫做整个盒子的内容盒，

wight hight 设置的盒子内容的高度

填充（内边距）padding

盒子边框到盒子内容的距离

padding-left padding-right padding-top padding-bottom（下边距）

padding简写：上右下左以此赋值

边框 border

边框=边框样式（boder-style）+边框宽度（boder-width）+边框颜色（boder-color）

外边距 margin

margin-top，margin-left ，margin-right，margin-bootom，当margin为负值时候，会伸出页面

h、盒模型的应用

改变宽高范围

默认情况下，width和hight 是内容盒的宽高

溢出隐藏

overflow，控制内容溢出边框盒后的处理方式

断词处理

word-break，会影响文字在什么位置被截断换行

normal：普通。

break-all：截断所有，所有字符都在单词内部初截断

keep-all：保持所有，所有文字都在单词之间截断

改变背景覆盖范围

默认情况下背景覆盖边框盒，可以通过background-clip修改

空白处理

withe-space：

 <style>
        div{
            border-bottom:2px  dashed #ccc;
            line-height: 2;
            width:300px;
            /* 不换行处理 */
            white-space: nowrap;
            /* 溢出隐藏处理 */
            overflow: hidden;
            /* 溢出部分圆点代替 */
            text-overflow: ellipsis;
            
        }
        p{
            width:100px;
            height: 100px;
            border:2px solid yellowgreen;
            background-color: #008c8c;
            padding: 30px;
            /*背景填充 */
            background-clip:content-box ;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div>Lorem  repenihil aperiam rerum?</div>
            <div>Modi minima voluptatiestlendus.</div>
            <div>Accusamus adipisci mai omnro.</div>
            <div>Nam cupiditate a t nam maxime illomets.</div>
            <div>Iusto fugit a saiciatis, omnis iciendis.</div>
            <div>Reprehenderit, delectdio.</div>
        </li>
    </ul>
    <p>Lorem quasi voluptate nisiam corporis delectus odit accusantium.</p>
</body>

i、行、块盒的盒模型

行盒

常见的行盒：包含具体内容的元素

span strong em i img video audio 等，文字相关的都会生成行盒

特点:

盒子沿着内容延伸
行盒不能设置宽高。宽高使用字体大小、宽高等间接调整
内边距padding（填充区）水平方向有效，垂直方向仅会影响背景，不会实际占据空间
边框border：水平方向有效，垂直方向仅会影响背景，不会实际占据空间
margin：水平方向有效，垂直方向仅会影响背景，不会实际占据空间

行块盒：

display=inline（行盒）&block(块盒)，不独占一行，盒模型中所有属性都有效。常见行盒元素有：input、button、等

				1、不会独占一行
				2、不能设置宽高
				3、宽度等于内容宽度
				4、不允许嵌套块级元素
				5、display为----（inline）
				6、a标签比就较特殊可以嵌套块级元素，将a标签转换为块级元素

<style>
        .test a{ 
            border: 3px solid red;
            background-color:aqua;
            text-decoration: none;
            width: 100px;
            height: 10px;
            display: inline;
            text-align: center;
            line-height: 2px;
        }
        .test a:hover{
            border-color: lightcoral;
            color: lawngreen;
        }
        .test a.test2{
            border: none;
            color: black;
            background:initial;
        }

    </style>
</head>
<body>
    <div class="test">
        <a href="" class="test2">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>

    </div>
</body>

可替换元素和非可替换元素：大部分元素，页面上显示的结果，取决于元素的内容，称为非可替换元素，少部分元素页面上显示的结果，取决于元素的属性，称为可替换元素，

可替换：img ，video，audio 绝大部分可替换元素是

块盒

常见块级元素有：div、p、h1~h6 、header、footer、nav、hr、ul、ol、dl等

				1、独占一行
				2、可以设置宽高
				3、宽度是父元素宽度的100%
				4、里面可以嵌套块级元素和行内元素
				5、display为---（block）

j、常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中多个盒子排列模型，大体分为三种方式：

常规流：

所有元素默认情况下都属于常规流布局，总体规则：块盒独占一行，行盒水平依次水平排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定可盒子的排列区域。绝大多数的情况下，盒子的包含块为其父元素的内容盒。

块盒：每个块盒的总宽度（包括border等）必须刚好等于包含块的宽度。宽度的默认值是auto（将剩余空间吸收掉），margin也可取值auto但默认值是0。且width的吸收能力强于margin

若宽度、边框、内边距、外边距计算后，任然有剩余空间，该剩余空间被margin-right全部吸收。在常规流中，块盒在其包含块中居中，可以定宽然后左右设置maigin为auto。

每个块盒垂直方向上的auto值

height：auto ，适应内容高度

margin：auto，表示0

<style>
        .parent{
            border: 2px solid red;
            /* background-color: rosybrown; */
            height: 200px;
            padding: 30px;
        }
        .child{
            border: 2px solid;
            height: 100px;
            background-color:seagreen;
            width: 100px;
        /* 居中 */
            /* margin: 0 auto; */ 
            margin: auto;

        }
    </style>
</head>
<body>1
   <div class="parent">   
       <div class="child"></div>
   </div> 
   
</body>

百分比取值

宽度的:padding 、宽高、margin可以取值为百分比，以上的百分比相对于包含块的宽度，所有的百分比都相对与宽度与高度无关。

上下外边距的合并

两个常规流块盒上下外边距相邻，会进行合并。

<style>
        div {
            padding: 20px;
            width: 500px;
            height: 100px;
            border: 2px solid blue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam esse neque porro dolor cupiditate explicabo et
        distinctio eveniet perferendis accusantium, modi voluptas, aliquam voluptatum sapiente. Nemo ipsa porro sit
        soluta!</div>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat voluptates accusamus, odio fugit nisi qui
        ducimus! Nostrum est cumque minus fugiat, maiores repellat dolorum sequi voluptas laboriosam aut, autem
        laudantium.</div>
</body>

两个外边距取最大值。

<style>
        .a {
            padding: 20px;
            width: 500px;
            height: 100px;
            border: 2px solid blue;
            margin: 100px;
        }
        .b {

            padding: 20px;
            width: 500px;
            height: 100px;
            border: 2px solid rgb(8, 219, 36);
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="a"> distinctio eveniet perferendis accusantium, modi voluptas, aliquam voluptatum sapiente. Nemo ipsa porro</div>
    <div class="b">minus fugiat, maiores repellat dolorum sequi voluptas laboriosam aut, autem</div>
</body>

两个外边距中间有一条线没有相邻，所以没有合并
<style>
        .parent{
            background-color: cadetblue;
            margin-top: 50px;
            width: 100px;
            height: 100px;
            border: 3px solid red;
        }
        .child{
            background-color: chartreuse;
            width: 50px;
            height:50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>

h、浮动

应用场景：

横向排列

文字环绕
浮动的基本特点：
1. 修改float属性的值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
  
  默认值为none
当一个元素浮动后，元素一定为块盒，更改display属性为block

浮动元素的包含块和常规流一样，为父元素的内容

浮动元素不与任何元素的外边距产生合并（包括其父元素和子元素）
盒子尺寸
1. 宽度为auto时候，适应内容宽度
2. 高度为auto时候，与常规流一致，适应内容的高度
3. margin为auto时候，表示为0
4. 边框、内边距、百分比设置与常规流一样
盒子排列
1. 左浮动的盒子靠上靠右排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 文字环绕行盒在排列时候，会避开浮动盒子（如果文字没有在行盒中，浏览器会自动生成一个行盒来包含文字，该行盒叫匿名行盒）
高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时不会考虑浮动盒子

清除浮动，涉及css属性：clear
- 默认值：none
- left：清楚左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清楚右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清楚所有浮动，该元素必须出现在前面所有浮动盒子的下方

<style>
        .container{
            /* height: 1000px; */
            background-color: lightcoral;
            padding: 30px;
        }
        .item{
            float: left;
            width: 100px;
            height: 100px;
           margin: 6px;
            background-color: lightgreen;
        }
        /* container高度塌陷   高度是由div。clearfix撑开的
    给浮动元素的父元素加上clearfix*/
        .clearfix{
            height: 100px;
            background-color: lightsteelblue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- <div class="nomal"></div> -->
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="clearfix"></div>
    </div>
</body>

使用浮动都要使其父元素加上clearnfix，

j、定位

position属性

默认值：static，静态定位（不定位）
relative：相对定位
absolute:绝对定位
fixed：固定定位

定位元素：只要postion的取值不是static就认为该元素是一个定位元素，

定位元素脱离文档流：

文档流中的元素摆放，会忽略脱离了文档流的元素
文档流中的元素计算自动高度时，会忽略脱离了文档流的元素

相对定位：

不会导致文档脱离文档流，只是让元素在原来位置上进行偏移，可以通过letf、right、top、bottom设置位置，

相对定位不会对其他盒子产生影响

绝对定位：

宽高为auto，适应内容
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块，若找不到，则包含块为整个网页

固定定位：

其他情况和绝对定位完全一样
包含块不同：固定为视口（浏览器的可视窗口）
固定定位中，margin为auto时候，会自动吸收剩余空间，也就是居中

多个定位元素重叠时：

堆叠上下文，设置z-index，通常情况下该值越大越靠近用户，z-index可以是负数，如果是负数则遇到常规流、浮动元素，则会被其覆盖。

h、表单元素

一系列元素，主要用于收集用户信息

input元素

输入框

type属性：输入框类型 -

-type:text:普通文本框

-type：password：密码输入

-type：data 日期选择框，有兼容性问题

-type：search 搜索框

-type：range 滑块

-type：checkbox 多选框

<body>
    <!--普通文本输入  -->
    <input type="text" placeholder="请输入账号">
    <!-- 密码框 -->
    <input type="password" placeholder="请输入账号" value="12345">
    <!-- 日期选择框 -->
    <input type="date" >
    <!-- 搜索框 -->
    <input type="search" >
    <!-- 滑块 -->
    <input type="range" >
    <!-- 多选框 -->
    爱好
    <input type="checkbox" > 
    
</body>

value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容显示时

i、居中总结

行盒（行块盒）的水平居中

只需要设置行盒（行块盒）父元素的text-align：center

常规流块盒的水平居中

先定宽设置左右 margin为automargi

绝对定位元素的水平居中

定宽，设置左右的偏移量为0（left：0，right：0），将左右margin设置为auto

固定定位是绝对定位的特殊情况

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0,bottom:0) 将左右margin设置为auto

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

 <style>
        h1{
            width: 300px;
            height: 200px;
            text-align: center;
            background-color: lightblue;
            垂直居中
            line-height: 200px;
        }
    </style>
</head>
<body>
    <h1>标题</h>
</body>

CSS进阶

1.web字体和图标

web字体

解决用户电脑没有安装相应字体，强制让用户下载该字体，使用@font-face设置新字体

字体图标

iconfont.cn

2.布局

两栏布局

三栏布局

等高布局

常见单词：

dashed：

ellipsis：

hidden：

nowrap：

margin：边缘

align：排列对齐

topnav：顶导航

:普通文本框