web前端开发

已于 2022-10-03 14:18:17 修改
阅读量477 收藏 1
点赞数
文章标签： 前端 javascript html
于 2022-09-23 12:50:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52956229/article/details/127005045
版权

目录

网页为啥叫html？

  1.网页是怎么形成的

  2.html是什么

 总结

浏览器知多少？

  常见的浏览器

web标准的定制

  1.W3C 万维网联盟

   2.web标准的组成

 HTML 基本构架

  1.基本构架 

  2.html的基本语法

文档声明和字符编码

html常用标签

  1.语义是什么？

  2.常用标签

不一样的hr

 特殊符号

div和span标签 

 列表

  1.有序列表

  2.无序列表 

  3.自定义列表 

图片标签属性 

  1.图片的路径

  2.图片标签的属性

table表格

  1.table表格的基本结构

  2.table表格的相关属性

  3.行tr的属性

  4.单元格td的属性

  5.表格合并

表单标签

  1.基本构架

  2.form标签中的属性

  3.input标签中的属性

css样式表

  1.什么是css？

  2.css语法

  3.内部样式表

  4.外部样式表 

  5.行内样式表

  6.样式表的优先级

选择器

  1.为什么要用选择器？

  2.标签选择器

  3.类选择器 

  4.id选择器 

  5.通配符选择器

  6.群组选择器

  7. 包含选择器/后代选择器

  8.伪类选择器

  9.选择器的权重

 文本属性

  1.css属性和属性定义

  2.css文本属性

  3.css列表属性

  4.css背景属性

  5.css边框属性

  6.css浮动属性

 盒子模型

   1.内边距

   2.边框

网页为啥叫html？

  1.网页是怎么形成的

     网页通过浏览器才能访问阅读的

     网页是网站中的“一页”

     文件扩展名是.html

  2.html是什么

      html是用来描述网页的一种语言

  •  html指的是超文本标记语言（Hyper Text  Markup Language）
  •  html不是一种编程语言，而是一种标记语言（Markup Language）
  •  标记语言是一套标记标签（Markup Tag）

 总结

       网页是前端人员开发写的 通过浏览器转化为普通人严重的页面

       网页的扩展名是.html

       Html使用标记标签来描述网页，包含视频 音频，图片等等

浏览器知多少？

  常见的浏览器

      Opra 欧朋浏览器

      FireFox 火狐浏览器

      Internet Explorer  iE浏览器 windows系统

      Safari 苹果系统特有

      Chrome 谷歌浏览器

      QQ浏览器

web标准的定制

  1.W3C 万维网联盟

      一个组织 制定了一套标准

      使网页显示在不同的浏览器中也是一个样子呢

   2.web标准的组成

  •  html结构  W3C制定了结构html的语法和标准
  •  css表现    W3C制定了表现css的语法和标准 
  •  js行为       W3C ECMA制定了行为标准   

 HTML 基本构架

  1.基本构架 

<!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>我的第一个网页</title>
</head>
<body><!--页面的身体部分-->
  <center>
    窗前明月光<br/>
    疑是地上霜
  </center>
</body>
</html>

  2.html的基本语法

  • <常规标记>也叫做双标记

        <标记></标记>

        <标记 属性="属性值" 属性=“属性值”></标记>

        标记也可叫做标签或元素

        例如：<head></head>

  • 空标记也叫单标记

        <标记/>

        <标记 属性="属性值" />

        例如：<br/> 换行

文档声明和字符编码

  • <!DOCTYPE ***>

       //告诉浏览器以html哪一个标准加载html页面

      //是一个特殊且固定的文档声明标签

  • <html lang="**"> 

      //告诉浏览器以下写的代码是什么语言

        如果浏览器所装版本语言与其语言不符 可以转换为该浏览器语言

          a."en" 代表英语

          b."zh-CN" 代表中文

          c."ja-jp" 代表日文

       //搜索引擎优化和浏览器有帮助

  • <meta charset="***"> 

       //告诉浏览器字符编码形式，使其以同样的形式进行解码

         a.ASCII---美国信息交换标准代码

         b.ISO-8859-1---拉丁字母表的字符编码

         c.GB2312---汉字编码字符集

         d.UTF-8---Unicode 万国码字符编码

        //charset 字符集

html常用标签

  1.语义是什么？

       语义化就是让机器可以读得懂内容

  2.常用标签

  • 文本标题（h1-h6)
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

      注：文本标题标签自带加粗，有自己的文本大小，独占一行，有默认间距

      样式：

         //h1 权重是最大的，爬虫更喜欢

  •  段落文本（p）
    <p>段落1文本</p>
    <p>段落2文本</p>
    <p>段落3文本</p>

      注：用来标识一个段落，段落与段落之间有段间距 

      样式：

  • 换行（br）
    我换行啦
    我<br/>
    换行啦

     注：换行是个空标记 是强制换行

     样式：

  • 水平线（hr）
这是一条水平线
    <hr />

     注：<hr/>也是一个空标记

     样式：

  • 文字加粗有两个哦（推荐strong）
    <b>加粗内容</b>
    <strong>强调内容</strong>

     注：<b></b> 只是加粗内容

             <strong></strong>语义化 会强调内容 爬虫更喜欢

     样式：

  •  倾斜标签有两个呢（推荐em）
     正常文本
    <em>强调文本</em>
    <i>倾斜文本</i>

     注：<em></em>具有强调作用 强调文本倾斜 内容更加关注

            <i></i>只是文本倾斜

     样式：

  •  删除线同样有两个标记哦（推荐del）
    <s>删除线</s>
    <del>删除线</del>

      注：<del></del>也是具有强调作用呢

             <s></s>只是删除线

     样式：

  • 扩展 
    <!--下划线-->
    <u>文本</u>
    <!--下标-->
    下标<sub>[1]</sub>
    <!--上标-->
    上标<sup>[2]</sup>

     注：<u></u>代表下划线

            <sub></sub>下标 

            <sup></sup>上标

    样式：

不一样的hr

    <!--添加颜色-->
    <hr color="black">
    <hr color="blue">
    <hr color="red">
    <!--添加宽度和颜色-->
    <hr color="green" width="600">
    <hr color="red" width="300">
    <!--添加宽度颜色和对齐方式-->
    <hr color="black" width="600" align="left">
    <hr color="black" width="600" align="right">
    <hr>
    <!--没有阴影效果的水平线-->
    <hr noshade="noshade">

      注：正常水平线是有阴影的，设置宽度后会在浏览器中居中显示。

      样式：

 特殊符号

特殊符号
特殊符号解释
尖角号

&lt;  左尖角号

&gt; 右尖角号

空格

&nbsp; 该空格占据宽度受字体的影响明显而强烈

&emsp; 该空格占据宽度是一个中文字符的宽度，基本上不受字体的影响

版权&copy;
商标

&trade;

&reg;

    实例：

    <!--左尖号和右尖号-->
    <p>
        hr的标签是这样写的哎&lt;hr/ &gt;
    </p>
    <p>
        &nbsp;&nbsp;这是空了两格
    </p>
    <p>
        &emsp;&emsp;这也是空了两格-这才是正常空两格
    </p>
    <p>
        这是一个版权符:&copy;
    </p>
    <p>
        这是一个商标符:&trade;
        这也是一个商标符:&reg;
    </p>
    <p>
        这是个什么嘛&#128512;
    </p>

    样式：

div和span标签 

  •  div标签没有具体含义，用来划分页面区域，独占一行。 相当于盒子。
  • span标签也没得实际意义，主要应用于文本独立且需要修饰的时候，内容有多宽就占用多宽的空间距离。不会破环原有的空间距离，允许在一行显示。

    实例:

    <div>第一块</div>
    <div>第二块</div>
    <div>第三块</div>
    <h3><span>第一块</span></h3>
    <span style="color:red">第二块</span>
    <span>第三块啊</span>

    样式:

 列表

列表分类
有序列表无序列表自定义列表

<ol type="" start=""> 

   <li>做作业</li>

   <li>看视频</li>

   <li>吃饭</li>

   <li>溜达</li>

</ol>

<ul>

  <li>锄禾日当午</li>

  <li>汗滴禾下土</li>

  <li>谁知盘中餐</li>

  <li>粒粒皆辛苦</li>

</ul>

<dl>

  <dt>可以是文字也可以是图</dt>

  <dd>相关文字</dd>

</dl>

  1.有序列表

  • ol中只能放li标签，li中可以放任意标签。
  • 数字是自动生成的。
  • type属性 更改序列样式 取值：1，a，A，i，I。
  • start属性 值从哪里开始 取值只能是一个数字。

     实例：

    <!--有序列表-->
    <ol>
        <li>做作业</li>
        <li>看视频</li>
        <li>吃饭</li>
        <li>溜达</li>
    </ol>
    <ol type="1" start="2">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ol>
    <ol type="A" start="4">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ol>
    <ol type="a" start="1">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ol>
    <ol type="I" start="9">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ol>
    <ol type="i" start="2">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ol>

    样式：

  2.无序列表 

  • ol中只能放li标签，li标签里可以放任意标签
  • 默认的样式是黑色实心圆点
  • type属性 序列样式 取值：disc,circle,square,none(用的最多)

    实例：

    <ul type="dics">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
    <ul type="circle">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
    <ul type="square">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
    <ul type="none">
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

     样式：

  3.自定义列表 

    实例：

    <!--自定义列表-->
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    样式：

图片标签属性 

 <img src="">

  • 是一个单标签
  • src代表图片源头，即图片来自哪里

  1.图片的路径

  • 绝对路径

      是指文件在硬盘上真正存储的路径

      例："cat.jpeg"这一图片存放在"D:\study\web前端开发"目录下，则其绝对路径为"D:\study\web前端开发\cat.jpeg"

      注：绝对路径在代码开发中很少使用，使用后可能只在自己的计算机中显示正常，在web服务器上浏览会显示不出来。

  • 相对路径

       是指相对于自己目标文件的位置

       1）当当前文件和目标文件在同级目录下，直接书写"文件名+扩展名"或"./文件名+扩展名"

             例：<img src="cat.jpeg">

                    <img src="./cat.jpeg">  ./代表在当前目录下

       2）当当前文件在目标文件的下一级目录下，书写"下一级目录名./文件名+扩展名"

             例：<img src="image./cat1.jpg">

                    <img src="./image./cat1.jpg">

       3）当当前文件在目标文件的上一级目录下，书写"../文件名+扩展名" 即跳出当前文件夹 去上一级文件夹去寻找图片

             例：<img src="../cat.jpeg">

                   <img src="../image/cat1.jpg"> 在上一级文件夹中的文件夹去寻找图片

             注：../../ 上级的上级

    实例：

  • 在同级目录下寻找
   <!--
        同级目录下
        相对路径
        1 cat.jpeg
        2 ./cat.jpeg ./代表当前目录下寻找图片
        绝对路径
        3 D:\study\web前端开发\cat.jpeg
    -->
    <img src="cat.jpeg">
    <img src="./cat.jpeg">
    <img src="D:\study\web前端开发\cat.jpeg">

    样式：

   目录样式：

   页面样式：

  • 在下一级目录寻找

    实例： 

   <!--
        下一级目录下 即所存图片在 所写页面的所在目录中 下一级目录下
        1 image./cat1.jpg
        2 ./image./cat1.jpg

    -->
    <img src="image./cat1.jpg">
    <img src="./image./cat2.png">

   样式：

   目录样式：

   

   页面样式：

  •  在上一级目录寻找

    实例：

    <!--
        上一级目录下 即所存图片在 所写页面的所在目录中 上一级目录下
        ../代表在上级目录中寻找
        ../../ 上级的上级
     -->
    <img src="../cat.jpeg">
    <img src="../image/cat1.jpg">

    样式：

    目录样式：

    页面样式：

  2.图片标签的属性

       <img src=" " title=" " alt=" " width=" " height=" "/>

  • src属性代表图片路径
  • title属性代表鼠标悬停上去后的提示信息，title属性无论图片是否显示出来都会给出提示
  • alt属性代表图片不显示或加载失败后提示的信息
  • width height 代表图片的宽和高

    实例：

    <!--图片属性-->
    <!--鼠标悬停在图片时有显示-->
    <img src="cat.jpeg" title="这是一个小猫咪" />
    <br />
    <!--图片路径写错无法显示出来时-->
    <img src="ct.jpeg" title="这是一个无法显示的小咪" alt="该图片无法显示" />
    <br />
    <!--设置图片长和宽-->
    <img src="cat.jpeg" title="这是一个小猫咪" width="100px" height="100px;" />

    样式： 

table表格

  1.table表格的基本结构

   <table>
        <!--创建表格-->
        <tr>
            <!--表示行-->
            <td>1</td><!--表示单元格-->
            <td>2</td>
        </tr>
        <tr>
            <!--表示行-->
            <td>1</td><!--表示单元格-->
            <td>2</td>
        </tr>
    </table>

   样式：

  2.table表格的相关属性

  • width---宽度  支持px或百分比(相当于父元素的)
  • height---高度 支持px或百分比(相当于父元素的)
  • border---表格外边框
  • bordercolor---边框颜色
  • bgcolor---背景颜色
  • align="left;right;center"---水平对齐
  • cellspacing---单元格与单元格之间的间距
  • cellpadding---单元格与内容之间的空隙

     实例：

   <table width="500px" height="300px" border="1px" align="center" bordercolor="black" 
    bgcolor="pink" cellspacing="0px"
        cellpadding="30px">
        <!--创建表格-->
        <tr>
            <!--表示行-->
            <td>开心</td>
            <!--表示单元格-->
            <td>快乐</td>
        </tr>
        <tr>
            <!--表示行-->
            <td>悲伤</td>
            <!--表示单元格-->
            <td>忧郁</td>
        </tr>
    </table>

       样式：

  3.行tr的属性

  • height---高度 自适应
  • bgcolor---背景颜色
  • align="left;right;center"---文字水平对齐
  • valign="top;middle;bottom"---文字垂直对齐

    实例:

  <table width="500" height="300" border="1">
        <tr height="300" align="right" valign="bottom" bgcolor="orange">
            <td>阳光</td>
            <td>月光</td>
        </tr>
        <tr>
            <td>海滩</td>
            <td>沙漠</td>
        </tr>
    </table>

    样式：

  4.单元格td的属性

  • height---高度 如果一个单元格设置了宽度影响的是一行
  • width---宽度 如果一个单元格设置了宽度影响的是一列
  • bgcolor---背景颜色
  • align="left;right;center"---文字水平对齐
  • valign="top;middle;bottom"---文字垂直对齐

    实例：

   <table width="500" height="300" border="1">
        <tr height="300" align="right" valign="bottom" bgcolor="orange">
            <!--高度可以超出最外面的盒子，宽度不可以-->
            <td height="400">阳光</td>
            <td width="600">月光</td>
        </tr>
        <tr>
            <td bgcolor="yellow">海滩</td>
            <td align="left" valign="top">沙漠</td>
        </tr>
    </table>

    样式： 

  5.表格合并

  •  colspan---所要合并的单元格的列数，必须给td
  • rowspan---所要合并的单元格的行数，必须给td

    实例：

  <table border="1" width="200" height="100">
        <tr>
            <td colspan="2">晴</td>
            <!-- <td>阴</td> -->
            <td>大雪</td>
        </tr>
        <tr>
            <td colspan="2">雨</td>
            <!-- <td>风</td> -->
            <td rowspan="2">多云</td>
        </tr>
        <tr>
            <td>雨</td>
            <td>雾</td>
            <!-- <td>小雪</td> -->
        </tr>
    </table>

    样式前后对比： 

表单标签

  表单作用：收集用户的信息

  1.基本构架

<body>
    <!--创建表单-->
    <form>
        <!--文本输入框-->
        <input>
    </form>
</body>

  2.form标签中的属性

  • method="post;get"---提交方式

       1）post

       post 向服务器传递数据

       通过HTTP post机制，将表单内各个字段以及内容放置在HTML HEADER 内一起传送到action属性所指地址的URL中，用户看不到此过程

       对于post方式，服务器用Request.Form来获取提交的数据

       post传送的数据量较大

       2）get

        get是从服务器上获取数据

        get是把参数数据队列加到提交表单的action属性所指的url中，值和表单内各个字段一一对应，用户看的到此过程

        对于get方式，服务器是用Request.QueryString获取变量的值

       get传送的数据量较小，不能大于2KB

        对比实例：

        get：

        post：

  • action---向何处发送表单数据

       

      即 点击登录按钮后将跳转到百度网页，并将数据传递给百度网页

  3.input标签中的属性

  • type---定义输入框的类型

       a）文本框 type="text"

       b）密码框 type="password"

       c）提交框 type="submit" 与 <button>提交按钮</button>

       d）按钮框 type="button" 单纯的按钮

       e)  重置框 type="reset" 清空的效果

  • placeholder---描述输入字段预期值的简短的提示信息
  • name---必须设置，否则在提交表单时，用户在其中输入的数据不会发送到服务器
  • value

    实例：

  <!--创建表单-->
    <form action="http://baidu.com" method="post">
        <!--文本输入框-->
        用户名：<input type="text" name="username" placeholder="请输入用户名">
        <br>
        密码：<input type="password" name="password">
        <br>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <button type="submit">登录</button>
    </form>

    样式： 

css样式表

  1.什么是css？

      web表示中的表现标准语言，表现标准语言在网页中主要对网页信息的显示进行控制，也就是如何修饰网页信息的样式。

      用来表现HTML或XML等样式文件的计算机语言。

  2.css语法

  • 每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值

       例：脸{ 眼睛：变大1cm；}

  • 属性必须放在花括号中，属性与属性值之间用冒号连接
  • 每条声明用分号结束
  • 当一个属性有多个属性值的时候，属性值和属性值之间不分先后，用空格隔开。

  3.内部样式表

     在html文件中的head中加入style标签，在style标签中加入css样式。

     实例：

<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>
        h1 {
            color: red;
        }

        h2 {
            color: green;
        }

        h3 {
            color: yellow;
        }
    </style>
</head>

<body>
    <!--内部样式表-->
    <h1>第一标题</h1>
    <h2>第二标题</h2>
    <h3>第三标题</h3>
</body>

    样式：

  4.外部样式表 

     即在html文件中引入css文件，在css文件中书写css样式

     a) link 标签引入

     <link rel="stylesheet" type="text/css" href="css文件的路径">

  • rel  relation定义关联性 stylesheet样式表
  • href 引入的css的路径

     b) import引入

      <style type="text/css">

        @import url("css文件的路径");

     </style>

     link和import有什么区别？

     1.link属于XHTML标签，@import是css提供的一种方式

     2.加载顺序:页面加载时（即浏览者浏览页面时）link引用的css会同时被加载，@import引入的css要等页面全部被下载完再被加载。

      3.兼容性:@import兼容性较差

     实例：

<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引入-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!--@import引入-->
    <style type="text/css">
        @import url("css/index.css");
    </style>
</head>

<body>
    <!--外部样式表-->
    <div>第一块</div>
    <span>第二块</span>
    <p>第三段</p>

</body>

    样式： 

  5.行内样式表

       也叫内联样式，嵌入式样式。

       即style作为属性直接写在标签后面

    实例：

    <!--行内样式-->
    <h1 style="color:pink;">第一标题</h1>

    样式：

  6.样式表的优先级

       优先级：行内样式>内部样式>外部样式

       ！important在属性值后加入其后缀即其样式最优先显示。

       即：！important>行内>内部>外部

       注：优先级只能是同一标签同一属性才有对比意义。

选择器

  1.为什么要用选择器？

      使css对html页面中的元素进行一对一，一对多，多对一的控制。

  2.标签选择器

      元素选择符/类型选择符（element选择器）

标签选择器
语法说明用法

元素名称{属性:属性值；属性:属性值;}

例：

 div {

            color: black;

            background-color: pink;

        }

a.元素选择符就是以文档中，元素类型作为选择符，即使用文档中元素的名称作为选择符。

    例：body，div，p等等

b.所有的页面元素都可以作为选择符

a.如果想改变某个元素默认样式时

   例：改变一个div，span等

b.如果想统一文档中某一元素的显示效果时

    例：改变文档所有p段落样式时

    实例： 

<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 {
            color: black;
            background-color: pink;
        }

        p {
            color: orange;
        }
    </style>
</head>

<body>
    <div>
        今天是晴天!
    </div>
    <div>
        今天是阴天!
    </div>
    <p>
        哦吼吼
    </p>
</body>

    样式： 

  3.类选择器 

      class选择器/类选择器

类选择器
语法说明用法

.class名{属性:属性值;}

例：

.top{

       color: black;

   background-color: pink;

       }

a.当我们使用class选择符时，应先为每个元素定义一个calss名称

b.class选择符的语法格式

例：

<div class="top"></div>

.top{

       color: black;

   background-color: pink;

       }

class选择符更适合定义一类样式

    实例：

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

        p {
            color: orange;
        }

        .box1 {
            background-color: azure;
        }

        .box2 {
            color: blueviolet;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <p>嗨嗨嗨</p>
    <p class="box1 box2">
        哦吼吼
    </p>
    <p class="box1">
        嘻嘻嘻
    </p>

     注：当一个元素标签具有两个样式，且两个样式中分别对同个属性进行了设置，则看在style标签中是谁最后设置的则应用谁的，即发生了覆盖

    样式： 

  4.id选择器 

id选择器
语法说明

#id名{属性:属性值；}

例：

<div id="box"></div>

#box{

color: blueviolet;

            background-color: bisque;

}

a.当我们使用id选择符时，应该为每个元素定义一个id属性。

例：

<div id="box"></div>

b.id选择符的语法格式时#加上自定义的id名

例：

#box{

           color: blueviolet;

           background-color: bisque;

         }

c.起名时要起中文名字，不能用关键字---所有的标记和属性都是关键字

d.一个id名称只能对应文档中一个具体的元素对象。 

    ---唯一性

     实例：

<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>
        /* id选择器 */
        #box3 {
            color: gray;
            background-color: rgb(59, 45, 45);
        }

        #box4 {
            color: orange;
            background-color: rgb(188, 215, 91);
        }
    </style>
</head>

<body>
    <span id="box3">阴</span>
    <span id="box4">晴</span>
    <!-- 正常情况下:id是唯一的 不能共用一个id 一个id只能用一种样式
    <span id="box4">雨</span>
    <span id="box3 box4">雨</span> 
    -->
</body>

    样式： 

  5.通配符选择器

      *通配符/通配选择器

通配选择器
语法说明

*{属性:属性值;}

例：

 * { margin: 0;

     padding: 0;

        }

通配选择符的写法时" * ",其含义就是所有元素

*{margin: 0px;

   padding: 0px;}

代表清除所有元素的默认边距值和填充值

    实例：

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

    </style>
</head>

<body>
    <table>
        <tr>
            <td>happy</td>
            <td>sad</td>
        </tr>
        <tr>
            <td>cry</td>
            <td>smile</td>
        </tr>
    </table>
</body>

    样式： 

    before：

    after：

  6.群组选择器

群组选择器
语法说明

选择符1，选择符2，选择符3{属性:属性值;}

例：

当有多个选择符应用相同的声明时，选择符之间用" , "隔开，合并为一组

margin: 0 auto; 实现盒子水平居中 

     实例：

<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>
        /* 群组选择器 */
        .middle1,
        .middle2,
        .middle3 {
            color: darkgrey;
        }
        div {
            color: black;
            background-color: pink;
        }
    </style>
</head>

<body>
    
    <div class="middle1">我是中间第一部分</div>
    <span class="middle2">我是中间第二部分</span>
    <p class="middle3">我是中间第三部分</p>
</body>

     样式：

  7. 包含选择器/后代选择器

后代选择器
语法说明用法

选择符1 选择符2{属性:属性值;}

例：

div p{color:pink;}

即选择符1中所有包含的选择符2都可应用此样式

当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。

    实例：

<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>
        /* 包含选择器 */
        .end li {
            color: aqua;
        }
    </style>
</head>

<body>
    <ul class="end">
        <li>我想</li>
        <li>喜欢</li>
        <li>或许</li>
    </ul>
</body>

    样式： 

  8.伪类选择器

      在a标签中使用

伪类选择器
语法说明

a:link{属性:属性值;} 超链接的初始状态

a:visited{属性:属性值;} 超链接被访问后的状态

a:hover{属性:属性值;} 鼠标悬停，即鼠标划过超链接时的状态

a:active{属性:属性值;} 超链接被激活时的状态，即鼠标按下时超链接的状态

link---visited---hover---active

a.当4个超链接伪类选择符联合使用时，应注意它们的使用顺序，正常顺序为：a:link--a:visited--a:hover--a:active

b.为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中

例：

a{color:red;}

a:hover{color:green;}

    实例：

<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>
        /* 伪类选择器 */
        /* 访问前的状态 */
        a:link {
            color: green;
        }

        /* 访问后的状态*/
        a:visited {
            color: red;
        }

        /* 鼠标移入 */
        a:hover {
            color: blueviolet;
        }

        /* 鼠标按下 */
        a:active {
            color: beige;
        }
    </style>
</head>

<body>
    <a href="http://baidu.com">百度</a>
</body>

    样式：

   访问前：   访问后：

  9.选择器的权重

     当多个选择器选择的是同一元素，且都为定义了样式，如果属性发生了冲突，会选择权重高的来执行。

选择器的权重
个数选择器权重，css中用4位数字表示权重，权重的表达方式0,0,0,0
1类型(元素)选择器0001
2class选择器(类选择器）0010
3id选择器0100
4包含符选择器为包含符的权重之和
5内联样式1000
6！important10000

     css选择器的解析规则

      a) 当不同选择符的样式设置有冲突时，高权重选择符的样式会覆盖低权重选择符的样式。

      b) 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符的样式。

    实例：

<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>
        /* id>class>元素 */
        #box1 {
            background-color: azure;
        }

        /* imortant的使用 优先级最高 */
        div {
            background-color: aqua !important;
        }

        .top {
            background-color: bisque;
        }

        /* 包含选择器 */
        p div {
            background-color: blueviolet;
        }

        p {
            background-color: antiquewhite;
        }

        div p {
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>
        <!-- 内联样式 -->
    <div class="top" id="box1" style="background-color:orange;">今天是晴天</div>
    </p>
    <div>
        <p class="middle" id="box2">p标签不能包含div标签</p>
    </div>
    <p>这是一个p标签</p>
</body>

    样式： 

 文本属性

  1.css属性和属性定义

  2.css文本属性

文本属性
个数属性描述说明
1font-size字体大小单位是px，浏览器默认是16px，设计图常用字号12px。
2font-famliy字体

当字体是中文字体，英文字体中有空格时，需加双引号。

多个字体中间用逗号连接，先解析第一个字体，如果没有，解析第二个字体，以此类推

3color颜色

color：red；

color：#fff；

color：rgb(255,0,0) 0-255

4font-weight加粗

font-weight:bolder(更粗的)/bold(加粗)/normal(常规)

font-weight:100-900; 100-500不加粗 600-900加粗

5font-style倾斜font-style:italic(斜体字)/oblique(倾斜的文字)/normal(常规显示)
6text-align文本水平对齐

text-align:left; 水平靠左

text-align:right; 水平靠右

text-align:center; 水平居中

text-align:justify; 水平两端对齐，但只对多行起作用。

7line-height行高line-height的数据=height的数据，可以实现单行的文本垂直居中
8text-indent首航缩进

text-indent可以取负值，text-indent属性只对第一行起作用 单位em或px

9

letter-spacing

word-spacing

字间距

词间距

控制文字和文字之间的间距

控制单词和单词之间的间距

10text-decoration文本修饰text-decoration:none-没有/underline-下划线/overline-上划线/line-through-删除线
11font文字简写

font是font-style font-weight font-size/line-height font-family的简写

例：

font:italic 800 30px/80px "宋体";

顺序不能改变，必须同时指定font-size和font-family属性时才起作用。

12text-transform文字大小写

取值:capitalize(首字母大写)

        lowercase(全部小写)

        uppercase(全部大写)

        none

    实例：

<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>
        .p1 {
            font-weight: 400;
            font-size: 24px;
            color: aqua;
        }

        .p2 {
            font-weight: 700;
            font-family: 宋体;
            /* 用十六进制表示颜色，每两位代表一个颜色，红 绿 蓝 */
            color: #ff0000;
        }

        .p3 {
            font-weight: 900;
            /* 取值为0-255 代表三种颜色 红绿蓝 */
            color: rgb(251, 0, 232);
        }

        .p4 {
            /* 字体加粗
               100 细体
               400 正常
               700 加粗
               900 更粗体 */
            font-weight: 100;
        }

        .p5 {
            /* 字体倾斜
               italic 斜体
               oblique 斜体 更强调
               normal 正常 */
            font-style: italic;
            font-weight: bolder;
        }

        .p6 {
            /* 文字大小写 */
            /* text-transform: capitalize; */
            /* text-transform: lowercase; */
            /* text-transform: none; */
            text-transform: uppercase;
            font-style: oblique;
            font-weight: bold;
        }

        .p7 {
            /* 垂直居中对齐 */
            line-height: 50px;
            height: 50px;
            background-color: beige;
            /* 文本对齐 */
            text-align: center;
            font-style: normal;
            font-size: normal;
        }

        .p8 {
            /* 字间距 */
            letter-spacing: 3px;
            /* 首行缩进 */
            text-indent: 2em;
            line-height: 30px;
            background-color: azure;
            width: 300px;
            text-align: justify;
            /* 统一设置 */
            font: italic 100 12px/30px 宋体;
        }

        /* 文本修饰线 */
        .span1 {
            text-decoration: underline;
        }

        .span2 {
            text-decoration: overline;
        }

        .span3 {
            text-decoration: line-through;
        }

        .span4 {
            text-decoration: none;
        }

        .span5 {
            text-decoration: overline line-through underline;
        }
    </style>
</head>
<body>
    <p class="p1">第一段</p>
    <p class="p2">第二段</p>
    <p class="p3">第三段</p>
    <p class="p4">第四段</p>
    <p class="p5">第五段</p>
    <p class="p6">Today is a happy day</p>
    <p class="p7">第七段</p>
    <p class="p8">寒蝉凄切。
        对长亭晚，骤雨初歇。①
        <span class="span1">都门帐饮无绪，留恋处、兰舟催发。②</span>
        执手相看泪眼，竟无语凝噎。③
        <span class="span2">念去去、千里烟波，暮霭沉沉楚天阔。④</span>
        多情自古伤离别。
        <span class="span3">更那堪、冷落清秋节。</span>
        <span class="span4">今宵酒醒何处，杨柳岸、晓风残月。</span>
        <span class="span5">此去经年，应是良辰好景虚设。⑤</span>
        便纵有千种风情，更与何人说。
    </p>
</body>

    样式: 

  3.css列表属性

css列表属性
个数属性描述说明
1list-style-type定义列表符合样式

list-style-type:disc--实心圆/circle---空心圆/square---实心方块/none---去掉符号

2

list-style-image

将图片设置为列表符合样式

list-style-image:url();

3list-style-position设置列表项标记的放置位置

list-style-position:outside; 列表外面 默认

list-style-position:inside; 列表里面

4list-style简写list-style:none; 去除列表符号

    实例：

<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>
        li {
            border: 1px solid red;
            /* 列表项样式 */
            /* list-style-type: circle;
            list-style-type: disc;
            list-style-type: square; */
            list-style-type: none;
            /* 列表项图片样式 */
            /* list-style-image: url(image/1.png); */
            /* 列表项放置位置 */
            /* list-style-position: inside; */
            /* 简写 */
            list-style: none url(image/1.png) outside;
        }

        .li1 {
            list-style-position: inside;
            list-style-image: url(image/1.png);
        }

        .li2 {
            list-style-position: inside;
            list-style-image: url(image/2.png);
        }

        .li3 {
            list-style-position: inside;
            list-style-image: url(image/3.png);
        }
    </style>
</head>

<body>
    <ul>
        <li class="li1">第一列</li>
        <li class="li2">第二列</li>
        <li class="li3">第三列</li>
    </ul>
    <ul>
        <li>第一列</li>
        <li>第二列</li>
        <li>第三列</li>
    </ul>
</body>

    样式： 

  4.css背景属性

背景属性
个数属性描述说明
1background-color背景颜色

background-color:red;

2background-image背景图片background-image:url();
3background-repeat背景图片的平铺background-repeat:no-repeat--不平铺/repeat--平铺/repeat-x--在x轴平铺/repeat-y--在y轴上平铺;
4background-position背景图片定位

background-position:水平位置 垂直位置; 可以给负值

单位可以是px或%

5background-attachment背景图片的固定background-attachment:scroll(滚动)/fix(固定，固定在浏览器窗口中，固定之后就相对于浏览器窗口了)
6background-size背景图片的大小

background-size:100px 100px;

background-size:100% 100%

background-size:cover;-把背景图片扩至足够大可以覆盖背景区域

backgound-size:contain; 吧图片图像扩至最大尺寸，使其高度和宽度完全适应背景区域，铺不满留白

    实例：

<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>
        .box {
            width: 800px;
            height: 600px;
            /* 背景颜色 */
            background-color: pink;
        }


        .box1 {
            width: 6000px;
            height: 600px;
            /*背景图片 */
            background-image: url(image/cat1.jpg);
            /* 图片平铺 
               默认图片平铺
               background-repeat: repeat;*/
            /* 在x轴上平铺 */
            /* background-repeat: repeat-x;  */
            /* 在y轴上平铺 */
            /* background-repeat: repeat-y; */
            /* 不平铺 */
            background-repeat: no-repeat;
            /* 图片定位 相对于父元素  */
            /* 1 background-position: 20px 20px; */
            /* 2 background-position: 20% 20p%; */
            /* 3 background-position: left center; */
            background-position: 20px 20px;
            /* 图片大小 */
            /* background-size: 600px 600px; */
            /* background-size: 100% 100%; */
            /* background-size: cover; */
            background-size: contain;

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

    样式： 

    视觉差效果应用：

<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>百变小樱</title>
    <style>
        .box1 {
            width: 600px;
            height: 700px;
            background-image: url(image/xiaoying.jpeg);
            background-size: 600px 600px;
            /* 背景图片的固定 */
            background-attachment: fixed;
            /* background-attachment: scroll; */

        }

        .box2 {
            width: 600px;
            height: 700px;
            background-image: url(image/xiaoying1.jpg);
            background-size: 600px 600px;
            background-attachment: fixed;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

视觉差效果

     背景的复合属性：

      background:yellow url() no-repeat center fixed;

     注：中间用空格隔开，顺序可以调换，background-size属性只能单独写。

  5.css边框属性

边框属性
个数属性描述说明
1border-widthborder-width:10px;边框的宽度
2border-styleborder-style:solid--实线/double--双线/dashed--虚线/dotted--点状线边框的样式
3border-colorborder-color:red;边框的颜色

    实例:

<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>
        .box {
            /* 边框的属性
               三个属性分别都可以取四个值 用空格连接
               2个值：上下，左右
               3个值：上，左右，下
               4个值：上，右，下，左 */
            border-color: aqua;
            border-style: solid;
            border-width: 10px;
            /* border-width: 10px 5px 3px 5px;
            border-style: solid double dashed dotted;
            border-color: red blue yellow black; */
            width: 100px;
            height: 100px;
            background-color: aquamarine;

        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

    样式： 

  6.css浮动属性

     1)浮动的属性

浮动属性
个数属性描述说明
1floatfloat:left;元素靠左边浮动
2floatfloat:right;元素靠右边浮动
3floatfloat:none;元素不浮动
4clearclear:none;

允许有浮动对象  

5clearclear:right;不允许右边有浮动对象
6clearclear:left;不允许左边有浮动对象
7clearclear:both;不允许有浮动对象

     2) 浮动的作用

  • 定义网页中其他文本如何环绕该元素显示
  • 就是让竖着的东西横着来
  • 清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置

    浮动实例：

<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: 300px;
            height: 100px;
        }

        .box1 {
            float: left;
            background-color: pink;
        }

        .box2 {
            float: left;
            background-color: orange;
        }

        .box3 {
            background-color: red;
        }

        .box4 {
            width: 600px;
            height: 300px;
            float: left;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 其中两个浮动，没有浮动的被覆盖 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <br>
    <!-- 一行被占满，则在下一行进行浮动 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <!-- 即使发生覆盖文字也会显示出来 -->
    <span>隔开</span>
    <!-- 三个盒子不一样大的时候 见缝插针-->
    <div class="box4"></div>
    <br>
</body>

    样式：

    清除浮动：

    当其中一个盒子浮动起来，那么下一个盒子的显示就会被覆盖，所以可以清除浮动。

    实例：

<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: 100px;
            height: 100px;
        }

        .box1 {
            background-color: aquamarine;
            float: left;
        }

        .box2 {
            background-color: aqua;
            float: right;
        }

        /* 发生了覆盖 
           清除覆盖：
           1 写一个固定的高度
           2 在下一个未浮动的盒子里清浮动 clear:none/left,right,both;
           3 在当前浮动盒子下加一个盒子 不设置宽高 clear:both;
           4 overflow:hidden; 让浮动元素计算高度
           */
        .box {
            width: 300px;
            height: 100px;
            background-color: azure;
            /* 下一个盒子清除浮动*/
            clear: both;

        }

        .box3 {
            background-color: aquamarine;
            float: left;
        }

        .box4 {
            background-color: aqua;
            float: right;
        }

        .box5 {
            width: 300px;
            height: 100px;
            background-color: azure;
        }

        /* 写一个固定高度 */
        .container {
            width: 100%;
            /*height: 100px; */
            /* 让浮动元素计算高度 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- 写一个固定高度 -->
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
    <!-- 清除浮动 clear-->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box"></div>
    <!-- 加盒子 -->
    <div class="box3"></div>
    <div class="box4"></div>
    <p style="clear:both;"></p>
    <div class="box5"></div>

</body>

     样式：

 盒子模型

  盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有元素都可以拥有盒子一样的外形和平面空间，即包含边框，边界，补白，内容区，这就是盒模型

   1.内边距

       内边距--padding:xx px;

       特性:

       1.背景色蔓延到内边距

       2.可进行单独方向的设置

          padding-方向:top/bottom/left/right;

       3.不可以取负值

    实例：

<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: 500px;
            background-color: aqua;
            text-align: justify;
            text-indent: 2em;
            /* 内边距
               一个值 4个方向一样
               两个值 上下，左右
               三个值 上，左右，下
               四个值 上，右，下，左 */
            /* padding: 10px; */
            /* padding: 10px 20px; */
            /* padding: 10px 20px 10px; */
            padding: 10px 15px 20px 30px;
        }
    </style>
</head>

<body>
    <div>
        “国庆”一词，本指国家喜庆之事，最早见于西晋。西晋的文学家陆机在《五等诸侯论》一文中就曾有“国庆独飨其利，主忧莫与其害”的记载。在我国的封建时代，国家喜庆的大事，莫大过于帝王的登基、诞辰等。因而我国古代把皇帝即位、诞辰称为“国庆”。今天称国家建立的纪念日为国庆节。
    </div>
</body>

    样式: 

   2.边框

  • border:边框粗细  什么样式的边框  边框的颜色;

      例: border:1px solid red;

      样式的取值:solid--实线  double--双线  dashed---虚线  dotted--点状线

  • 特性

       背景色也能蔓延边框

       可进行单独方向的设置----border-方向

    实例：

<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: 500px;
            background-color: aqua;
            text-align: justify;
            text-indent: 2em;
            /* 边框 */
            /* border: 2px solid green; */
            /* border: 2px double green; */
            /* border: 2px dashed green; */
            border: 2px dotted green;
        }
    </style>
</head>

<body>
    <div>
        “国庆”一词，本指国家喜庆之事，最早见于西晋。西晋的文学家陆机在《五等诸侯论》一文中就曾有“国庆独飨其利，主忧莫与其害”的记载。在我国的封建时代，国家喜庆的大事，莫大过于帝王的登基、诞辰等。因而我国古代把皇帝即位、诞辰称为“国庆”。今天称国家建立的纪念日为国庆节。
    </div>
</body>

    样式： 

  3. 外边距

       margin:xx px;

       两个盒子之间的距离

       特性:

       1.margin-方向---四个方向

       2.背景色没有蔓延

       3.*{margin=0;}

       4.外边距没有负值

       5.屏幕居中 margin:0 auto;

       问题:

       a.父子关系，给子加外边距，但作用于父身上，怎么解决？

  •     从子的margin-top转为父的padding-top，注意高度计算
  •     给父盒子设置边框，注意计算高度 transparent 透明
  •     加入浮动标签 给任意一个盒子
  •     overflow:hidden; bfc,不会受到外界的干扰 给父盒子加

       b.兄弟关系，两个盒子垂直外边距和水平外边距问题

  •    垂直方向，外边距取最大值
  •    水平方向，外边距会进行合并处理

    实例：

<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: 100px;
            height: 100px;
        }

        .box1 {
            background-color: pink;
            /* 外边距 也可加1 2 3 4 4个值 分别代表方向与内边距一样
                      也可对单独方向进行设置 top/bottom/left/right */
            margin: 10px 20px 30px 40px;
        }

        /* 当两个盒子之间上下排列，分别设置下外边距和上外边距，两个边距之间会取最大值 */
        .box2 {
            background-color: orange;
            margin-top: 20px;
        }

        /* 为了不影响下行正常显示 */
        .box {
            width: 100%;
            overflow: hidden;
        }

        .box3 {
            background-color: aquamarine;
            margin-right: 10px;
            float: left;
        }

        /* 当两个盒子水平排列，分别设置右外边距和左外边距，两个外边距会加在一起 */
        .box4 {
            background-color: orange;
            margin-left: 10px;
            float: left;
        }

        /* 盒子之间是父子关系的时候 给子盒子加入的外边距会作用在父盒子上*/

        .father {
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            margin-top: 10px;
            /* 解决办法一 给父盒子加padding 但父盒子高度会增加 需要减去相应padding高度*/
            /* padding-top: 10px; */
            /* 解决办法二 给父盒子设置边框 父盒子的高度依旧会增加 需要减去相应边框宽度 */
            /* border: 1px solid transparent; */
            /* transparent--透明 */
            /* 解决办法三 加入浮动标签给任意一个盒子 */
            /* float: left; */
            /* 解决办法四 用overflow:hidden; 只能给父盒子加 */
            overflow: hidden;
        }

        .son {
            background-color: bisque;
            margin-top: 10px;
            /* float: left; */

        }
    </style>
</head>

<body>
    <!--外边距 -->
    <!-- 两个盒子垂直排列 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 两个盒子水平排列 -->
    <div class="box">
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
    <!-- 父子盒子 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

    样式： 

溢出属性

  1.溢出属性--容器的

      overflow:visible/hidden(隐藏)/scroll/auto(自动)/inhert;

  • visible---默认值，溢出内容会显示在元素之外;
  • hidden---溢出内容隐藏，文本裁切;
  • scroll---滚动，溢出内容以滚动的方式显示;
  • auto---如果有溢出会添加滚动条，没有溢出正常显示;
  • inhert---规定应该遵从父元素继承overflow属性的值
  • overflow-x:X轴溢出     overflow-y:Y轴溢出

    实例：

<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: 200px;
            height: 200px;
            background-color: blanchedalmond;
            /* 隐藏溢出的文本 */
            /* overflow: hidden; */
            /* 无论文本是否溢出 都会出现滚动条显示 */
            /* overflow: scroll; */
            /* 文本溢出时才出现滚动条显示 */
            overflow: auto;
            /* 文本溢出会显示在外面 */
            /* overflow:visible; */
            /* 继承父元素的属性 */
            /* overflow: inhert; */
        }

        .box {
            width: 200px;
            height: 200px;
            /* 对单行进行设置 但是x y要都进行设置才可以使用 */
            overflow-x: auto;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <div>
        “国庆”一词，本指国家喜庆之事，最早见于西晋。西晋的文学家陆机在《五等诸侯论》一文中就曾有“国庆独飨其利，主忧莫与其害”的记载。在我国的封建时代，国家喜庆的大事，莫大过于帝王的登基、诞辰等。因而我国古代把皇帝即位、诞辰称为“国庆”。今天称国家建立的纪念日为国庆节。
    </div>
    <div class="box">
        <img src="image/cat1.jpg">
    </div>
</body>

    样式： 

  2.空余空间 

      white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的留白

  • normal---默认值，空白会被浏览器忽略
  • nowrap---文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止
  • <pre></pre> 标签---预格式化文本 会保留空格，回车，tab。不换行
  • pre-wrap--显示空格和回车，换行。
  • pre-line---显示回车，换行。

    实例：

<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: 200px;
            height: 200px;
            background-color: aqua;
            /* 空余留白 */
            /* 文本不换行 */
            /* white-space: nowrap; */
            /* 保留文本的空格和回车 不换行 */
            /* white-space: pre; */
            /* 保留文本的空格和回车 换行 */
            /* white-space: pre-wrap; */
            /* 保留文本的回车 换行 */
            white-space: pre-line;
        }
    </style>
</head>

<body>
    <pre>
        预格式化文本-保留空格，回车，tab。
        div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        }
    </pre>
    <div>
        “国庆”一词，本指国家喜庆之事，最早见于西晋。
        西晋的文学家陆机在《五等诸侯论》一文中就曾有“国庆独飨其利，主忧莫与其害”的记载。在我国的封建时代，国家喜庆的大事，莫大过于帝王的登基、诞辰等。因而我国古代把皇帝即位、诞辰称为“国庆”。
        今天称国家建立的纪念日为国庆节。
    </div>
</body>

    样式： 

  3.省略号显示

      text-overflow:clip/elipsis;

  • clip---默认值，不显示省略号（...）
  • elipsis---显示省略号

      注意：当文本溢出显示省略号需要同时设置以下声明

  • 容器宽度--width:200px;
  • 强制文本在一行内显示---white-space:nowrap;
  • 溢出内容未隐藏---overflow:hidden;
  • 溢出文本显示省略号---text-overflow:elipsis;

    实例：

<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 {
            height: 200px;
            /* 必须写此4条 */
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        “国庆”一词，本指国家喜庆之事，最早见于西晋。西晋的文学家陆机在《五等诸侯论》一文中就曾有“国庆独飨其利，主忧莫与其害”的记载。在我国的封建时代，国家喜庆的大事，莫大过于帝王的登基、诞辰等。因而我国古代把皇帝即位、诞辰称为“国庆”。今天称国家建立的纪念日为国庆节。
    </div>
</body>

    样式： 

小韩a
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端开发简介
qq_57249957的博客
01-13 2724
web前端开发介绍 web网页介绍 网络系统软件开发的两种结构： C/S是客户机（client）/服务器（server） C/S:需要客户端 B/S是浏览器(browser)/服务器 B/S:可在任何地方操作不需要安装专门的软件，维护和升级方便，成本低，但应用服务器运行数据负载较重。（现在服务器端可以采用集群架构…方法）网页开发属于这个结构。 web网站介绍——动态网站 现在大部分网页都采用的是动态数据加载,就比如说我们常看的新闻刷新一下就会有不同的数据。 动态网站一般以数据库技术为基础 目前比较
web前端开发技术储久良第三版答案
12-09
web前端开发技术储久良第三版答案
＜hr＞设置线条颜色
qq_43654065的博客
09-07 1208
hr{ background-color:red; /*设置新线条颜色。 */ height: 1px;/*设置高度会添加新设置的颜色，但hr中本来的灰色还是存在的。 */ border: none;/*去掉hr中本来的边框，即原本的灰色。 */ }
更改hr元素的颜色
p15097962069的博客
12-31 1658
我想使用CSS更改hr标签的颜色。 我在下面尝试过的代码似乎不起作用： hr { color: #123455; }
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
web前端开发介绍
淘小欣的博客
03-02 1万+
前端内容介绍 一、什么是前端 应用软件组成：前端＋后端 后端负责处理业务逻辑＆提供数据，任何与用户直接打交道的操作界面都可以称之为前端，主要负责页面展示、与用户交互等等下面都是前端： 公司官网（在PC通过浏览器来访问公司网站） 移动端网页（在手机上来浏览公司信息、小游戏等） 移动端APP（例如：淘宝、去哪儿旅游、携程等） 微信小程序（微信最新推出的功能，随用随装，不占用手机空间）。 前端开发是从网页制作演变而来的。 早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。 随着互联网
【1+X Web前端等级考证 】| 最新Web前端开发中级实操
go
11-23 4万+
# 前言 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？ # 关于考不考 因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除.
Web前端开发
weixin_56424887的博客
12-11 2681
Web前端开发
WEB前端开发练习代码
tiantianzs的博客
01-11 5982
<!DOCTYPE html> <!-- HTML5申明 --> <html lang="zh"> <!-- 表示本网站为中文网站 --> <!-- 头部，定义网页标题和字体样式等 --> <head> <meta charset="UTF-8"> <!-- 定义网页为UTF-8编码 --> <title>Web前端开发技术初步应用</title> &l.
Web前端开发教程
weixin_41135508的博客
05-03 1万+
web前端开发，基于html+css+js,JQuery。
【1+X Web前端等级考证 】 | Web前端开发中级理论 (附答案)
go
11-23 3万+
# 前言 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？ # 关于考不考 因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除.
web前端开发知识
10-26
主要是对前端开发的基础认识，他人对前端技术的理解，
Web前端开发规范手册
03-24
Web前端开发规范手册
Web前端开发十日谈
03-03
一直想写这篇“十日谈”，聊聊我对Web前端开发的体会，顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术，我想，通过技术的历练，得到的反思应当更重要。我一直认为自己是“初级”前端开发工程师，一方面我入...
WEB前端开发手册合集.zip
06-26
CSS，Ajax，Bootstrap，DOM文档对象，easyUI，EXT，HTML ，ionic，JavaScript，jQuery ，Node.js，Sass ，Underscore，Vue.js ，Webpack ，XML 等等全套开发手册
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 167
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 682
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1131
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 277
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
web前端开发vscode
10-26
在VSCode中，你可以使用各种插件来增强Web前端开发的体验。例如，你可以使用Live Server插件来实时预览你的网页，使用Emmet插件来快速编写HTML和CSS代码，使用Prettier插件来格式化你的代码等等。 此外，VSCode还...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值