CSS知识

最新推荐文章于 2023-12-16 06:30:00 发布

kookoo_babe

最新推荐文章于 2023-12-16 06:30:00 发布

阅读量662

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43751465/article/details/106837533

版权

一、熟悉HTML知识

HTML常用元素

head 部分

在这里插入图片描述

body部分

在这里插入图片描述

HTML重要属性

在这里插入图片描述

在这里插入图片描述

检查标记(HTML、XHTML、…)Web文档规范：https://validator.w3.org/

特殊：a>div（HTML5，a是transparent

修改默认样式：
* css reset https://meyerweb.com/eric/tools/css/reset/
* {margin：0； padding：0}
* normalize.css http://necolas.github.io/normalize.css/

二、CSS精华（Cascading Style Sheet）层叠样式表

选择器

用于适配HTML元素
分类和权重
解析方式和性能
值得关注的选择器

选择器分类

元素选择器 a{}
伪元素选择器 ::before{}
类元素选择器 .link{}
属性选择器 [type=radio]{}
伪类选择器 :hover{}
ID选择器 #id{}
组合选择器 [type=checkbox] + label{}
否定选择器 :not(.link){}
通用选择器 *{}

选择器权重

ID选择器 #id{}+100
类属性伪类 +10
元素伪元素 +1
其它选择器 +0

tip：不进位（eg：#id{}==100>11个.link{}==0 11 0, 尽管我们类选择器有11个，加起来有110，但是依旧没有 id 选择器优先级高）

!important 优先级最高
元素属性优先级高
相同权重后写的生效

非布局样式

字体

字体族例如: serif、monospace（不能添加引号）衬线字体
多字体fallback 例如： “monaco”、“Microsoft Yahei”、“PingFang SC”
网络字体、自定义字体
iconfont

行高（经典问题）

行高的构成（由line-box组成，line-box由inline-box组成）
行高相关的现象和方案（可以通过设置 line-height来实现垂直居中效果）
行高的调整

经典问题：图片下面有空隙，原理是什么？怎样去除？
原理是因为图片按照 inline 进行排版，排版的时候会涉及到字体对齐，默认按照 baseline 对齐，baseline和底线之间是有偏差的，偏差大小是根据字体大小而定，如果是12px字体大小，则图片空隙就是3px左右。这就是经典图片3px空隙问题。
解决方式：
* 由于默认按照baseline对齐，不妨将 vertical-align 设为 bottom，按照底线对齐。
* 设置 display:block 可以解决该问题，但是会独占一行

背景

背景颜色

 background:hsl（色相，饱和度%，亮度%）
 background:hsla（色相，饱和度%，亮度%，透明度(.2)）

渐变色背景
多背景叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变色背景（线性梯度）</title>
    <style>
        .div1{
   
            height: 90px;
        }
        .div2{
   
            height: 90px;
            /*渐变色背景*/
            /* background: -webkit-linear-gradient(left, red,green)（老）*/
            /*background: linear-gradient(to right,red,green);*/
            /*background: linear-gradient(180deg,red,green);*/
            /*background: linear-gradient(135deg,red 0,green 15%,yellow 50%,blue 90%);*/
            
            /*网格线*/
            background: linear-gradient(135deg,transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(45deg,transparent 0,transparent 49.5%,red 49.5%,red 50.5%,transparent 50.5%,transparent 100%);
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

效果：
在这里插入图片描述

背景图片和属性（雪碧图）

background:url(./a.jpg)
background-repeat: no-repeat; 
background-size: 30px 30px; //相对于容器偏移 
background-position: 30px 30px（center，top）； //属性设置背景图像的起始位置

雪碧图 就是将很多个图片进行拼接成一个图片，然后通过 background-position，background-size等属性进行偏移，在网页中得到对应图片，来达到减少http请求。

base64和性能优化

我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的，使用 base64 传输图片文件可以减少 http 请求。

将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 1/3 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新的小图标icon，例如loading文件等。最后，在开发环境一般不采用直接将图片进行 base64 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。

一般情况下，开发环境写图片地址，在生产环境下，通过打包的方式，将小图片进行 base64编码。

边框（经典问题）

边框的属性：线型大小颜色

经典问题：九宫格问题，例如下面图片，我们如果想要实现9个不同形式，然后中间放内容，如果用原本9个div方法，那么会非常麻烦，而css3提供了 border方式可以解决上述问题。
在这里插入图片描述

在没有在 border-image处设置 round之前，是如上效果，后面 30 是用来切出四个角，是border-image-slice（图片边框向内偏移）这个属性的参数，利用这个属性的图片你应该注意一下图片的样式。必须是

这种样子的，不能是普通的图片，这个就是图片向内的偏移量，这个偏移量的最正常的值就是每个小块的宽度，当然也可以不用这样，但是也需要找个合适的值，这个合适的值根据不同的背景图是不一样的，这个需要自己多做几个图片，改成不同的值试一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c1{
   
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

在 border-image处设置 round之后，是如下效果，基本达到我们想要的效果。【平铺(repeated)、铺满(rounded)、拉伸(stretched)】
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c2{
   
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        }
    </style>
</head>
<body>
    <div class="c2"></div>
</body>
</html>

边框衔接（三角形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c3{
   
            width: 0px;
            height: 200px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>

效果：
在这里插入图片描述

滚动

产生滚动的原因：当内容比容器多的时候，即容器装不下内容的时候，就需要滚动。滚动主要包括如下几个方面：

滚动行为和滚动条

overflow 设置auto 和 scroll 区别，auto 是内容多于容器时显示滚动条，反之，不显示。而 scroll 是一直显示滚动条

文字折行（经典问题）

overflow-wrap（word-wrap）： normal、 break-word 通用换行控制（是否保留单词）

word-break ： normal、 break-all、 keep-all 针对多字节文字（中文句字也是单词）
white-space 空白处是否断行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字折行</title>
    <style>
        .div1{
   
            border: 1px solid;
            width: 8em;
            overflow-wrap: normal;
            word-break: normal;
            white-space: normal;
        }
    </style>
</head>
<body>
    <div class="div1">
        学如逆水行舟，不进则退！Learning is like sailing against the current, retreating if not advancing
    </div>
</body>
</html>

效果：

在这里插入图片描述
经典问题：怎么让一个很长的文本不换行？
将上述属性设置为 white-space：nowrap即可

装饰性属性

字重（粗体）font-weight
斜体 font-style:itatic
下划线 text-decoration
指针 cursor

CSS Hack（了解）

在这里插入图片描述
用来处理浏览器兼容性做法，好处就是简单粗暴。

Hack即不合法但生效的写法
主要用于区分不同浏览器
缺点：难理解难维护难失效
替代方案：特性检测（检测浏览器是否有相关特性，没有的话就针对性处理）
替代方案：针对性加class（例如检测到 IE6，那么就加IE6的class）

CSS 布局

CSS体系知识的重中之重

早期以 table 为主（简单）
后来以技巧性布局为主（难）
现在有 flexbox / grid（偏简单）

常用布局方式

1、table表格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table布局</title>
    <style>
        .table{
   
            margin-top: 20px;
            width: 500px;
            height: 100px;
            display: table;
        }
        .table-row{
   
            display: table-row;
        }
        .table-cell{
   
            vertical-align: center;
            display: table-cell;
        }
        .left{
   
            background: red;
            vertical-align: middle;
        }
        .right{
   
            background: blue;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">left</div>
            <div class="right table-cell">right</div>
        </div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
display / position（经典问题）

display 常用属性值：
block（块级） / inline（内联）( 不能设置宽高） / inline-block（对内表现为block，可以有宽高，对外表现为inline，可以与其它元素排在同一行）

position 常用属性值：
static（静态） / relative（相对）（相对于自身）（占的空间仍然按照原来的位置布局，不会因为偏移而改变） / absolute（绝对）（相对于最近的父级relative/absolute定位）（脱离文档流） / fixed（固定）（脱离文档流）（相对于屏幕/可视区域）

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        .block{
   
            height: 200px;
            background: red;
        }
        .inline{
   <

最低0.47元/天解锁文章

kookoo_babe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS知识

一、熟悉HTML知识HTML常用元素head 部分body部分HTML重要属性检查标记(HTML、XHTML、…)Web文档规范：https://validator.w3.org/特殊：a>div（HTML5，a是transparent修改默认样式：* css reset https://meyerweb.com/eric/tools/css/reset/* {margin：0； padding：0}* normalize.css http://necol
复制链接

扫一扫