HTML+CSS学习笔记

最新推荐文章于 2022-10-04 01:27:21 发布
最新推荐文章于 2022-10-04 01:27:21 发布
阅读量1k 收藏 1
点赞数
分类专栏： 笔记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_zx1/article/details/104724723
版权

内容概述

文章目录

一. css特性

  • 继承
  • 层叠

1. CSS属性的继承

cakjksjadj

CSS中有些属性是可继承的，何为属性的继承？

  • 一个元素如果没有设置某属性的值，就会跟随父元素的值

  • 当然，一个元素如果有设置某属性的值，就优先使用自己设置的值

比如color、font-size等属性都是可以继承的

究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案

官方文档全是英文,推荐使用mdn文档,跟官网几乎没啥差别

  • https://developer.mozilla.org/zh-CN/

不能继承的属性，一般可以使用inherit值强制继承

浏览器的开发者工具也会标识出哪些样式是继承过来的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uGYdFxVb-1583593504146)(day4.assets/image-20200304231742780.png)]

点击元素可以查看它继承了谁的元素

在开发中我们应该善用浏览器调试工具

img标签无法继承

如果想图片和父元素一样宽度时需要设置100%或者使用inherit值强制继承

2. 继承的注意事项

CSS属性继承的是计算值，并不是当初编写属性时的指定值（字面值）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpLRVuFy-1583593504147)(Untitled.assets/image-20200304232158151.png)]

div3是继承了50%经过计算的值,而不是原值,如果是原值就变成了12.5px

3. CSS属性的层叠

3.1基本选择器:

  • 当选择器一样时,最后一个执行的会生效

CSS允许多个相同名字的CSS属性层叠同在一个元素上

  • 层叠后的结果是：只有一个CSS属性会生效,

浏览器的开发者工具非常清晰地显示了哪个CSS属性会生效

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSFUcHUe-1583593504148)(Untitled.assets/image-20200304232520504.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AD512cbu-1583593504149)(Untitled.assets/image-20200304232402392.png)]

被划掉的一般是两个原因

  • 注释
  • 被层叠掉的css设置

哪个CSS属性会生效，取决于CSS属性所处环境的优先级高低

4. CSS属性的优先级

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

  • !important：10000 在设置css的时候直接在后面加上即可

  • 内联样式：1000

  • id选择器：100

  • 类选择器、属性选择器、伪类：10

  • 元素选择器、伪元素：1

  • 通配符：0

比较优先级的严谨方法

从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较

  • 如果数量相同，比较下一个较小的权值，以此类推

  • 如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojN8dsYr-1583593504150)(Untitled.assets/image-20200304232837539.png)]

思考：为什么会出现以下结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-up3uZBPz-1583593504151)(Untitled.assets/image-20200304232946706.png)]

解析:

  1. a标签没有继承是因为,自己本身已经有属性了

  2. p标签不能包含div,这样html结构会乱掉,导致div不在p标签里所以,css设置不上

5. CSS属性使用经验

为何有时候编写的CSS属性不好使，有可能是因为

  • 选择器的优先级太低

  • 选择器没选中对应的元素

  • CSS属性的使用形式不对

    • 元素不支持此CSS属性，比如span默认是不支持width和height的
    • 浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
    • 被同类型的CSS属性覆盖，比如font覆盖font-size

建议

  • 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

二. HTML-列表元素

列表在网页中非常常见

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3H4gtnr8-1583593504152)(day4.assets/image-20200304235919346.png)]

HTML提供了3组常用的用来展示列表的元素

  • 有序列表：ol、li

  • 无序列表：ul、li

  • 定义列表：dl、dt、dd

li是块元素,前面的数字或者符号是不包含在块里

2.1 有序列表 – ol、li

ol（ordered list）

  • 有序列表，直接子元素只能是li

li（list item）

  • 列表中的每一项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2lC3FBvc-1583593504153)(day4.assets/image-20200305000222591.png)]

2.2 无序列表：ul、li

ul（unordered list）

  • 无序列表，直接子元素只能是li

li（list item）

  • 列表中的每一项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R0wf59id-1583593504154)(day4.assets/image-20200305000325600.png)]

li一定要是ul或者ol的直接子元素,虽然里面可以放别的元素,但不推荐

2.3 定义列表：dl、dt、dd

dl（definition list）

  • 定义列表，直接子元素只能是dt、dd

dt（definition term）

  • 列表中每一项的项目名

dd（definition description）

  • 列表中每一项的具体描述，是对 dt 的描述、解释、补充

  • 一个dt后面一般紧跟着1个或者多个dd

dt、dd常见的组合

  • 事物的名称、事物的描述

  • 问题、答案

  • 类别名、归属于这类的各种事物

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIIPRp5S-1583593504155)(day4.assets/image-20200305000544245.png)]

2.4 列表相关的CSS属性

列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style

  • 它们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素

list-style-type：设置li元素前面标记的样式

  • disc（实心圆）、circle（空心圆）、square（实心方块）

  • decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）

  • lower-alpha（小写英文字母）、upper-alpha（大写英文字母）

  • none（什么也没有）

list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置

list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值

  • outside表示序号在内容的外边
  • insider表示序号在内容开始的位置

list-style：是list-style-type、list-style-image、list-style-position的缩写属性

  • list-style: outside url(“images/dot.png”);

  • 一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none;

三.HTML-表格元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbsVo3Hs-1583593504157)(day4.assets/image-20200305001622480.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwCwLnzQ-1583593504157)(day4.assets/image-20200305001635073.png)]

1.使用介绍

table

  • 表格

tr

  • 表格中的行

td

  • 行中的单元格

2. table的常用属性

border边框的宽度
cellpadding单元格内部的间距
cellspacing单元格之间的间距
width表格的宽度
align表格的水平对齐方式 left、center、right

3. tr、th、td的常用属性

tr常用属性:

valign:设置整行垂直方向

align : 设置整行水平对齐方向

valign行的垂直对齐方式 top、middle、bottom、baseline
align行的水平对齐方式 left、center、right

td常用属性:

对单元格进行单独设置

width和height进行设置后这一列的单元格全会跟着改变

rowspan colspan:合并单元格

valign单元格的垂直对齐方式 top、middle、bottom、baseline
align单元格的水平对齐方式 left、center、right
width单元格的宽度
height单元格的高度
rowspan单元格可横跨的行数
colspan单元格可横跨的列数

4. 细线表格的实现

table { border-collapse: collapse; }

  • 合并单元格的边框,经常用到
  • 在开发中一般很少用到上面的属性,会和html代码区分快

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aThsY1bk-1583593504158)(day4.assets/image-20200305142853766.png)]

效果图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FkawPcM6-1583593504159)(day4.assets/image-20200305143140791.png)]

5. 其他元素

tbody

  • 表格的主体,内容

caption

  • 表格的标题

thead

  • 表格的表头
  • 表格的第一行

tfoot

  • 表格的页脚,
  • 开发中很少用到,因为跟tr元素没差别

th

  • 表格的表头单元格
  • 一般配合thead使用

6. 单元格的合并

单元格合并的要领:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMO579Py-1583593504160)(day4.assets/image-20200305151744507.png)]

找对对应的行写上colspan或rowspan=“2”

删掉被覆盖的td元素,不删除则会向右挤一格

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hcc8DLj-1583593504162)(day4.assets/image-20200305152100891.png)]

页面效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TcFSfwwa-1583593504164)(day4.assets/image-20200305152130376.png)]

CSS属性- border-spacing

单元格和单元格之间是有间距的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXjiWKyb-1583593504166)(day4.assets/image-20200305153157253.png)]

border-spacing用于设置单元格之间的水平、垂直间距，比如

  • 2个值分别是cell之间的水平、垂直间距

  • 如果只设置1个值，同时代表水平、垂直间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEU67rZF-1583593504167)(day4.assets/image-20200305153446650.png)]

页面效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ruwevwzr-1583593504168)(day4.assets/image-20200305153524675.png)]

四. HTML-表单元素

4.1 常用元素

form

  • 表单

  • 一般情况下，其他表单相关元素都是它的后代元素

input

  • 单行文本输入框、单选框、复选框、按钮等元素

textarea

  • 多行文本框

select、option

  • 下拉选择框

button

  • 按钮

label

  • 表单元素的标题

fieldset

  • 表单元素组

legend

  • fieldset的标题

4.2 input的常用属性

type：input的类型

  • text：文本输入框（明文输入）

  • password：文本输入框（密文输入）

  • radio：单选框

  • checkbox：复选框

  • button：按钮

  • reset：重置

  • submit：提交表单数据给服务器

  • file：文件上传

maxlength：允许输入的最大字数

placeholder：占位文字

readonly：只读

disabled：禁用

checked：默认被选中

  • 只有当type为radio或checkbox时可用

autofocus：当页面加载时，自动聚焦

name：名字

  • 在提交数据给服务器时，可用于区分数据类型

value：取值

form：设置所属的form元素（填写form元素的id）

  • 一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器

使用细节

1.name值相同的radio才具备单选功能

2.属于同一种类型的checkbox，name值要保持一致

3.去除input的Tab键选中效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1xnUzS5g-1583593504171)(day4.assets/image-20200305182126308.png)]

当我们按下tab键的时候会自动跳转到文本框上,这时候文本框有一条蓝色的线,可以使用outline把它去掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3xwzPfD-1583593504172)(day4.assets/image-20200305182221478.png)]

或者将tabindex属性值设置为-1,这个是表示不能使用tab键进行跳转

textarea

textarea的常用属性

  • cols：列数

  • rows：行数

缩放的CSS设置

  • 禁止缩放：resize: none;

  • 水平缩放：resize: horizontal;

  • 垂直缩放：resize: vertical;

  • 水平垂直缩放：resize: both;

select和option

option是select的子元素，一个option代表一个选项

select常用属性

  • multiple：可以多选

  • size：显示多少项

option常用属性

  • selected：默认被选中

fieldset和legend

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fVOyCkKI-1583593504174)(day4.assets/image-20200305182744197.png)]

form的常用属性

action

  • 用于提交表单数据的请求URL

method

  • 请求方法（get和post），默认是get

target

  • 在什么地方打开URL（参考a元素的target）

enctype

  • 规定了在向服务器发送表单数据之前如何对数据进行编码

  • 取值有3种

    • application/x-www-form-urlencoded：默认的编码方式
    • multipart/form-data：文件上传时必须为这个值，并且method必须是post
    • text/plain：普通文本传输

accept-charset：规定表单提交时使用的字符编码

4.3 布尔属性（booleanattributes）

布尔属性可以没有属性值，写上属性名就代表使用这个属性

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected

如果要给布尔属性设值，值就是属性名本身

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mMYCQJq-1583593504175)(day4.assets/image-20200305170631710.png)]

4.5 综合演练:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s2d8Bjgw-1583593504177)(day4.assets/image-20200305171900322.png)]

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UbHNlgGD-1583593504178)(day4.assets/image-20200305172133144.png)]

4.6 按钮

普通按钮（type=button）：使用value属性设置按钮文字

重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）

提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

另外一种写法 button元素

使用button元素也能实现按钮，功能效果跟input一样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9MlZ2pda-1583593504180)(day4.assets/image-20200305173915239.png)]

4.7 inpu和label的关系

label元素一般跟input配合使用，用来表示input的标题

labe可以跟某个input绑定，点击label就可以激活对应的input

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MlhUK29r-1583593504181)(day4.assets/image-20200305180338099.png)]

4.8 表单提交

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TLIlppft-1583593504182)(day4.assets/image-20200305184941096.png)]

表单提交有两种方式

传统表单提交的方式

get和post

提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择

get

  • 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如

http://ww.test.com/login?phone=123&password=234&sex=1

  • 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB

post

  • 发给服务器的参数全部放在请求体中

  • 理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）

get请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dS1dAjML-1583593504184)(day4.assets/image-20200305185234128.png)]

post请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNU3JpSr-1583593504185)(day4.assets/image-20200305185303561.png)]

post请求我们可以去f12network点击请求,点击header查看

五. 元素类型

5.1 块级丶行内级元素

根据元素的显示（能不能在同一行显示）类型，HTML元素可以主要分为2大类

  • 块级元素（block-level elements）

    • 独占父元素一行
    • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等

  • 行内级元素（inline-level elements）

    • 多个行内级元素可以在父元素的同一行中显示
    • 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等

5.2 替换和非替换类型

根据元素的内容（是否浏览器会替换掉元素）类型，HTML元素可以主要分为2大类

  • 替换元素（replaced elements）

    • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
    • 比如img、input、iframe、video、embed、canvas、audio、object等
    • 现阶段常用到只有img，input

  • 非替换元素（non-replaced elements）

    • ​ 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
    • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等

5.3 元素的分类和总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RLOTPGeB-1583593504187)(day4.assets/image-20200305221817662.png)]

块级元素没有替换元素，只要是块元素都是非替换元素，所以只有行内元素才去区分替换和非替换

行内元素：

替换元素都是行内元素，行内元素的替换元素式可以设置宽高的

之前所说的行内元素不能设置宽高不是很严谨，正确来说是

行内元素的非替换元素，都是不能设置宽高的

只有行内元素的替换元素可以设置宽高，目前所学只有img input iframe

5.4 CSS属性-display

CSS中有个display属性，能修改元素的显示类型，有4个常用值

  • block：让元素显示为块级元素

    • 浏览器默认给div/p/h1…元素设置了display

  • inline：让元素显示为行内级元素

  • none：隐藏元素

    • 不占据空间

  • inline-block：(比较特殊)

  • 可以让元素同时具备块级、行内级元素的特征

    • 跟其他行内级元素在同一行显示

    • 可以随意设置宽高

    • 宽高默认由内容决定

    可以理解为

    • 对外来说，它是一个行内级元素

    • 对内来说，它是一个块级元素

    常见用途

    • 让行内级非替换元素（比如a、span等）能够随时设置宽高

    • 让块级元素（比如div、p等）能够跟其他元素在同一行显示

display补充(基本不使用,了解即可)

display 练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mccfEzMA-1583593504188)(day4.assets/image-20200305225112024.png)]

 <style>
        /* 样式重置 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        /* 整体的样式 */
        .email {
            width: 100px;
            border: 2px solid #999;
            text-align: center;
        }
		/*设置鼠标放上去的时候才会显示*/
        .email:hover ul {
            display: block;
        }

        /* 局部: header */
        /* .header:hover+ul {
            display: block;
            background-color: #f00;
        } */

        .header {
            background-color: #999;
            color: #fff;
        }

        /* 局部: 邮箱列表 默认不显示 */
        .email ul {
            display: none;
        }
		/*鼠标放到a标签的时候,改变颜色*/
        .email ul li a:hover {
            background-color: skyblue;
        }
		/*因为a标签是行内元素,只占内容的宽度,为了用户体验更好将其设为块级元素,独占一行*/
        .email ul li a {
            display: block;
        }
    </style>
</head>
<body>
    <div class="email">
        <div class="header">邮箱</div>
        <ul>
            <li><a href="#">QQ邮箱</a></li>
            <li><a href="#">163邮箱</a></li>
            <li><a href="#">139邮箱</a></li>
        </ul>
    </div>
    <div class="product">
        <ul class="list">
            <li></li>
        </ul>
    </div>
</body>

我们在做项目的顺序一定要规划好

  • 结构
  • 基本css配置
  • 全局css配置
  • 局部css
2.练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dBxiqtN-1583593504189)(day4.assets/image-20200306005357365.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 1.样式的重置 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #0000cc;
        }

        /* 2.整体样式 */


        /* 3.每一个li的样式 */
        .page ul li {
            display: inline-block;
        }

        .page ul li a {
            display: inline-block;
            width: 34px;
            height: 34px;
            border: 1px solid #e1e2e3;

            font-size: 14px;

            /* 调整间距 */
            margin-right: 5px;

            /* 居中 */
            text-align: center;
            line-height: 34px;
        }

        .page ul li a:hover {
            border: 1px solid #38f;
            background-color: #f2f8ff;
        }

        .page .prev a, .page .next a {
            width: 88px;
        }

        /* 4.点击后的a效果 */
        .page .active {
            width: 36px;
            height: 36px;
            line-height: 36px;

            border: none;
            font-weight: 700;
            color: #000;

            /* 不好: 依然是可以点击 */
            /* cursor: initial; */
        }

        .page .active:hover {
            border: none;
            background-color: transparent;
        }
    </style>
</head>
<body>

    <!-- .page>ul>(li{&lt;上一页}>a[href=#])+(li{$}*10>a[href=#])+li{下一页&gt;}>a[href=#] -->

    <div class="page">
        <ul>
            <li class="prev"><a href="#">&lt;上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a class="active">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li class="next"><a href="#">下一页&gt;</a></li>
        </ul>
    </div>

</body>
</html>

5.5CSS属性-visibility

visibility，能控制元素的可见性，有2个常用值

  • visible：显示元素

  • hidden：隐藏元素

visibility: hidden; 和 display: none; 的区别

  • visibility: hidden;

    • 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置

  • display: none;

    • 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

5.6 CSS属性- overflow

overflow用于控制内容溢出时的行为

  • visible：溢出的内容照样可见

  • hidden：溢出的内容直接裁剪

  • scroll：溢出的内容被裁剪，但可以通过滚动机制查看

    • 会一直显示滚动条区域，滚动条区域占用的空间属于width、height

  • auto：自动根据内容是否溢出来决定是否提供滚动机制

还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向

这两个属性可以决定水平或垂直方向是否有滚动条

浏览器的x和y轴是默认从左上角开始的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHG0Q0RJ-1583593504190)(day4.assets/image-20200306011302682.png)]

（建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持）

5.7 细节补充

行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析显示为空格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eDZnUXzt-1583593504191)(day4.assets/image-20200306011659667.png)]

目前建议的解决方法

​ 1.元素代码之间不要留空格

​ 2.注释掉空格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFaemQbC-1583593504192)(day4.assets/image-20200306011801665.png)]

​

3.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size

  • 此方法在Safari不适用

​ 4.给元素加float

注意点

块级元素、inline-block元素

  • 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）

  • 特殊情况，p元素不能包含其他块级元素

行内元素（比如a、span、strong等）

  • 一般情况下，只能包含行内元素

六. 盒子模型

6.1 盒子

HTML中的每一个元素都可以看做是一个盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGvaQfID-1583593504192)(day4.assets/盒子模型.png)]

盒子模型（Box Mode)

HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性

  • 内容（content）

    • 盒子里面装的东西

  • 内边距（padding）

    • 盒子边缘和里面装的东西之间的间距

  • 边框（border）

    • 就是盒子的边框，边缘部分

  • 外边距（margin）

    • 盒子和其他盒子之间的间距

6.2 盒子内容相关CSS属性

width：宽度

min-width：最小宽度，无论内容多少，宽度都大于或等于min-width

  • 用户在缩小网页的时候会导致我们内容全挤在一块
  • 为了防止这种事,可以设置最小宽度,这样用户在进行缩小的时候
  • 会自动出来滚动条

max-width：最大宽度，无论内容多少，宽度都小于或等于max-width

height：高度

min-height：最小高度，无论内容多少，高度都大于或等于min-height

max-height：最大高度，无论内容多少，高度都小于或等于max-height

6.3 内边距相关CSS属性

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

padding：是padding-top、padding-right、padding-bottom、padding-left的简写属性

  • 按照顺时针方向设值：top、right、bottom、left

  • 如果缺少left, 那么left就使用right的值

  • 如果缺少bottom, 那么bottom就使用top的

    <style>
        .box {
            display: inline-block;
            width: 500px;
            background-color: skyblue;

            /* 内边距 */
            /* padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
            padding-left: 50px; */

            /* 上右下左 */
            padding: 10px 20px 30px 40px;

            /* 三个值: 上右下, 没有左, 左边跟随右边的值 */
            /* padding: 10px 20px 30px; */

            /* 两个值： 上和右， 没有下，跟随上，没有左，根据右 */
            /* padding: 10px 20px; */

            /* 一个值: 上下左右都使用同一个值 */
            padding: 10px;
        }
    </style>
</head>
<body> 
    <div class="box">
        腾讯云副总裁、腾讯数据平台部总经理蒋杰表示：「腾讯致力于通过开源代码，与开发者共建开源生态、实现成果共享，已成为大数据领域开源最为全面的公司。在基金会的指导和开发者的共建下，Angel 完成了从单一的模型训练平台到全栈机器学习平台的技术跨越，这也与腾讯大数据批流融合、ABC 融合的未来发展方向紧密契合。毕业是 Angel 新的开始，未来我们将进一步开放 Angel 在图计算和联邦学习领域的核心能力。」
    </div>
</body>
</html>

补充

​ div设置宽度后,在div里的文字超过了div的宽度是会自动换行的

​ 但如果是一个字母超过了div宽度,这时浏览器认为这是一个单词,不会换行

解决方法:

  1. 加上空格,让浏览器认为多个字母
  2. css属性 word-break:break-all打断单词

6.4 外边距相关的CSS属性

margin-left：左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性

    <style>
        body {
            /* margin: 0; */
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #f00;

            display: inline-block;
        }

        /* 1.margin的上下  如果同时设置了两个值则会合并掉,并不会变成40px  */
        /* .box1 {
            margin-bottom: 20px;
        }

        .box2 {
            margin-top: 20px;
        } */

        /* 2.margin的左右 如果同时设置了两个值则会合并掉,并不会变成40px*/
        .box1 {
            margin-right: 20px;
        }

        .box2 {
            margin-left: 20px;
        }

        /* 3.margin的值 */
        .box {
            /* 四个值: 上右下左 */
            margin: 1 2 3 4;

            /* 三个值: 上右下(左跟右) */
            margin: 10px 20px 30px;

            /* 两个值: 上右(下跟上)(左跟右) */
            margin: 0 20px;

            /* 一个值: 上下左右统一 */
            margin: 10px;
        }

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

</body>
</html>

6.5 上下margin传递

只有上下margin才会传递

margin-top传递(常用)

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSXWsLeO-1583593504193)(day4.assets/image-20200306163100745.png)]

    这时我们给子元素设置margin-top,值会传递给父元素

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOq3pQBr-1583593504194)(day4.assets/image-20200306163207858.png)]

我们想要的效果并没有达到,这是因为传递给了父元素

margin-bottom传递(较少使用)

  • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VjVbutgD-1583593504195)(day4.assets/image-20200306163740165.png)]

这个情况会比较少遇见,除了要满足底部线重叠,还必须父元素的高度是auto。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFWqNkSw-1583593504197)(day4.assets/image-20200306164015964.png)]

如何防止出现传递问题？

  • 给父元素设置padding-top\padding-bottom

    • 这样就不满足重叠的条件了

  • 给父元素设置border

    • border会有1px的大小，就能不满足重叠条件

  • 触发BFC(结界): 设置overflow为auto/hidden

    • overflow有四个值,不设为visible即可
    • 剩下的三个属性都能触发结界,还不影响布局
    • 这个方法是最好的

建议

  • margin一般是用来设置兄弟元素之间的间距

  • padding一般是用来设置父子元素之间的间距

    • 如果不知道怎么解决结界问题的话
    • 可以直接设置padding即可

6.6 上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0I5Bbrwm-1583593504198)(day4.assets/image-20200306165405565.png)]

父子块级之间的折叠

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wIb8SuNX-1583593504199)(day4.assets/image-20200306165452804.png)]

水平方向上的margin（margin-left、margin-right）永远不会collapse**

折叠后最终值的计算规则

  • 两个值进行比较，取较大的值
  • 相同就取一个值

如何防止margin collapse(折叠)？

  • 只设置其中一个元素的margin

折叠带来的好处

块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的

  • 比如连续段落之间的margin，恰好需要这种折叠效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOz384JD-1583593504200)(day4.assets/image-20200306165633868.png)]

6.7 border的CSS属性

边框宽度

  • border-top-width、border-right-width、border-bottom-width、border-left-width

  • border-width是上面4个属性的简写属性

边框颜色

  • border-top-color、border-right-color、border-bottom-color、border-left-color

  • border-color是上面4个属性的简写属性

边框样式

  • border-top-style、border-right-style、border-bottom-style、border-left-style

  • border-style是上面4个属性的简写属性

border-style常见取值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JS5c9qUo-1583593504201)(day4.assets/image-20200306170823984.png)]

简写(常用):

/*		大小 样式  颜色 不区分顺序,最好还是按这个顺序来写*/
border:1px soild red;

边框相关的属性简写

border-top、border-right、border-bottom、border-left

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1UM2I1Dg-1583593504202)(day4.assets/image-20200306175219639.png)]

边框颜色、宽度、样式的编写顺序任意

border：统一设置4个方向的边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VOVB6KRV-1583593504203)(day4.assets/image-20200306175243356.png)]

6.8 边框的形状

边框的形状可能是

  • 矩形、梯形、三角形等形状

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWCUTWXE-1583593504205)(day4.assets/image-20200306175423547.png)]

形成三角形的条件是盒子的高宽为0,

边框妙用-实现三角形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1KNi19Q-1583593504206)(day4.assets/image-20200306175457612.png)]

transparent :设置为透明

transform:rotate(deg) 旋转多少度

6.9 行内非替换元素的注意点

以下属性对行内非替换元素不起作用

  • width、height、margin-top、margin-bottom
  • 行内非替换元素:span,strong…
  • 设置左右不会有问题,对上下边距会没有反应

以下属性对行内非替换元素的效果比较特殊

  • padding-top、padding-bottom、上下方向的border

  • 左右没问题

  • 设置padding上下会多出区域,但这个区域不占据空间

  • border上下也能生效,但是这个区域不占据空间

解决方法

设置父元素为inline-block

6.10 CSS属性- border-radius

圆角半径相关的属性有

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kgzr5x4v-1583593504207)(day4.assets/image-20200306192956354.png)]

  • 分为上左,上右,下左,下右

  • 一般只写一个值,也可以写两个值

  • 第1个值是水平半径

  • 第2个值是垂直半径（如果不设置，就跟随水平半径的值）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G36qjQaB-1583593504209)(day4.assets/image-20200306193104398.png)]

border-radius是一个缩写属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KAirdJRn-1583593504210)(day4.assets/image-20200306193247086.png)]

斜线/前面是水平半径，后面是垂直半径

4个值的顺序是top-left、top-right、bottom-right、bottom-left（顺时针方向）

  • 如果bottom-left没设置，就跟随top-right

  • 如果bottom-right没设置，就跟随top-left

  • 如果top-right没设置，就跟随top-left

border-radius大于或等于50%时，就会变成一个圆

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e870KCSz-1583593504211)(day4.assets/image-20200306193424553.png)]

写上宽度的一般px即可

还可以设置百分比(设置圆形时经常使用)

  • 参考的是本身border+padding+width的全部宽度

6.11 CSS属性 - outline

outline表示元素的外轮廓

  • 不占用空间

  • 默认显示在border的外面

outline相关属性有

  • outline-width

  • outline-style：取值跟border的样式一样，比如solid、dotted等

  • outline-color

  • outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似

   <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;

            /* border: 5px solid yellowgreen; */
            /*缩写属性 大小 样式  颜色*/
            outline: 5px solid yellowgreen;
        }

        span {
            background-color: orange;
        }
   </style>
</head>
<body>
    
    <div class="box"></div>
    <span>span元素</span><!--测试会不会占用空间用的-->
</body>
</html>

应用实例

  • 去除a元素、input元素的focus轮廓效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* CSS Reset */
        a, input, textarea {
            outline: none;
        }
    </style>
</head>
<body>
    <a href="#">百度一下</a>
    <input type="text">
</body>
</html>

可以使用outline查看页面元素的构成

使用border会导致布局乱掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GIg0EBx-1583593504212)(day4.assets/image-20200306194459818.png)]

6.12 CSS属性- box-shadow

box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用表示

  • 多个阴影之间用逗号,隔开，从前到后叠加

  • 的常见格式如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XRVR1avS-1583593504213)(day4.assets/image-20200306200711528.png)]

官方文档的使用教程解析

inset

  • 没加<>表示直接写上inset就行

?

  • 表示0个或多个

&&

  • 1.表示和,2.可以调换书写顺序

{2,4}

  • 表示写上2到4个值

?

  • 只能有一个color或者没有,直接写颜色即可

取值意思

第1个：水平方向的偏移，正数往右偏移

第2个：垂直方向的偏移，正数往下偏移

第3个：模糊半径（blur radius）

第4个：延伸距离(对四周进行一个延伸)

：阴影的颜色，如果没有设置，就跟随color属性的颜色

inset：外框阴影变成内框阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: #f00;
			/* 可以只写两个值 */
            box-shadow: orange -15px 5px 10px 5px inset;
        }
    </style>
</head>
<body>
    
    <div class="box"></div>

</body>
</html>

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-il0258Ma-1583593504214)(day4.assets/image-20200307154736272.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 200px;
            height: 300px;
            background-color: #fff;
            border: 1px solid orange;
            margin: 30px auto;

            /* 方法一: 可以设置多个值,当我们想左右两边都有阴影时*/
            /* box-shadow: -10px 10px 5px,
                        10px 10px 10px; */
            
            /* 方法二: rgba最后是设置透明度 */
            box-shadow: 0 10px 10px 10px rgba(0, 0, 0, .2);
        }
    </style>
</head>
<body>
    
    <div class="box"></div>

</body>
</html>

6.13 CSS属性 - text-shadow

text-shadow用法类似于box-shadow，用于给文字添加阴影效果

text-shadow同样适用于::first-line、::first-letter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            font-size: 25px;
            font-weight: 700;
			 /* text-shadow可以设置多个值,分行就行了 */
            text-shadow: 5px 5px 5px red,
                         -5px 5px 5px green;
        }

        p {
            width: 500px;
        }
		/* 伪元素选择器	第一行 */
        p::first-line {
            text-shadow: 2px 2px 2px orange;
        }
		/* 第一个字母 伪元素 */
        p::first-letter {
            font-size: 25px;
            text-shadow: 2px 2px 2px purple;
        }
    </style>
</head>
<body>
    
    <div class="box">你好啊, 李银河</div>

    <p>
        长期关注苹果公司动态的中国分析师郭明錤本月早些时候发布了一份报告，预测苹果将在2021年从高端手机型号中移除闪电接口。这将创造出一个无线版的苹果手机，郭明錤说这将有助于衍生出更昂贵的iPhone型号，提振苹果手机销量。

        郭明錤的预测是否为变成现实还不确定，苹果公司拒绝对此发表评论。但是，如果这一预测被证实，这可能是苹果将彻底消灭闪电接口充电器的一个迹象。
        
        苹果已经销售了适用于iPhone 8和后续版本手机的无线充电设备。但是目前还不清楚消费者是否真的需要一部没有任何接口、完全通过无线方式来连接或者充电的苹果手机。
    </p>

</body>
</html>

6.14 CSS属性 - box-sizing

box-sizing用来设置盒子模型中宽高的行为

  • content-box

    • padding、border都布置在width、height外边
    • 在给盒子设置宽高的时候,只是决定他内容盒子的大小
    • padding和border有值需要另外计算

  • border-box

    • padding、border都布置在width、height里边
    • 设置宽高时把padding和border的值都算在里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;

            padding-bottom: 20px;
            border-bottom: 20px solid purple;

            /* 盒子的的计算是内容盒子+padding+border box-sizing 有两个取值*/
            /* content-box: 含义是设置宽度和高度时只是指定内容的宽高,这时增加padding和border不计算在宽高中 这个是默认的 */
            /* border-box:  含义是设置宽度和高度时是内容+内边距+边框的宽度,这时设置padding和border,是从宽度和高度中减去,例如上面是200px,增加宽高后内容box变成了160px */
            /* 盒子的内减 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    
    <div class="box"></div>
    <span>span元素</span>

</body>
</html>
box-sizing: content-box;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Cu8Rwrb-1583593504215)(day4.assets/image-20200307160753764.png)]

box-sizing: border-box;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4lflTEEA-1583593504216)(day4.assets/image-20200307160818829.png)]

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qj9W9HKa-1583593504217)(day4.assets/image-20200307160841821.png)]

w3c规定的标准盒子模型就是content-box

ie8以下给盒子设置宽高是默认加上padding和border的,就是border-box

元素的水平居中显示-总结

在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）

行内级元素、inline-block元素

  • 水平居中：在父元素中设置text-align: center

块级元素

  • 水平居中：margin: 0 auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            height: 200px;
            background-color: #f00;

            width: 600px;

            /* 1.普通的文本 */
            /* text-align: center; */

            /* 2.行内元素 */
            /* text-align: center; */

            /* 3.图片: 行内替换元素 */
            /* text-align: center; */

            /* 4.inline-block的居中 */
            /* text-align: center; */
            text-align: center;
        }

        strong {
            background-color: purple;
        }

        .ib {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        .block {
            background-color: yellowgreen;
            width: 200px;
            height: 100px;

            /* margin: 0 auto; */
            margin-left: auto;
            margin-right: auto;
        }

        span {
            text-shadow: 5px 5px;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <!-- 1.普通文本 -->
        <!-- div元素 -->

        <!-- 2.行内元素 -->
        <!-- <strong>strong元素</strong> -->

        <!-- 3.图片: 行内替换元素 -->
        <!-- <img src="../img/test_01.webp" alt=""> -->

        <!-- 4.行内块级元素: inline-block -->
        <!-- <span class="ib"></span> -->

        <!-- 特殊: 5.块级元素 -->
        <div class="block">哈哈哈</div>
        <span>呵呵呵</span>
    </div>

</body>
</html>

总结:只有一种元素比较特殊,块级元素居中

  1. 如果块级元素没有设置宽高时,是占据一整行的,这时你让text-align虽然文字居中了,这样是没有意义的
  2. 块级元素设置宽高时,text-align只能让元素相对于自己的宽高居中
  3. 这时需要用到margin:0 auto.
  4. 总结:当需要让块级元素居中时都是用margin:0 auto,这个是写在自身css里的

margin 居中的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            height: auto;
            width: 500px;
            background-color: #f00;
        }

        .inner {
            width: 150px;
            height: 100px;
            background-color: #ff0;

            /* 可以实现: 水平方向的*/
            /*margin:0 auto是简写,拆分开来就是,*/
            margin-left: auto;
            margin-right: auto;

            /* 实现不了垂直居中: 垂直居中的条件必须是 父元素高度必须auto
            	必须使用绝对定位,计算公式高度一半-盒子一半
            */
            margin-top: auto;
            margin-bottom: auto;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="inner"></div>
    </div>

</body>
</html>

七. 背景设置

7.1 CSS属性- background-image

background-image用于设置元素的背景图片

  • 会盖在(不是覆盖)background-color的上面

如果设置了多张图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUnIlpCc-1583593504218)(day4.assets/image-20200307183745054.png)]

设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

  • 当图片发生错误的时候就会显示第二张

注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

7.2 CSS属性- background-repeat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fvceG28k-1583593504219)(day4.assets/image-20200307183949805.png)]

7.3 CSS属性 - background-size

background-size用于设置背景图片的大小

  • auto：以背景图本身大小显示

  • cover：缩放背景图，以完全覆盖铺满元素

  • contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比

  • ：百分比，相对于背景区（background positioning area）

  • length：具体的大小，比如100px

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YP0JsbDa-1583593504220)(day4.assets/image-20200307190455697.png)]

7.4 CSS属性 - background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Fi1i8gu-1583593504221)(day4.assets/image-20200307191707230.png)]

除了具体设置方向之外,水平方向还可以设值：left、center、right

垂直方向还可以设值：top、center、bottom

如果只设置了1个方向，另一个方向默认是center

  • 比如background-position: 80px; 等价于 background-position: 80px center;

7.5 CSS Sprite

什么是CSS Sprite

  • 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分

  • 有人翻译为：CSS雪碧、CSS精灵

使用CSS Sprite的好处

  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力

  • 减小图片总大小

  • 解决了图片命名的困扰，只需要针对一张集合的图片命名

Sprite图片制作（雪碧图、精灵图）

  • 方法1：Photoshop

  • 方法2：https://www.toptal.com/developers/css/sprite-generator

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sdk2vQq9-1583593504221)(day4.assets/image-20200307200611867.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        /* reset.css */
        p, ul, body, h5 {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        /* common.css */
        .wrap {
            width: 1000px;
            margin: 0 auto;
        }

        .nav {
            height: 30px;
            background-color: #333;
            color: #fff;
        }

        /* 具体的样式 */
        li, h5, p {
            display: inline-block;
            /* float: left; */
            vertical-align: middle;
        }

        .service ul li {
            margin-left: 12px;
            margin-right: 25px;
        }

        .service ul li p {
            height: 42px;
            line-height: 42px;

            font-size: 18px;
            color: #444;
            font-weight: 700;

            margin-left: 3px;
        }

        .service ul li h5 {
            width: 36px;
            height: 42px;
            text-indent: -999px;
            background-image: url("../img/jd_sprite_01.png");
        }

        .service ul li:nth-child(1) h5 {
            background-position: 0 -192px;
        }

        .service ul li .kuai {
            background-position: -41px -192px;
        }

        .service ul li .hao {
            background-position: -82px -192px;
        }

        .service ul li .sheng {
            background-position: -123px -192px;
        }

    </style>
</head>
<body>
    
    <!-- 1.测试 -->
    <div class="nav wrap">
        <div class="left">左边的内容</div>
        <div class="right">右边的内容</div>
    </div>
    <div class="header wrap">
        
    </div>
    <div class="footer wrap"></div>

    <!-- 2.多快好省 -->
    <div class="service wrap">
        <ul>
            <li>
                <!-- 写上h5标签,是为了seo优化-->
                <h5 class="duo">多</h5>
                <p>品类齐全，轻松购物</p>
            </li>
            <li>
                <h5 class="kuai">快</h5>
                <p>多仓直发，极速配送</p>
            </li>
            <li>
                <h5 class="hao">好</h5>
                <p>正品行货，精致服务</p>
            </li>
            <li>
                <h5 class="sheng">省</h5>
                <p>天天低价，畅选无忧</p>
            </li>
        </ul>
    </div>

</body>
</html>

练习2:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpN6S9pV-1583593504222)(day4.assets/image-20200307202932295.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dRG5JSCt-1583593504223)(day4.assets/image-20200307203452128.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 400px;
            /* 设置最小宽度,当屏幕缩小到小于1000px时自动跑出来滚动条 */
            min-width: 1000px;

            background-image: url("../img/mhxy.jpg");
            /* 背景图片定外:水平方向永远保持居中,垂直方向让图片上移81px */
            background-position: center -81px;
        }

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

</body>
</html>

7.6 CSS属性- background-attachment

background-attachment可以设置以下3个值

  • scroll：背景图片跟随元素一起滚动（默认值）

    • 这里的滚动指的是随着box的滚动(浏览器), 图片背景一起滚动

  • local：背景图片跟随元素以及元素内容一起滚动

    • 会随着box内容的滚动, 背景一起滚动

  • fixed：背景图片相对于浏览器窗口固定

    • 背景是固定的, 不会随着box的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            width: 200px;
            height: 500px;
            background-image: url("../img/juren_01.jpg");
            /* scroll: 随着box的滚动(浏览器), 背景一起滚动 */

            /* local:会随着box内容的滚动, 背景一起滚动 */
            /* background-attachment: local; */

            /* fixed: 背景是固定的, 不会随着box的滚动而滚动 */
            /* background-attachment: fixed; */
            overflow: auto;
        }
    </style>
</head>
<body>
    
    <div class="box">
        这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。

        不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
    </div>
    <p>
        这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。

        不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
    </p>
    <p>
        这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。

        不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
    </p>
    <p>
        这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。

        不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
    </p>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>

</body>
</html>

7.7 CSS属性- background

background是一系列背景相关属性的简写属性，常用格式是

  • image position/size repeat attachment color
    • background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
    • 其他属性也都可以省略，而且顺序任意

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KGAxngQH-1583593504224)(day4.assets/image-20200307204324240.png)]

 <style>
        .box {
            background-color: #fff;
            background-image: url();
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 0 0;
            background-attachment: fixed;

            /* background: ;
            font: font-size/line-height font-family; */

            /* background: red; */
            /* background: url("../img/juren_01.jpg"); */
            background: no-repeat red url("../img/juren_01.jpg");
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

7.8 background-image和img的选择

利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？

imgbackground-image
性质HTML元素CSS样式
图片是否占用空间√×
浏览器右键直接查看地址√×
支持CSS Sprite×√
更有可能被搜索引擎收录√（结合alt属性）×
加载顺序优先加载等加载完HTML元素后再加载

总结

  • img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片

  • background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

7.9 CSS属性- cursor

cursor可以设置鼠标指针（光标）在元素上面时的显示样式

cursor常见的设值有

  • auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式

  • default：由操作系统决定，一般就是一个小箭头

  • pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式

  • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式

  • none：没有任何指针显示在元素上面

八. 定外

九. 浮动

Mr_zx1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
尚硅谷前端HTML+CSS学习笔记
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。计算机由硬件和软件组成，硬件是看得见摸得着的物理...
js小知识点以及被划掉的样式原因
hey_uncle的博客
07-28 1668
/*var width = 45px,height = 45px;*/ var width = 45,height = 45; div.style.left = c * width + "px"; div.style.top = r * height;
CSS - media query样式不生效，被划掉
Moon Star
11-09 1498
问题： @media only screen and (max-width: 1200px) { .car-list { width: 300px; background-color: white; } } .car-list { width: 350px; height: calc(100vh - 80px); display: flex; flex-direction: column; background-color: #01183f; positi
1.6 盒模型和margin的bug
m0_65273419的博客
12-20 128
盒模型和margin的bug 一、盒模型 1、内容区（content）：由宽高形成的区域 2、内填充（padding） 3、边框（border）:边框也会使盒子变大 4、外边距（margin）: margin的值的设置和padding值一样 margin单方向 margin-方向（top/right/left/bottom）:数值px; 特点： 不会撑大盒子 margin可以设置负数 对内联元素上下不生效，左右生效 主要用来调整盒子和盒子之间的距离 margin:auto; auto:四周；只
CSS 被横线划掉的样式
热门推荐
qq_36935391的博客
11-29 1万+
text-decoration: line-through
div兄弟节点中后面div给margin-top会被上一个兄弟节点遮挡住的原因以及解决方案
qq_40128591的博客
04-18 2245
如图： 按照正常思路我们我们是想让兄弟节点二显示在兄弟节点一上面。但是现在我们看到的效果是我们的兄弟节点被兄弟节点一给盖住了。而且一般来说我们的后面节点z-index:;值都会比前面的高，但是却会造成这种效果。 造成原因：可能是你的节点一设置了position：relative;属性，但是你的第二个节点没有设置所以才会这样。 解决方法：给第二个也加一个position:relativ...
HTML+CSS 学习笔记.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
我的HTML+Css学习笔记
02-25
这份“我的HTML+Css学习笔记”无疑是对于初学者来说极好的资源，它涵盖了从基础到进阶的重要概念。 HTML是网页内容的结构语言，通过一系列标签来定义网页的各个部分，如`<head>`、`<body>`、`<h1>`至`<h6>`的标题、...
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
1.html+css学习笔记
05-20
html+css学习笔记
黑马html+css学习笔记.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
html + css 学习笔记整理.zip
最新发布
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html+css学习笔记.pdf
11-26
在HTML+CSS学习笔记中，我们重点讨论了以下几个CSS知识点： 1. **CSS选择符**： - **标签选择符**：通过HTML标签名如`<p>`，`<h1>`等来指定样式。 - **ID选择符**：使用`#`后跟唯一的ID名称，适用于页面中只出现...
html+css+js学习笔记.zip
01-01
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
CSS进阶（5）—— 深入理解margin
weixin_34132768的博客
06-14 183
盒尺寸中padding负责内边距，一般情况下（抛开上一章的诡异现象）不会给使用者带来太多的麻烦，因此作者称之为温和的padding，而margin则有些激进，虽说负责外边距，但有时候还能做一些"内边距"的事情（负边距），还自带了些特殊属性（如叠压），本文会通过实例深入探究margin负边距的使用以及叠压问题的产生和计算方式 1.margin负边距的正确打开方式 说到margin，通常我们...
JS和CSS常见错误
topuu的博客
05-25 582
CSS错误 1、css 用“//”注释不能用。例 //width=100px; 2、上一行发生错误，下一行css不能够被执行。
CSDN 转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传（已有图床）
yue152152的博客
10-04 1608
解决外链图片到CSDN无法正常显式的问题，可批量处理
CSDN 转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 问题解决
分享Android应用和系统开发、音视频编码、性能优化相关知识
03-23 2881
近期使用CSDN 的Markdown发现插入连接图片， 遇见提示"转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传"，现在提供解决方案如下 Markdown的最终都是转为html来显示，我们可以直接在其中插入html显示图片
笔记156111
08-08
笔记156111

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值