CSS02

本文详细介绍了CSS中的样式继承机制,哪些样式可以被继承,哪些不可以。同时讨论了样式冲突时的选择器权重计算规则,包括内联样式、ID选择器、类选择器、元素选择器等的权重。此外,还涵盖了盒模型的概念,包括内容区、内边距、边框和外边距,以及它们如何影响元素的布局和大小。最后,文章讲解了元素的水平和垂直布局原理,以及如何通过display属性改变元素的显示类型。
摘要由CSDN通过智能技术生成

继承

定义

  • 样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上

  • 继承是发生在祖先后后代之间的

  • 继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次即可让所有的元素都具有该样式

注意

  • 并不是所有的样式都会被继承

  • 比如

    • 背景相关的,布局相关等的这些样式都不会被继承

举例

  • <body>
        <p>
            我是一个p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是p元素外的span</span>
        <div>
            我是div
            <span>
                我是div中的span
                <em>我是span中的em</em>
            </span>
        </div>
    </body>
    ​
    ​
    <style>
        p{
            color:red;
        }
        div{
            background-color:orange;
        }
    </style>

选择器的权重

样式的冲突

  • 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突

  • 发生冲突时,应用哪个样式由选择器的权重(优先级)决定

  • 选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器

选择器的权重

  • 比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示

  • 分组选择器每一个单独计算 div,p,span,{}

  • 选择器的累加不会超过其最大的数量级,类选择器再高也不好超过id选择器

  • 如果优先级计算后相同,此时则优先使用靠下的样式

  • 可以控制的越多,权重越低

  • 可以在某一个样式的后边添加 !important,则此时该样式会获取到最高的优先级,甚至超过内联样式,注意在开发中这个玩意要慎用

    • .red{ color:red; !important}

选择器权重
内联样式1000
id选择器0100
类和伪类选择器0010
元素选择器0001
通配选择器0000
继承的样式没有优先级

单位

长度单位

像素

  • 屏幕(显示器)实际上是由一个一个的小点点构成的

  • 不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰

  • 所以同样的200px在不同的设备下显示效果不一样

百分比

  • 百分比可以将属性值设置为相对于其父元素属性的百分比

  • 设置百分比可以使子元素跟随父元素的改变而改变

    • width

    • height

em

  • em是相对于元素的字体大小来计算的

  • 1em=1 font-size

  • em会根据字体大小的改变而改变

rem

  • 是相对于根元素的字体大小来计算

颜色单位

  • 在CSS中可以直接使用颜色名来设置各种颜色:

    • 比如red ,yellow,blue……

    • 但是再CSS中直接使用颜色名是非常不方便

RGB值

定义

  • RGB通过三种颜色的不同浓度来调配出不同的颜色

  • R red G green B blue

  • 每一种颜色的范围在0~255(0%~100~)之间

语法

  • 语法:RGB(红色,绿色,蓝色 )

十六进制的RGB值

语法

  • #红色绿色蓝色

  • 颜色浓度通过00~ff

    • 0表示无

    • ff表示最大

    • 如果颜色两位两位重复可以进行简写

      • #aabbcc---->#abc

RGBA值

  • 在RGB基础上增加A 透明度

  • A的范围0~1

    • 1表示完全不透明

    • 0表示完全透明

语法

  • 语法:RGB(红色,绿色,蓝色 ,不透明度)

HSL值

定义

  • H 色相(0~360)取色环

  • S 饱和度,颜色的浓度(0%~100%)

  • L 亮度,颜色的亮度(0%~100%)

语法

  • HSL(色相,饱和度,亮度)

HSLA值

定义

  • A 不透明度

语法

  • HSLA(色相,饱和度,亮度,不透明度)

布局

文档流(normal flow)

定义

  • 网页是一个多层的结构,一层摞着一层

  • 通过CSS可以分别为每一层来设置样式

  • 作为用户来讲只能看到最顶上一层

  • 这些层中,最底下的一层称为文档流,文档流是网页的基础

    • 我们所创建的元素默认都是在文档流中进行排序

  • 对于我们来说元素主要有两个状态

    • 在文档流中

    • 不在文档流中(脱离文档流)

  • 元素在文档流中有什么特点

    • 块元素

      • 块元素会在页面中独占一行

      • 默认宽度是父元素的全部(会把父元素撑满)

      • 默认高度是被内容撑开(子元素)

    • 行内元素

      • 行内元素不会独占页面的一行,只占自身的大小

      • 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素,则元素会换到第二行继续自左向右排列(书写习惯一致)

      • 行内元素的默认宽度和高度都是被内容撑开

盒子模型(box model)

定义

  • 又叫做盒模型、盒子模型、框模型

  • CSS将页面中的所有元素都设置为了一个矩形的盒子

  • 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置

  • 每一个盒子都由以下几个部分组成

    • 内容区

    • 内边距

    • 外框

    • 外边距

内容区content

定义

  • 内容区(content),元素中的所有的子元素和文本内容都在内容区中排列

  • 内容区的大小由width和height两个属性来设置

    • 只设置内容区的大小

    • width 设置内容区的宽度

    • height 设置内容区的高度

举例

  • <div class="box1"}></div>
    ​
      <style>
            .box1{
                width: 400px; //宽
                background: blue; //背景色
                height: 350px; //高
            }
        </style>
    

边框(border)

定义

  • 边框(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部

  • 要设置边框,需要至少设置三个样式

    • 边框的宽度 border-width

    • 边框的颜色 border-color

    • 边框的样式 border-style

  • 边框的大小会影响到整个盒子的大小(盒子=内容区大小+边框大小

边框的宽度 border-width

  • 默认值,一般都是三个像素

  • border-width 可以用来指定四个方向的边框的宽度

    • 值的情况

    • 四个值:上 右 下 左

      • border-width:10px 20px 30px 40px

    • 三个值:上 左右 下

    • 两个值:上下 左右

    • 一个值:上下左右

  • 除了border-width还有一组

  • border-***-width * * *可以是

    • top

      • border-top-width: 20px;

    • right

      • border-right-width: 40px;

    • bottom

      • border-bottom-width: 50px;

    • left

      • border-left-width: 30px;

边框的颜色 border-color

  • border-color用来指定边框的颜色,同样可以分别指定四个边的边框

  • 规则和border-width一样

    • 值的情况

    • 四个值:上 右 下 左

      • border-color:red yellow organge green

    • 三个值:上 左右 下

    • 两个值:上下 左右

    • 一个值:上下左右

  • border-color也可以省略不写,如果省略了则自动使用color的颜色值

边框的样式 border-style

  • border-style用来指定边框的样式,同样可以分别指定四个边的边框

  • 规则和border-width一样

    • 值的情况

    • 四个值:上 右 下 左

      • border-style:solid dotted dashed double

    • 三个值:上 左右 下

    • 两个值:上下 左右

    • 一个值:上下左右

  • solid 表示实线

  • dotted 点状虚线

  • dashed 虚线

  • double 双线

border简写属性

  • none无属性

  • border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求

  • border:10px orange solid;

  • 除了border以外还有四个 border-***

  • border-top

    • border-top:10px orange solid;

  • border-right

    • border-right:10px orange solid;

  • border-bottom

    • border-bottom:10px orange solid;

  • border-left

    • border-left:none;

举例

  • <div class="box1"}></div>   
    <style>
            .box1{
                width: 400px;
                background: blue;
                height: 350px;
                border-color: red;
                border-style: solid;
                border-width: 20px;
                
                border-top-width: 20px;
                border-right-width: 40px;
                border-bottom-width: 50px;
                border-left-width: 30px;
            }
        </style>

内边距(padding)

定义

  • 内容区和边框之间的距离是内边距

  • 一共有四个方向的内边距

    • padding-top

    • padding-right

    • padding-bottom

    • padding-left

  • 内边距的设置会影响到盒子的大小

  • 背景颜色会延伸到内边距上

  • 一共盒子的可见框的大小,由内容区 内边距 和边框共同决定,所以在计算盒子大小时,需要将这三个区域加到一起计算

  • padding内边距的简写属性,可以同时指定四个方向的内边距,规则和border-width一样

    • 值的情况

    • 四个值:上 右 下 左

      • padding:10px 20px 30px 40px;

    • 三个值:上 左右 下

    • 两个值:上下 左右

    • 一个值:上下左右

举例

  • <body>
        <div class="box1">
            <div class="inner"></div>
        </div>
    </body>
    <style>
        .box1{
            width:200px;
            height:400px;
            background-color:red;
            border:10px green solid;
            
            padding-top:200px;
            padding-right:100px;
            padding-bottom:50px;
            padding-left:40px;
        }
        .inner{
            width:100%;
            height:100%;
            background-color:yellow;
        }
    </style>

外边距(margin)

定义

  • 外边距不会影响盒子可见框的大小

  • 但是外边距会影响盒子的位置

  • 一共有四个方向的外边距

    • margin-top

      • 上外边距,设置一个正值,元素会向下移动

    • margin-right

    • margin-bottom

      • 下外边距,设置一个正值,其下边的元素会向上移动

    • margin-left

      • 左外边距,设置一个正值,元素会向右移动

    • margin也可以设置负值,如果是负值则元素会向相反的方向移动

  • 外边距正值移动方向负值移动方向
    margin-top自己向下移动
    margin-right右边盒子向右移动
    margin-bottom下方盒子向下移动
    margin-left自己向右移动
  • margin的简写属性

    • margin可以同时设置四个方向的外边距,用法和padding一样

    • 值的情况

    • 四个值:上 右 下 左

      • margin:10px 20px 30px 40px;

    • 三个值:上 左右 下

    • 两个值:上下 左右

    • 一个值:上下左右

  • 元素在页面中是按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动

  • 而设置下和右外边距会移动其他元素

举例

  • <head>
        <style>
            .box1{
                width:200px;
                height:200px;
                background-color:#bfa;
                border:20px,red,solid;
                
                margin-top:100px;
                margin-bottom:200px;
                margin-right:200px;
                margin-left:100px;
            }
            .box2{
                width:200px;
                height:200px;
                background-color:#bfa;
                border:20px,red,solid;
            }
    </style>
    </head>
    ​
    ​
    <body>
        <div class="box1">
            <div class="inner"></div>
        </div>
        
        <div class="box2"></div>
    </body>
    ​
    ​
    

元素的水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定

  • margin-left

  • border-left

  • padding-left

  • width

  • padding-right

  • border-right

  • margin-right

  • 属性默认值
    margin-left0
    border-leftborder-left-width: medium border-left-style: none border-left-color: currentcolor
    padding-leftauto
    widthauto
    padding-rightauto
    border-rightborder-right-width: medium border-right-style: none border-right-color: currentcolo
    margin-right0

一个元素在其父元素中,水平布局必须要满足以下的等式

  • margin-left + border-left + padding-left + width + padding-right + border-right + margin-right= 其父元素内容区的宽度(必须满足)

  • 以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,啧等式会自动调整

    • 调整情况

    • 如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足

      • 左外边距+左框宽+左内边距+中+右内边距+右框宽+右外边距

      • 右外边距根据自左向右最后判断故无auto改右外边距

  • 这七个值中有三个值和设置为auto

    • width

    • margin-left

    • margin-right

    • 如果某个值为auto,则会自动调整为auto的那个值以使等式成立

    • 如果将一个宽度和一个外边距设置为auto,啧宽度会调整到最大,设置为auto的外边距会自动为0

    • 如果将三个值都设置为auto,则外边距都是0,宽度最大

    • 如果将两个外边距设置为auto,宽度固定值,啧会将外边距设置为相同的值

    • 如果 将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值

      • 所以我们经常利用这个特点来使一个元素在其父元素中水平居中

      • 示例

      • width:xxxx px;

      • margin:0 auto;

    • 值可以为负数

元素的垂直方向的布局

  • 默认情况下父元素的高度被内容撑开

  • 子元素是在父元素的内容区中排列的

    • 如果子元素的大小超过了父元素,则子元素会从父元素中溢出

    • 使用overflow属性来设置父元素如何处理溢出的子元素

      • 可选值

      • visible默认值,子元素会从父元素中溢出,在父元素外部的位置显示

      • hidden 溢出内容将会被裁减不会显示

      • scroll 生成两个滚动条,通过滚动条来查看完整的内容(横竖滚条)

      • auto 根据需要生成滚动条(自动处理水平垂直)

      • overflow-x 单独处理水平方向

      • overflow-y 单独处理垂直方向

外边距的折叠(垂直外边距的重叠)

垂直外边距的重叠(折叠)

定义

  • 相邻的垂直方向的外边距会发生重叠现象

分类

兄弟元素

  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)

  • 特殊情况

    • 如果相邻的外边距一正一负,则取两者的和

    • 如果相邻的外边距都是负值,则取两者中绝对值较大的

  • 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理

父子元素

  • 父子元素间相邻外边距,子元素的会传递给父元素(上外边距)

  • 父子外边距的折叠会影响到页面的布局,必须要进行处理

    • 解决方法

      • 不用外边距

      • 不让其相邻

    • 不用外边距

      • 改内边距 padding-top:子的高度px;

      • 改子行高 height: 子的高度

    • 不让其相邻

      • 改边框 border-top:1px;

      • 改父行高height:原数据-1;

      • 改子外边距 margin-top:原数据-1;

行内元素的盒模型

  • 行内元素不支持设置宽度和高度

  • 行内元素可以设置padding,但是垂直方向的padding不会影响页面的布局

  • 行内元素可以设置border,垂直方向的border不会影响页面的布局

  • 行内元素可以设置margin,垂直方向的margin不会影响布局

display

作用

  • display用来设置元素显示的类型

可选值

  • inline 将元素设置为行内元素

  • block 将元素设置为块元素

  • inline-block将元素设置为行内块元素

    • 行内块,既可以设置宽度和高度又不会独占一行

  • table 将元素设置为一个表格

  • none 元素不在页面中显示(隐藏一个值)不占位置

补充 visibility设置显示状态

可选值

  • visible 默认值,元素在页面中正常显示

  • hidden 元素在页面中隐藏,不显示但是依然占据页面中的位置

盒子的大小

默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定

box-sizzing

  • box-sizzing用来设置盒子尺寸的计算方式(设置 width和height的作用)

  • 可选值

    • content-box 默认值,宽度和高度用来设置内容区的大小

    • border-box 宽度和高度用来设置整个盒子可见框的大小

    • width和height 指的是内容区和内边距和边框的总大小

轮廓和圆角

outline轮廓

border设置边框(镶嵌)大小

  • outline 用来设置元素的轮廓线(悬浮),用法和border一模一样

    • 轮廓和边框不同的点,就是轮廓不会影响到可见框的大小

box-shadow阴影

  • 用来设置元素的阴影效果,阴影不会影响页面布局

  • 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 ,负值向左移动

  • 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动

  • 第三个值 阴影的模糊半径

  • 第四个值 阴影的颜色 rgb(数字,数字,数字,0.数字)

    • 数字为rgb值

    • 0.数字为 不透明度

格式

  • box-shadow:a数字px b数字px c数字 颜色;
    a数字:左侧阴影偏移量 
    b数字:阴影偏移量
    c数字  阴影的模糊半径
    颜色:阴影颜色

border-radius设置圆角圆的半径大小

  • border-radius用来设置圆角 圆角设置的圆的半径大小

  • 像素越大半径越大弧度越大

    • x数字px x轴方向的像素控制y轴方向的弧度

    • y数字px y轴方向的像素控制y轴方向的弧度

  • border-radius可以分别指定四个角的圆角

    • 四个值

      • 左上 右上 右下 左下

    • 三个值

      • 左上 右上/左下 右下

    • 两个值

      • 左上/右下 右上/左下

    • 将元素设置为一个圆形

      • border-radius:50%;

  • border-top-left-radius:x数字px y数字px; 设置左上角

  • border-top-right-radius:x数字px y数字px; 设置右上角

  • border-bottom-left-radius:x数字px y数字px; 设置左下角

  • border-bottom-right-radius:x数字px y数字px; 设置右下角

浏览器的默认样式

默认样式

  • 通常情况,浏览器都会为元素设置一些默认样式

  • 默认样式的存在会影响到页面的布局,通常情况下编写网页时必须要去处浏览器的默认样式(PC端的页面)

  • 通常使用*{ 来去除默认样式

    margin:0;

    pardding:0;

    }

  • ol ul dl 使用

  • ul{
    list-style:none;
    } 
    ​
    ol{
    list-style:none;
    }  
    ​
    ul,ol,dl{
    list-style:none;
    }

去除项目符号 list-style:none;

  • list-style:none;

通用去除(用别人写好的)

  • < link rel="stylesheet" href="./css/reset.css" >

  • 格式 自己建的文件/别人写好的CSS

normaize-对默认样式进行了统一

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
​
/* Document
   ==========================================================================
​
    官网搞的
    对默认样式进行了统一
    */
​
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
​
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}
​
/* Sections
   ========================================================================== */
​
/**
 * Remove the margin in all browsers.
 */
​
body {
    margin: 0;
}
​
/**
 * Render the `main` element consistently in IE.
 */
​
main {
    display: block;
}
​
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
​
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
​
/* Grouping content
   ========================================================================== */
​
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
​
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}
​
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
​
pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
​
/* Text-level semantics
   ========================================================================== */
​
/**
 * Remove the gray background on active links in IE 10.
 */
​
a {
    background-color: transparent;
}
​
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
​
abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}
​
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
​
b,
strong {
    font-weight: bolder;
}
​
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
​
code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
​
/**
 * Add the correct font size in all browsers.
 */
​
small {
    font-size: 80%;
}
​
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
​
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
​
sub {
    bottom: -0.25em;
}
​
sup {
    top: -0.5em;
}
​
/* Embedded content
   ========================================================================== */
​
/**
 * Remove the border on images inside links in IE 10.
 */
​
img {
    border-style: none;
}
​
/* Forms
   ========================================================================== */
​
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
​
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}
​
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
​
button,
input { /* 1 */
    overflow: visible;
}
​
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
​
button,
select { /* 1 */
    text-transform: none;
}
​
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
​
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
​
/**
 * Remove the inner border and padding in Firefox.
 */
​
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
​
/**
 * Restore the focus styles unset by the previous rule.
 */
​
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}
​
/**
 * Correct the padding in Firefox.
 */
​
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
​
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
​
legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}
​
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
​
progress {
    vertical-align: baseline;
}
​
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
​
textarea {
    overflow: auto;
}
​
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
​
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}
​
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
​
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
​
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
​
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}
​
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
​
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
​
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
​
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}
​
/* Interactive
   ========================================================================== */
​
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
​
details {
    display: block;
}
​
/*
 * Add the correct display in all browsers.
 */
​
summary {
    display: list-item;
}
​
/* Misc
   ========================================================================== */
​
/**
 * Add the correct display in IE 10+.
 */
​
template {
    display: none;
}
​
/**
 * Add the correct display in IE 10.
 */
​
[hidden] {
    display: none;
}

reset-直接去除浏览器的默认样式

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   直接去除浏览器的默认样式
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只符华单推人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值