CSS基本知识

菜鸟教程

CSS 指层叠样式表 (Cascading Style Sheets)

浏览器适配

CSS三大特性：叠层性（就近原则）、继承性（子标签继承父标签样式）、优先级（选择器相同，使用叠层性；选择器不同，根据选择器权重；若为继承的话，字标签继承父标签的选择器的权重为0）

 

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

 

 

 

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

#para1 { text-align:center; color:red; }

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

.center {text-align:center;}     <h1 class="center">标题居中</h1>

你也可以指定特定的HTML元素使用class。

p.center {text-align:center;}    <p class="center">这个段落居中对齐。</p> 

 

插入样式表的方法有三种:

• 外部样式表(External style sheet)
• 内部样式表(Internal style sheet)
• 内联样式(Inline style)

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

 !important 规则：

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.但是它改变了你样式表本来的级联规则，从而使其难以调试。慎用

若为继承的话，字标签继承父标签的选择器的权重为0

 

#father{
color: red;
font-weight: 700;
}
p{
color: pink;
}

<div id="father">
<p>继承权重为0</p>  //已知id选择器权重比标签选择器高但是因为为继承关系，继承来的权重为0，所谓p内文字为粉色，但是他依旧继承了父系的字体加粗
</div>

 

 

 

 

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em是一个相对单位，是当前元素一个文字的大小。比如首行缩进，当文字大小调整时，如果使用text-indent，单位设置为px则会导致不适配，若使用em单位，则会忽略大小调整问题，自动调整至一个em。

 

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

类似安卓的visibility = gone，visiable，invisiable

 

块级元素(block)特性：

• 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
• 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

• 和相邻的内联元素在同一行;
• 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

•  address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

• a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

• applet ,button ,del ,iframe , ins ,map ,object , script

 

position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。可作为标题栏

 

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

 

overflow 属性用于控制内容溢出元素框时显示的方式。

 

 

CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:

 

• 后代选择器(以空格     分隔)   div p  (div内的所有p)
• 子元素选择器(以大于 > 号分隔）div>p  (div下的直属p)
• 相邻兄弟选择器（以加号 + 分隔） div+p  (div之后的一个同根p)
• 普通兄弟选择器（以波浪号 ～ 分隔） div～p  (div之后的所有同根p)

 

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS伪类是用来添加一些选择器的特殊效果。伪类的名称不区分大小写。与 CSS 类配合使用：input:checked(对伪类checked进行css编辑样式)

 

 

CSS伪元素是用来添加一些选择器的特殊效果。内部元素进行css样式设置

 

left优先级高于right，不在乎选择器优先规则

 

鼠标移动到指定位置，如下拉按钮、提示文本时隐藏内容可见：首先display:none或者visibility:hidden；利用伪类hover，将display: block或者visibility:visiable

 

图像拼合就是单个图像的集合。后续操作总是在这张图片上进行，对图片的部分内容进行操作，比如对图片右半部分隐藏。加载一张图片，对服务器进行一次请求总比对服务器进行多次图片请求来得简单，避免延迟

 

@media规则，不同媒体展示不同css，如

@media screen

{p.test{font-family:verdana,sans-serif;font-size:14px;}}

@media print

{p.test{font-family:times,serif;font-size:10px;}}

/* 响应式布局 - 小于 600 px 大于300px时改为上下布局 */ （监听窗口大小改变）

@media screen and (max-width: 600px) and (min-width: 300px) 

{ .column { width: 100%; } }

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

根据内容，细分每一个行或列，针对不同设备进行跨列选择：

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>

 

属性选择器：具有特定属性的元素设计样式

[title](头名为title都执行) 

[title=runoob](头名为title，后接=只有runoob才执行) 

[title~=runoob](头名为title，后接=只要有独立单词runoob执行) 

[title*=runoob](头名为title，后接=只要拆分连接有runoob都执行) 

[title|=runoob](头名为title，后接=开头为runoob且唯一单词执行) 

[title^=runoob](头名为title，后接=前几个字母为runoob都执行) 

[title$=runoob](头名为title，后接=后几个字母为runoob都执行) 

{ color:blue; }

 

Transition过度属性主要是用来对某个CSS属性的变化过程进行控制（可用来做简单动画）

ease: 默认值（先快后慢）
linear: 匀速
ease-in: 先慢后快
ease-out: 先快后慢
ease-in-out: 先慢后快后慢

 

border-radius:50% 和 100% 效果相同。如果两个相邻角的半径之和超过了相应盒子边的长度，那么浏览器要重新计算，以保证两者不会重合。计算的规则就是同时缩放两个圆角的半径，直至两个相邻角的半径和为盒子的长度。

 

CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

 

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

 

@keyframes 规则是创建动画。用animation调用(动画名，时长，速度曲线，延时，重复 )，并绑定在选择器上

 

resize 属性溢出形式的设置：

1. 当 overflow: hidden; 时，内容会被修剪，并且其余内容是不可见的。

2. 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；

3. 当 overflow: auto; 时，仅尺寸小于内容显示时，才会出现滚动条，可以说，这是最美观的设置（<textarea> 也是自带此属性）；

 

面包屑导航

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。

3、提供返回各个层级的快速入口，方便用户操作。

1》2》3》4（当前位置）

 

css盒模型：

 

 

默认情况下，元素的宽度与高度计算方式如下：

 

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

 

height(高) + padding(内边距) + border(边框) = 元素实际高度

即width=content

 

 

运用box-sizing:border-box属性下，框模型的变化 

 

 

弹性盒子（flex box）= 弹性容器（flex container）+弹性子元素（flex item）

需要适应不同屏幕大小的时候确保元素有恰当的行为的布局方式。

 

css属性缩写大部分情况下不用按顺序, 部分特殊需要按照顺序，border的顺序可以乱，但是font的就不能乱

Margin 对于多个值有以下的简写规则：

• 当只有一个值声明时，该值会用于所有四个值。
• 当只有两个值声明时，第一个值用于上边距和下边距，第二个值用于左边距和右边距。
• 当有三个值声明时，第一个值用于上边距，第二个值用于左边距和右边距，第三个值用于下边距。
• 当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针）。

对块级元素进行水平居中，使用margin：auto；即可（左右居中  margin：0 auto；）

若要对行内元素或者行内块元素进行水平居中，则在父级元素上添加text-align：center即可

 

margin会对嵌套关系元素块造成元素塌陷：父子元素都有上margin，父元素会跟随子元素塌陷。

1、为父元素定义上边框；

2、为父元素定义上内边距；

3、为父元素添加overflow：hidden

 

flex 属性用于指定弹性子元素如何分配空间。（类似安卓xml的weight）

 

B站pink：

web响应式设计（viewport）

1. 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 响应式网格布局

3. CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

4. 结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。 

orientation：portrait | landscape

 

web响应式框架（bootstrap）

 

首先，使用css清除网页内外边距再开始布局

*{
padding: 0;
margin: 0;
}

 

 

网页布局：

 传统网页布局：标准流、浮动流、定位流三类组合而成

 

设计第一准则：多个块级纵向排列用标准流，横向排布用浮动

浮动特性：

1、脱离标准流控制（浮）移动到指定位置（动）；

2、浮动的盒子不再保留原先的位置。

3、浮动只会压住标准流的盒子，不会压住里面的图片和文字（浮动，类似word内图片浮动，本身的目的是为了文字环绕。若使用定位则会压住）

 

 清除浮动：

对父元素设置，自动检测子元素高度调节其自身高度。策略：闭合浮动

1、额外标签法，最后一个浮动元素后添加块级新盒子设置clear；

.clear{
            clear: both;
        }

2、父元素添加overflow；当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；

3、父元素添加after伪元素；after添加一个额外标签法的clear盒子

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

4、父元素添加双伪元素

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

.clearfix{
           *zoom:1
}

 

 

开发中一般把多个a用li包含起来

1、逻辑更清晰；

2、如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

要对li敏感，li不单只是纵向的，还可以是横向的

 

定位 = 定位模式 + 边偏移（子绝父相）

相对定位：以自己原位置为基准，常用在动态展示时使用。

绝对定位：如果无父系，或父系无定位则以浏览器为定位元素；主要用于将控件约束于最近一级（父、爷）有约束元素（盒子）内；脱标，不占父系位置

固定定位：以浏览器可视窗口为参照点

粘性定位：占有原来的位置（原先设置margin），添加上下左右任意值，固定在相对可视窗口位置（相对+固定），不过兼容性不好，一般用JS做

做了定位的盒子可通过z-index赋值添加权重对盒子进行叠层显示设置。

 

定位盒子居中显示：

1、先用left走父盒子的一半50%；

2、再用margin-left走子盒子的一半像素（不可用margin-right，不起作用）；

3、同理，上下用top和margin-top

 

 元素隐藏：

1、display:none（隐藏且不占有位置）显示：display: block

2、visibility: visible/hidden（隐藏但占有位置）;

3、overflow: auto（对滚动条进行控制）；hidden（对超出内容进行隐藏）

 

CSS精灵图：把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。（切图，background-position）

iconfont对应精灵图，能改颜色，且不失真（小图标）unicon。

对图标的增删可修改.json文件：网站导入

 

 CSS小三角：可以定义无大小的盒子，然后设置边框border-top/left：10px solid black等。然后使用相对定位绝对定位来和父系盒子拟合边距

.div {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 50px solid transparent;
            border-left-color: pink;
        }

 

 图片和文字垂直对齐：vertical-align：middle。

 

溢出文字省略号：

单行：1、强制一行显示文本（white-space: nowrap）；2、超出部分隐藏（overflow: hidden）；3、省略号代替（text-overflow: ellipsis）

多行（考虑兼容性）。

 

布局技巧：

1、边框：使用flow：left边框重叠，可用margin-left：-1px（边框宽度）使得边框重叠（这里要理解一个概念，两个边框合并颜色变深是因为并行1+1=2px导致颜色变深，而不是重叠在一起变深）

2、接上，原理为后一个左侧边框压住前一个右侧边框。若需要hover边框点亮，除了最后一个边框可完整，其他都将缺失右边框。此时可使用定位提高优先级position：relative；若已有定位，可使用z-index提高优先级

 3、利用浮动不会压住文字的特性，制作大盒子并加入文字，再将图片设置浮动即可实现效果，无需设置左右盒子

 

 4、行内块元素自带间隔，再利用text-align: center居中可制作换页导航

 

5、三角变形

利用制作三角形的模式，将border-buttom去除，再改变高度。标签<i></i>来制作

此处在设置边框和背景颜色时要注意，因为win10的缩放问题，在笔记本默认缩放125%的情况下可能会造成背景和边框存在空隙，切换100%空隙消失。

 

CSS3新特性：

1、选择器

• 属性选择器

 

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text]
 /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon]

• 结构伪类选择器

 

nth-child()先看括号内n对所有排序，再看前面盒子，所以会把所有盒子排列序号，如果序号和盒子类型匹配不上，则失效；而nth-of-type()先看盒子再看括号排序，会对指定元素排序

 /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }

 /* 4. 选择ul里面的第2个孩子 小li */
         ul li:nth-of-type(2) {
            background-color: skyblue;
        }

      <ul>

        <div>不排序</div>

        <li>我是第1个孩子</li>

        <li>我是第2个孩子</li>

      </ul>

• 伪元素选择器（CSS创建标签）

 

.tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }

 

2、盒模型

box-sizing：content-box 盒子宽度width+padding+margin

box-sizing：border-box  盒子宽度width

 

3、响应式布局：计算宽度

width: calc(100%-80px)

 

4、过渡

transition: 属性（all为所有属性） 时间 速度曲线 延时

 

5、2D转换 transform (translate rotate scale)：

2D转换的优势：不会影响到其他元素的位置，可以配合动画使用。

transform-origin 转换中心点选择。若要综合写，如位移和旋转一起，则把位移写在前（只要有位移），先旋转会改变坐标

 

6、动画（过渡无法自动播放）

更多变化，更多控制，连续自动播放

@keyframes 关键帧，和unity动画，pe等类似

 

 

 animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始/结束状态

 逗号分割多个动画

 

7、3D转换：

3D移动：translate-z写在被观察元素上

3D旋转：rotate3d（0，0，0，45deg）使用矢量3D旋转，前三为所绕的轴，可设为不同大小对应向量的大小

透视：透视写在被观察元素的父系上

3D呈现：transform-style: preserve-3d控制子元素是否开启三维立体环境，此代码写给父级，子元素生效

 

8、浏览器兼容：

-moz-∶代表firefox浏览器私有属性

-ms-∶代表ie浏览器私有属性

-webkit-:代表safari、chrome私有属性

-o-:代表Opera私有属性

 

 

 

CSS3主要新增：

1、CSS3新增加的属性、结构伪类、伪元素选择器

2、CSS3 2D移动、旋转和缩放属性

3、CSS3动画设置方法

4、CSS3 3D移动、旋转和缩放属性

5、浏览器私有前缀