CSS学习笔记（不断更新）

时间：2022-09-10 10:00:00 1000w100rj电阻

PC端

选择器

标签选择器-toc" style="margin-left:80px;">标签选择器

类选择器

id选择器

通配符选择器

多类名

字体属性

字体：font-family

大小：font-size

粗细：font-weight

样式：font-style

复合属性：font

文本属性

颜色：color

水平对齐：text-align

装饰：text-decoration

首行缩进：text-indent

行高间距：line-height

引入方式

内部样式

行内样式

外部样式

emmet语法

生成标签

生成样式

复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

元素显示模式

块元素

行内元素

行内块元素

元素显示模式转换

单行文字垂直居中

背景

三大特性

层叠性

继承

优先级

盒子模型

边框border

内边距padding

外边距 margin

去掉li小圆点

圆角边框border-radius

盒子阴影box-shadow

文字阴影text-shadow

浮动 float

清除浮动 clear

样式结构书写顺序

导航链接书写

定位 position

定位模式

边偏移

元素显示与隐藏

精灵图

字体图标

三角形书写

界面模式

鼠标样式 cursor

input轮廓线 outline

textarea防止拖拽 resize

图片和文字对齐方式 vertical-align

解决图片底部空白缝隙

溢出文本显示省略号

单行文本溢出显示省略号

多行文本溢出显示省略号

布局技巧

解决盒子边框合并变粗

文字环绕图片

直角三角形

CSS初始化

HTML5新特性

结构标签

多媒体标签

input

CSS3新特性

伪元素清除浮动

CSS3盒子模型

css3其它特性

CSS3过渡

项目规划

模块化

SEO优化

项目注意

购物车泡泡数量需要右对齐定位

商品分类和下拉子分类不要拆开 dt dd

轮播图要放ul li里，因为滚动是ul

选项卡标题tab_list 内容tab_content

一行里每一列都有不同宽度的可以命名col_宽度

a标签包含有宽度的盒子，需要把a转为块级元素

引入的公用样式需要写在上面，页面引入的独有的样式写在下面

发现上面的盒子影响下面的盒子，可以为上面的盒子设置overflow：hidden

免费服务器http://free.3v.do

CSS3 2D转换

移动 transform

旋转 rotate

动画

CSS3 3D

3D转换

浏览器私有前缀

前缀

写法

移动端

视口

布局视口layout viewport

视觉视口visual viewport

理想视口ideal viewport

二倍图

物理像素和物理像素比

多倍图

背景缩放 background-size

移动端技术解决方案

css初始化 normalize.css

CSS3盒子模型 box-sizing

特殊样式

移动端布局

流式布局（百分比布局）

京东常用样式

二倍精灵图

DPG图片格式

webp图片格式

flex弹性布局

PC端

选择器

标签选择器

        p {
            color: red;
        }

        div {
            color: yellow;
        }

类选择器

        .red {
            background-color: red;
        }

id选择器

        #userId {
            color: red;
        }

通配符选择器

        * {
            color: red;
        }

多类名

细化相同配置，方便管理

    

    红色
    绿色
    黄色

字体属性

字体：font-family

一般给body标签使用，这样里面所有元素都能使用到
要使用常用的字体，保证任何用户都能正解显示
最好使用多个字体，保证兼容性，默认使用第一个字体，字体之间用逗号隔开
字体名字存在多个单词需要用引号

        body {
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
        }

大小：font-size

如果给body标签设置字体大小，里面除了标题标签以外都生效
标题标签需要另外设置
如果没设置字体大小会按照浏览器默认字体大小显示，谷歌默认16px

body {
    font-size: 16px;
}

粗细：font-weight

开发中提倡使用数字表示，400=normal，700=bold

        .bold {
            font-weight: 400;
        }

样式：font-style

项目中很少把文字变成斜体
可以把斜体em标签变成正常样式 normal

        em {
            font-style: normal;
        }

复合属性：font

必须严格按照格式顺序： font: font-style font-weight font-size/line-height font-family
可以部份省略，但是font-size font-family两属性必须保留

        body {
            font: italic 400 16px 'Microsoft Yahei'
            /* 可以省略样式和粗细    */
            font: 16px/24px 'Microsoft Yahei'
            /* 行高不写单位代表是当前文字大小的1.5倍 */
            font: 16px/1.5 'Microsoft Yahei'
        }

文本属性

颜色：color

开发中一般会用取色器得到想要的颜色

        p {
            color: #1696ec;
        }

水平对齐：text-align

盒子里面文字左中右水平对齐

        p {
            text-align: center;
        }

装饰：text-decoration

none默认没有线、underline下划线、overline上划线、line-throuh删除线
常用来把超链接标签的下划线去掉

        a {
            text-decoration: none;
        }

首行缩进：text-indent

缩进文字em单位
可以缩进像素px

        p {
            text-indent: 2em;
        }

行高行间距：line-height

行高=上间距+文字高度+下间距

        p {
            line-height: 26px;
        }

引入方式

内部样式

放在html内部，又称为嵌入式
适合做练习

行内样式

放在标签内部，多个样式要用分号隔开
只适合修改样式比较少的情况

虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。

外部样式

建css文件存放所有css代码，然后html引入
项目开发常用

emmet语法

生成标签

指定元素数量：div*3

指定包含结构：div>span

指定兄弟关系：div+p

指定类名：.nav

指定id名：#userId

指定标签加类名：p.nav

指定数量自增类名：.nav$*5

指定标签里的文件：div{文字}

$和*可以灵活运用

生成样式

支持缩写

w100 = width: 100px

h100 = height: 100px

ti2em = text-indent: 2em

复合选择器

后代选择器

里面所有符合的都选中
如果存在多组相同组合标签，应该在需要修改样式的那组标签添加类，然后用类名作为父层

      ul li {
        color: red;
      }

子选择器

在下一层查找

      div > a {
        color: red;
      }

并集选择器

用逗号分隔

      div,
      p,
      .nav ul li {
        color: red;
      }

伪类选择器

1.链接伪类选择器

为了确保生效，必须lvha的顺序配置
就算body设置了样式，a标签都要独设置样式才会生效

2.焦点伪类选择器

获得光标的元素

        input:focus {
          background-color: skyblue;
        }

元素显示模式

块元素

h1~h6，p，div，ul，ol，li

行内元素

不能设置宽高

a，strong，b，em，i，span，u

行内块元素

可以设置宽高

img，input，td

元素显示模式转换

转块元素

      a {
        display: block;
      }

转行内元素

      div {
        display: inline;
      }

转行内块元素

      span {
        display: inline-block;
      }

单行文字垂直居中

让行高等于盒子高

      div {
        height: 40px;
        line-height: 40px;
      }

背景

1.背景颜色 background-color

      a:hover {
        background-color: #ff6700;
      }

2.背景图片 background-image: url(路径)

图片压着背景颜色

      div {
        /* 默认平铺 */
        background-image: url();
        /* 不平铺 */
        background-repeat: no-repeat;
        /* x轴平铺 */
        background-repeat: repeat-x;
        /* y轴平铺 */
        background-repeat: repeat-y;
      }

3.背景图位置 background-position: center center;

后面的名词没有顺序要求，如果只写一个，第二个就默认居中

      div {
        background-color: skyblue;
        width: 200px;
        height: 200px;
        background-image: url(img/1.png);
        /* 不平铺 */
        background-repeat: no-repeat;
        background-position: center center;
      }

大图作为背景图设置

      body {
        background-image: url(img/bg.png);
        background-position: center top;
      }

精确单位 X坐标 Y坐标，如果只写一个，另外一个默认居中

      body {
        background-position: 20px 30px;
      }

混合单位 X坐 Y坐标

      body {
        background-position: center 20px;
      }

4.图像固定 background-attachment

默认scroll随着屏幕滚动而滚动
fixed屏幕滚动，但背景不动，可以制作视差滚动效果

      body {
        background-image: url(img/bg.png);
        background-position: center top;
        background-attachment: fixed;
      }

5.背景复合写法 background

开发中提倡使用
一般约定顺序为background: 背景颜色背景图片背景平铺背景图像滚动背景图片位置

      body {
        background: red url(image.jpg) no-repeat fixed top center;
      }

6.背景半透明 background: rgba(0,0,0,透明度)

透明度的0可以省掉 background: rgba(0, 0, 0, .3);
关于背景设置的都变成透明，但内容不受影响

      body {
        background: rgba(0, 0, 0, 0.3);
      }

三大特性

层叠性

就近形式
如果选择器相同，但属性没有冲突，不会覆盖
如果属性冲突会被覆盖

继承

父标签会被子标签继承某些样式

跟文字相关的样式会被继承，text-，font-，line- 开头的元素，以及color属性会被继承

优先级

选择器相同，执行层叠性
选择器不同，优先权重执行，要学会计算权重

无限， 0 ， 0 ， 0 ， 0 ， 0

!important > 行内样式 > ID选择器 > 类选择器,伪类选择器 > 元素选择器 > 继承/*

要记住继承过来的样式优先级最少

复合选择器会有权重叠加如：ul lu {}

为了避免权重问题，最好把父节点也选中 .nav .banner{}

盒子模型

边框 border

1.粗细 border-width

一般用px为单位

2.样式 border-style

实线边框 solid
虚线 dashed
点线 dotted

3.颜色 border-color

4.边框复合写法

border: 粗细模式颜色

      div {
         border: 1px solid red;
      }

5.拆分边框

border-top、border-bottom、border-left、border-right
下面的样式会把上面的样式覆盖掉，所以想把上边框变成蓝色要这样写，顺序不能乱

      div {
         border: 1px solid red;
         border-top: 1px solid blue;
      }

6.相邻边框合并 boder-collapse: collapse;

可以解决表格里单元格之间的边框变粗的问题

7.盒子的大小不包含边框

开发中可以把边框像素计算进去盒子的大小

可以采取盒子大小减去边框*2

内边距 padding

padding-left ， padding-right ，padding-top ，padding-bottom
复合写法 padding: 上右下左

如果只写1个：上下左右都是

如果只写2个：10px 20px 代表上下边距为10px 左右边距为20px

如果只写3个：10px 20px 30px 代表上10px 左右20px 下30px

      div {
        padding: 5px 10px 15px 20px;
      }

内边距大小会影响盒子的大小

可以采取盒子大小减去内边距大小*2

如果遇到每个盒子里面的文字数量不同，会出现文字之间的间距有大有小

为每个盒子设置一个左右内边距，盒子不设置大小，这样文字之间的间距就都一样了

不管伸缩盒还是浮动盒子，只要使用到padding，就必须使用

    box-sizing: border-box;

外边距 margin

控制盒子之间的距离 margin-left margin-right margin-top margin-bottom
复合写法 margin: 上右下左和padding完全一致
典型应用：中平居中

    /* 盒子设置宽度 左右外边距自动    */
    width: 400px;
    margin: 0 auto;

想要盒子里面的行内或者行内块元素居中，设置盒子样式居中

    text-align: center;

嵌套元素外边距会塌陷

子元素设置外边距会让父元素塌陷，解决方法有：

为了行内元素兼容性，尽量只设置左右内外边距，不要设置上下内外边距(不会生效)

但是转换为块级或者行内块元素就可以使上下边距生效

清除内外边距

    * {
        padding: 0;
        margin: 0;
    }

去掉li小圆点

    list-style: none

圆角边框 border-radius

        border-radius: 10px;

圆形

border-radius = 正文形盒子边长 / 2

或者 border-radius = 50%

复合写法：border-radius: 左上角右上角右下角左下角

跟padding一样

分开来写

border-top-left-radius ................border-bott-left-radius............

盒子阴影 box-shadow

box-shadow: X轴 Y轴虚实度大小颜色;

        box-shadow: 10px 10px 10px -2px rgba(0, 0, 0, 0.3);

文字阴影 text-shadow

跟上面一样

浮动 float

纵向用标准流横向用浮动
设置了浮动的盒子会脱标，原来的位置会被其它标准流的元素占有
都是一行显示，当浏览器太小一行不能显示全部的时候会自动第二行显示
具有行内块元素特性，可以设置宽高

清除浮动 clear

解决父元素不方便给高度，子元素设置浮动后，父元素高度会变成0

方法1.在最后一个浮动元素后加一个块级元素空标签，样式设置clear: both 无用标签太多

方法2.给浮动元素的父元素设置overflow: hidden 方便但是有溢出问题

方法3.使用伪元素相当于方法1，但没有无用标签

/* 给父元素加上clearfix */

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* 为了兼容IE6 7*/
    *zoom: 1;
}

方法4.双伪元素相当于前后加空标签

/* 给父元素加上clearfix */

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /* 为了兼容IE6 7*/
    *zoom: 1;
}

样式结构书写顺序

布局结构
盒子属性
内容属性
CSS3属性

导航链接书写

统一用li包含a标签的书写方式
如果不用li包含a标签会被搜索引擎判定为堆砌关键字，降权网站处理，被搜到的几率大大减少

定位 position

让盒子在某个盒子内移动位置或者固定到屏幕中一个位置，并且可以压住其它盒子
定位模式 + 边偏移

定位模式

静态定位：static(没用)
相对定位：relative

根据自己原来位置来移动，并且移动后会压着新位置上的盒子

原来位置仍然保留，其它盒子不会占有

使用场景：父元素使用，保留位置，不让其它盒子占有，稳定结构

绝对定位：absolute

情况1：如果没有父元素或者父元素没有定位属性，会以浏览器为准定位

情况2：如果父元素有除了静态定位以外的定位属性，会以最近的带有定位属性的父元素为准定位

原来的位置不会再保留，其它盒子会占有旧位置

使用场景：子元素使用，在父元素上面自由移动位置

固定定位：fixed

固定到浏览器可视窗口指定位置上，页面怎么滚动都会在窗口显示，并且压着其它盒子，不占有位置

永远靠着板心:

浏览器宽度的50%

margin-left:板心50%

粘性定位：sticky

可以设置盒子随着滚动条滚动而滚动，但是到了指定位置后让盒子固定在窗口显示

兼容性差，不支持IE

叠放次序：z-index

大的会把小的压住

只有定位属性才有的属性

水平居中

left:50%

margin-left: 负盒子的一半宽

垂直居中

top:50%

margin-top: 负盒子的一半高

行内和块级元素都可以加绝对定位属性

可以添加宽高

浮动不会压文字以及图片，但是绝对定位会压住

边偏移

top right bottom left

元素显示与隐藏

display属性

display: none; 隐藏对象，不再占有原来位置，用得最多

display: block; 转成块级元素或者显示元素

visibility属性

visibility: hidden 隐藏元素后会继续占有原来位置

visibility: visible 显示元素

overflow 溢出内容显示与隐藏

overflow: hidden 超出多部分内容不显示

overflow: scroll 永远出现滚动条

overflow: auto 如果有超出会出现滚动条，没有超出不会显示

注意

定位元素的父元素慎用overflow: hidden，因为它会把超出盒子的定位元素隐藏了。

精灵图

把所有小图片放到一张图片里，减少服务器响应图片请求的压力

用FW软件里的切片工具把需要的小图片框起来，得到大小设置盒子大小，X轴和Y轴设置背景，换成负值

background-position: -x轴 -y轴

background: url(路径) no repeat -x轴 -y轴

字体图标

显示的图标都是文本，好处是体积小放大不失真不会请求服务器，精灵图属于图片体积大
适合简单的小图标
不能替代精灵图，因为复杂的图片字体图标无法做到

三角形书写

盒子宽高设置0
line-height: 0 兼容性
font-size: 0 兼容性
border: 10px solid transparent 设置边框实线透明色
border-left-color: 颜色设置左边为底的三角形颜色

界面模式

鼠标样式 cursor

pointer 小手
move 移动
text 文本
not-allowed 禁止

input轮廓线 outline

outline: 0或者none 取消

textarea防止拖拽 resize

resize: none

书写时记得要一行写完textarea

图片和文字对齐方式 vertical-align

图片是行内块元素

middle 居中
行内块元素vertical-align + 文字更搭配

解决图片底部空白缝隙

因为图片默认和文本基线对齐，解决有以下两种方法：

vertical-align: middle/top/bottom 改变图片对齐方式
display: block 把图片转变成块级元素

溢出文本显示省略号

单行文本溢出显示省略号

多行文本溢出显示省略号

布局技巧

解决盒子边框合并变粗

先把所有盒子浮动，然后margin-left: -1px
如果没有定位情况下需要添加鼠标经过显示边框效果

        ul li:hover {
                /*把当前盒子变成定位，压住其它盒子并且保留位置*/
                position: relative;
                /*加边框颜色*/
                border: 1px solide color; 
        }

如果有定位情况下需要添加鼠标经过显示边框效果

        ul li:hover {
                /*提高层级*/
                z-index: 1;
                /*加边框颜色*/
                border: 1px solide color; 
        }

文字环绕图片

把图片设置为浮动

直角三角形

        width: 0;
        height: 0;
        border-color: transparent #fff #fff transparent;
        border-style: solid;
        border-width: 40px 20px 0 0;

CSS初始化

初始化所有元素，可以参考京东网站
为了兼容性中文字需要用unicode编码使用

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
legend,
button form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 清除列表样式 */

ol,
ul {
  list-style: none;
}

img {
  /* 取消图片底侧有空白缝隙的问题 （也可以display:block）*/
  vertical-align: middle;
}

button,
input {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手，并且去除轮廓线，设置文字颜色 */
  cursor: pointer;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 清除a的下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 项目的版心  */

.w {
  width: 1200px;
  margin: 0 auto;
}

/* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

HTML5新特性

为了让搜索引擎区分内容，请使用新特性标签

结构标签

aside侧边栏
article内容
section区域，相当于div

多媒体标签

audio音频使用MP3格式全兼容

autoplay="autoplay"自动播放

controls="controls"播放控件

loop="loop"循环播放

muted="muted"静音

video视频使用MP4视频格式全兼容

    /*一般这样写就可以了*/
     
    /*为了兼容火狐浏览器，这个了解就行*/

从上到下执行，能兼容就会运行

谷歌浏览器禁止了自动播放功能，但是使用muted静音可以解决

    /*autoplay自动播放  muted静音*/

controls="controls"显示播放器控件

loop="loop"循环播放

poster="图片路径" 加载视频前显示的图片

input

type

email url date time month week number tel search color

放在form标签里提交会自动验证
required placeholder autofocus autocomplete multiple

CSS3新特性

属性选择器

权重为10

input[属性名] 例如：选中带有value属性的输入框 input[value]

input[attr=属性值] 例如：input[type=text]

div[attr^=名字]以什么开头的元素都选中例如：div[attr^=nav]

div[attr$=名字]以什么结尾的元素都选中例如：div[attr$=nav]

div[attr*=名字]带有什么的元素都选中例如：div[attr*=nav]

结构伪类选择器

E:first-child第一个

E:last-child最后一个

E:nth-child(n)指定第几个

执行顺序section div:nth-child(1) 是先找到section里面的第1个，再看是不是div

隔行变色：n可以是even偶数，odd基数

如果写n：默认选中全部从0开始，每次加1

如果n写成公式：2n 即 0*2，1*2，2*2 ，...

5n : 5的倍数

n+5 ：从第5个开始

-n+5：前5个，包括第5个

E:first-of-type指定类型第一个

E:last-of-type指定类型最后一个

E:nth-of-type(n)指定类型第几个

执行顺序section div:nth-of-type(1) 先看section里的div，再看第1个

伪元素选择器频繁使用在元素内加效果

权重为2

content属性必须有

::before 在元素内部前面插入内容

::after 在元素内部后面插入内容

      div::before {
        content: "我";
        width: 100px;
        height: 100px;
        background-color: red;
      }
      div::after {
        content: "red";
        width: 100px;
        height: 100px;
        background-color: red;
      }
        /*鼠标经过nav显示*/
      .nav {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .nav::after {
        content: "133";
        display: none;
      }
      .nav:hover::after {
        display: block;
      }

伪元素清除浮动

      .clearfix::after {
        content: '';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
      }

完全闭合清除浮动

      .clearfix::after,
      .clearfix::before {
        content: "";
        display: table;
      }
      .clearfix::after {
        clear: both;
      }

CSS3盒子模型

box-sizing

默认box-sizing:content-box 跟以前一样盒子大小=width+边框+内边距

box-sizing:border-box 边框和内边距不会影响盒子大小

css3其它特性

filter: 函数(5px)

filter: blur(5px); 设置模糊

calc计算 +-*/

width:calc(100%-80px) 比父盒子少80像素

CSS3过渡

transition 动画效果

和hover搭配使用

transition: 属性时间运动曲线(可以省略，默认ease) 开始时间(可以省略，默认0s)

        /* 谁想有效果都给谁用 */        
        transition: width 0.2s ease 1s;

多属性都变化

        transition: width .3s, height .2s;
        /*所有属性都生效*/
        transition: all .2s;

项目规划

模块化

样式一样的放到一个公共样式common.css文件里，用到的地方引进

header footer都是相同的样式

SEO优化

为了搜索引擎更容易搜到我们的网站

title 网站标题

网站名-网站介绍 不超过30个汉字

description 说明

简要说明网站主要是做什么

keywords 关键字

6 - 8个关键词，用逗号隔开，越靠前权重越高

logo 标志

1.放一个h1标签

为了提权

2.放一个链接

首页链接

3.放一个网站名称文字，但不要显示出来

设置font-size:0

4.给链接一个title属性

鼠标在上面可以看到提示文字