7.31早 css学习笔记

最新推荐文章于 2022-01-27 18:31:25 发布

qq_36992097

最新推荐文章于 2022-01-27 18:31:25 发布

阅读量152

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36992097/article/details/81295030

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

加快速度，速学备考，沉淀！
每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

简述一下src与href的区别。

href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。

src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

主流的用于网页的图像格式有JPG,PNG,GIF等
JPG：压缩率高，文件小，最常用。
PNG：支持无损压缩，色彩损失小，保真度高，文件稍大。
GIF：支持动画显示，但只支持256色显示，目前已经被FLASH大量取代。

声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型，规范来解析这个文档。
水平精灵图：bg:url(图片路径) no-repeat

固定定位fixed 参考位置永远是窗口固定在窗口不动
z-index 权值高能覆盖别人同权值者后来居上

块级元素：div ph1 h2 h3 h4 form ul

行内元素也叫内联元素或者内嵌元素 :a b br i span input select

css引入方式：

　　1.内联样式（行内样式/行间样式）：直接写在HTML标签里

　　　　例如：

　　2.内部样式：写在head与head之间

　　　　例如：

　　　　　　　　css样式

　　3.外部样式：需要引用才能生效

　　　　例如：

　　　　　　1>.

　　　　　　2>.@import url(../css/123.css)

link 和 @import 的区别：

　　　　　　区别1：

　　　　　　　　　　link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；@import属于css范畴，只能加载css。

　　　　　　区别2：

　　　　　　　　　　link引入css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　　　　　区别3：

　　　　　　　　　　link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　　　　　区别4：

　　　　　　　　　　link支持使用JavaScript控件DOM去改变样式；而@import不支持。

清除浮动：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    .demo1{
/*      height: 300px;*/
        border: 1px solid blue;
        background: red;


    }
        .demo2{
/*          height: 300px;*/
        border: 1px solid green;
        background: pink;
            clear: both;
    }
    li{
        float: left;
        width: 100px;
/*      height: 100px;*/
        background: black;
    }

</style>
<body>
<ul class="demo1">
    <li></li>
        <li></li>
            <li></li>
                <li></li>
</ul>
<ul class="demo2">
    <li></li>
        <li></li>
            <li></li>
                <li></li>
</ul>


</body>
</html>

这里写图片描述

transform:scale()怎么让Chrome支持小于12px 的文字（text-size-adjust:none最新chrome不支持）

box-ordinal-group:序号顺序按序号显示
box-orient:vertical 定义列显示方向

png，jpg，gif这些图片格式解释一下，分别什么时候用，webp呢
gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+

resize: none|both|horizontal|vertical;
值描述
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

overflow:
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

@font-face自定义字体类型
font-family name 必需的。定义字体的名称。
src URL 必需的。定义该字体下载的网址（S）

容超过长度后以省略号显示
{
width: 160px;
overflow: hidden;
text-overflow:ellipsis; ɪˈlɪpsɪs
white-space: nowrap;
}

white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

强制不换行：div{ white-space:nowrap; }

自动换行： div{ word-wrap:break-word; word-break:normal; }

强制英文单词断行 : div{ word-break:break-all; }

　 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
　对BFC规范(块级格式化上下文：block formatting context)的理解？

CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

上文提到的一条规则：与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。——–双飞翼布局