Home css basic
Post
Cancel

css basic

fozu on Feb 20, 20232023-02-20T00:00:00+08:00
41 min read

CSS

使用CSS的方式

内联样式

样式直接写在标签的style属性中

1
2
3

<div style="color: blue; background-color: red; font-size: 30px;">
    This is a div.
</div>

文档样式(内嵌样式)

style标签包含在head中

1
2
3
4
5
6
7
8
9

<head>
    <style>
        div {
            color: blue;
            background-color: red;
            font-size: 30px;
        }
    </style>
</head>

外部样式

link标签

link标签包含在head标签中，链接单独的css文件， 注意rel是必须的

1
2
3

<head>
    <link rel="stylesheet" href="css/base.css">
</head>
style标签 + @import
1
2
3
4
5
6

<head>
    <style>
    	@import "css/page0.css";
        @import "css/base.css";
    </style>
</head>

CSS语法

  • 在css中使用@charset指定文件编码，一般为UTF-8

    1

    @charset "UTF-8";

  • css文件中导入其他css文件 (不建议，效率比link低)

    1
2
3

    @charset "UTF-8";
@import "./base-div.css";
@import "./base-img.css";

  • @import语法

    1
2
3
4
5

    @import "css/base-div.css";// 推荐写法
@import 'css/base-div.css';
@import url('css/base-div.css');
@import url("css/base-div.css");
@import url(css/base-div.css);

References

caniuse

选择器

通用选择器

  • 一般用来给所有元素作一些通用性的设置

  • 比如内边距、外边距等

  • 效率比较低，尽量不要使用

1
2
3
4

* {
    margin: 0;
    padding: 0;
}

id选择器

  • 顾名思义根据id属性的值来选择元素

  • id建议命名：单词间用连接符’-‘、或下划线’_‘连接，也可用（小）驼峰命名法

  • 最好不要用标签名作id名

1
2
3
4

/* 选择id==p3的元素*/
#p3 {
    color: red
}

类型选择器

根据标签名称选择元素

1
2
3

div {
	background-color: red
}

类选择器

  • 根据class属性的值选择元素

  • 一个元素可以有多个class值，定义时用空格分隔

  • 多个元素的class值可以相同
  • 单个类的命名方式同id命名
1
2
3
4

/*选择class==food fruit的所有元素, 不区分类值的顺序（是并集的含义）*/
.food.fruit {
	background-color: red
}

属性选择器

  • 选择有给定属性的元素
  • 选择有给定属性且属性值为给定值的元素
  • 选择有给定属性且属性值包含给定单词的元素
  • 选择有给定属性且属性值为给定值，或者属性值以给定值开头且后面紧跟连字符的元素
  • 选择有给定属性且属性值以给定值开头的元素
  • 选择有给定属性且属性值以给定值结尾的元素
  • 选择有给定属性且属性值包含给定值的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* 选择有title属性的元素， 事实上title是global attribute*/
[title] {
    color: red;
}

/* 选择属性title值为name的元素*/
[title="name"] {
    color: red
}

/* 选择属性title值包含name，且name必须作为word存在（一般左右用空格分隔）的元素 */
/*  会选中 'one two', 但不会选中'onetwo', 也不会选中'one-two'*/
[title~="name"] {
    color: red;
}

/* 选择属性title值为name, 或以name开头并紧跟连字符的元素*/
/* 会选中'name', 'name-a', 'name-bc'*/
/* 常用在lang属性上*/
[title|="name"] {
    color: red;
}

[lang|="en"] {
    color: red;
}

/* 选择属性href值以name开头的元素*/
[href^="http"] {
    color: red;
}

/* 选择属性title值以name结尾的元素*/
[title$="name"]{
    color: red;
}

/*  选择属性title值包含name的元素*/
[title*="name"]{
    color: red;
}

后代选择器 (descendant combinator)

选择符合一定规则的后代

1
2
3
4
5
6
7
8
9

/* 选择作为div元素后代元素的span元素*/
div span {
    color: red
}

/* 选择作为p元素后代元素的span元素, 且要求p元素作为div元素的后代元素*/
div p span {
    color: red
}

子选择器

选择子元素（直接后代）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 选择div的子span元素 */
div>span {
	color: red;
}

/* 选择作为p元素直接后代元素的span元素，且要求p元素作为div的直接后代元素*/
div>p>span {
    color: red;
}

/*选择作为id属性值为title的元素E的直接后代，且title属性值为name的元素, 
且要求E元素作为class属性为container的元素的直接后代元素
*/
.container>#title[title="name"] {
    color: red;
}

/*
组合使用练习

div元素作为 class为name的元素的后代元素
p元素作为div元素的子元素
id为title的元素作为p元素的后代元素
*/
.name div>p #title {
    color: red
}

相邻兄弟组合（adjacent sibling combinator）

选择后面紧邻的兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* 选择作为兄弟元素且紧跟在div后面的p元素*/
div+p {
	color: red;
}

/*
组合使用练习

p元素是紧跟在p元素后面的p的兄弟元素
strong元素是p元素的后代元素
倒数第二个span元素是strong元素的子元素
最后一个span元素是倒数第二个span元素的后代元素
*/
div+p strong>span span {
    color: red
}

全体兄弟组合 （general sibling combinator）

选择给定元素后面的所有兄弟

1
2
3
4

/* 选择作为div元素兄弟，且出现在div元素后面的元素*/
div~p {
    color: red;
}

选择器组 （交集）

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 选择class属性值为name的div元素*/
div.name {
    color: red;
}

/*
组合使用练习

选择class属性值为one, 同时title属性值为name的div元素
*/
div.one[title="name"] {
    color: red
}

选择器组 （并集）

  • 交集选择器如果包含标签作为条件，标签条件应该写在第一个，当然属性选择器放第一个语法上也对（但是不建议）
1
2
3
4
5
6
7
8

/* 
选择div元素
或者class属性为one的元素
或者title属性为test的元素
*/
div, .one, [title="test"] {
    color: red;
}

动态伪类 （dynamic pseudo-classes）

链接原始状态

:visited

链接访问过后的状态

:hover

鼠标浮动在元素时的状态

:active

鼠标在元素上按下时的状态

:focus

元素有输入焦点时的状态

a:focus如果出现在a:active后面将覆盖前者

用tab键聚焦到a元素时，显示a:focus设置的样式，如果没有:focus则显示正常状态样式

:focus中设置outline=none可让a元素在该状态下不显示外框

设置tabindex属性值为”-1”，希望让标签不被tab键选中

直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* a标签正常状态 注意':'与link之间不能有空格*/
a:link {
    color: yellow;
}



/* a标签鼠标按下状态 注意':'与active之间不能有空格*/
a:active {
    color: red;
}

/* a标签访问过后的状态 注意':'与visited之间不能有空格*/
a:visited {
    color: purple;
}

/* 
a标签鼠标浮动状态 注意':'与hover之间不能有空格
该状态必须放在:link和:visited状态后面才能完全生效
:active必须放在hover后面才能完全生效
建议书写顺序：:link, :visited, :hover, :active
*/
a:hover {
    color: green;
}

div:hover {
    background-color: red;
}

input:focus {
    color: red;
}

结构伪类

按结构关系选中元素

:nth-child(an + b)选中作为其父元素中第an+b个子元素的元素，n为非负整数

选中第1-k个子元素之前的所有子元素：- n+ k (严格按照公式形式写)

:nth-last-child语法跟nth-child类似，前者从最后一个子元素算起，即1代表最后一个元素

:nth-child(2):nth-last-child(2) ，选中其父元素的除第一个和最后一个子元素

:nth-of-type, 选中第an+b个给定类型的元素

:nth-last-of-type，从最后一个算起

:first-child等同于nth-child(1)

:last-child等同于nth-last-child(1)

:first-of-type等同于:nth-of-type(1)

:last-of-type等同于:nth-last-of-type(1)

:only-child选中作为其父元素唯一子元素的元素,等同于:first-child:last-child

:only-of-type选中作为其父元素唯一给定类型子元素的元素，等同于:first-of-type:last-of-type

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*  选中作为其父元素第三个子元素的span元素 */
span:nth-child(3) {
    color: red;
}

/*
n代表非负整数（但是不存在第0个元素）

2n则表示选中所有作为其父元素第偶数个子元素的元素
*/
span:nth-child(2n) {
    color: red;
}

否定伪类 （negation pseudo-class）

  • 格式：:.not(x)，

  • 其中x是一个简单选择器，包括除否定伪类外的选择器, 不能是组合
  • 选择除x外的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* 选择class属性不等于name的所有div元素*/
div:not(.name) {
    color: red;
}

/* 选择class属性不等于name的所有元素*/
not(.name) {
    color: red;
}

/* 选择非p元素，包括body, html, head等 */
not(p) {
    color: red;
}

伪元素

:first-line、::first-line

:first-letter、::first-letter

:before、::before

:after、::after

为了明显与伪类明显区分，建议使用双冒号

只有某些属性可以应用在::first-line伪元素

字体属性、颜色属性、背景属性

word-spacing、letter-spacing、text-decoration、text-transform、line-height、float、vertical-align(只有当float==none时)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

div::first-line {
    color: red;
    text-decoration: underline;
}

div::before {
    content: "666";
    color: #f00;
}

div::after {
    content: url("images/abc.gif");
    color: #00f;
}

div::before {
    /*取class属性的值放内容前面*/
    content: attr(class);
}

a::after {
    content: "["attr(href)"]"
}

a[href^="http"]::after {
    content: "[ "attr(href)" ]";
}

元素状态伪类

1
2
3
4
5
6
7
8
9
10
11

input:enabled {
    color: red;
}

input:disabled {
    color: red;
}

input:checked {
    color: red;
}

Emment常用

快捷CSS代码生成

REF

w200 + Enter

1

width: 200px;

w20+h30+m40 + Enter

1
2
3

width: 20px;
height: 30px;
margin: 40px;

m20-30-40-50 + Enter

1

margin: 20px 30px 40px 50px;

p20-30-40-50 + Enter

1

padding: 20px 30px 40px 50px;

m10px20px 或m10px20 + Enter

1

margin: 10px 20px;

p10px20px + Enter

1

padding: 10px 20px;

p10px20 + Enter

1

padding: 10px 20%;// 注意20的单位

fz20 + Enter

1

font-size: 20px;

fz1.5 + Enter

1

font-size: 1.5em;

fw400 + Enter

1

font-weight: 400;

lh2 + Enter

1

line-height: 2;

fz50p + Enter

1

font-size: 50%;

fz1.5e + Enter

1

font-size: 1.5em;

fz1.5x + Enter

1

font-size: 1.5ex;

c#3 + Enter

1

color: #333333;

c#35 + Enter

1

color: #363636;

c#345 + Enter

1

color: #334455;

p20-30!+m10! + Enter

1
2

padding: 20px 30px !important;
margin: 10px !important;

CSS属性的继承

p元素宽度默认填充父元素

background-color, width, height都不能继承

强制继承： inherit

1

border: inderit;

css属性继承的是计算值，比如父元素font-size: %50, 子元素继承的是父元素font-size的计算结果，而不是%50本省这个值

如果同一属性通过不同的选择器设置在同一元素上，就要看优先级

!important大于内联样式

内嵌样式（style属性）优先级高于id选择器

id选择器优先级高于类选择器

类选择器优先级高于标签选择器、伪元素

标签选择器大于通用选择器

按照经验，为了方便比较CSS属性的优先级，给CSS属性所处的环境定义一个权重

!important: 10000 (表示重要，不是不重要)

1
2
3
4

div {
    // 优先级最高
	color: #00f !important
}

内联样式: 1000

id选择器：100

类选择器、属性选择器、伪类：10

元素选择器、伪元素：1

通配符： 0

总体来说针对性越强，优先级越高，组合标签按包含的优先级最高的开始比较

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 4
#box {

}

// 1(最高)
div.word#box {
    
}

// 2
.word#box {
    
}

// 3
div#box {
    
}

// 5
div.word {
    
}

1
2
3
4
5
6
7
8
9

// 两个标签选择器，两个类选择器
.five#radio .one #three {
	color: blue;
}

// 两个标签选择器，一个类选择器
#box #btn .four div span {
    color: black;
}

有些属性，浏览器会自己生成样(use agent stylesheet)式，这样的话，相当于有了自己的样式，不会从父元素继承相关属性样式， 如a元素的color样式、h1等元素的font-size、font-weight样式

有些元素本就不能嵌套在某些元素中，如div不能嵌套在p标签中，这一样也不会存在继承, 实际上从浏览器看也没有真正嵌套进去。

CSS使用经验

编写的样式不好使可能是因为

选择器的优先级太低

选择器没哟选中对应的元素

CSS属性的使用形式不对

元素不支持CSS属性，比如span默认是不支持width、height 的

浏览器不支持某些CSS属性， 在caniuse网站搜索查看

被同类型的CSS属性覆盖，比如font覆盖font-size

建议

充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

block-level elements (块级元素)

独占父元素一行

所有的块级元素都是非替换元素

可以随意设置宽高，高度默认有内容决定，典型: div, p

常见的块级元素

div, p, pre, h1~h6, ul, ol, li, dl, dt, dd, table, form, article, aside, footer, header, hgroup, main, nav, section, blockquote, hr等

inline-level elements(行内级元素)

多个行内级元素可以在父元素的同一行中显示

行内级元素中的替换元素，可以随意设置宽高, 典型：img, iframe, input

img, input, iframe, video, embed, canvas, audio, object等

行内级元素中的非替换元素，不能随意设置宽高，宽高由内容决定, 典型： span, strong, a

a, strong, span, code, label等

常见的行内级元素

a, img, span, strong, code, iframe, label, input, button, canvas, embed, object, video, audio等

replaced elements (替换元素)

  • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容

  • 常见的替换元素

    ​ img, input, iframe, video, embed, canvas, audio, object等

    non-replaced elements(非替换元素)

  • 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断显示什么内容

  • 常见非替换元素

    div, p, pre, h1~h6, ul, ol, li, dl, dt, dd, table, form, article, aside, footer, header, hgroup, main, nav, section, blockquote, hr, a, strong, span, code, label等

display

  • block

    让元素显示为块级元素

  • inline

    让元素显示为行内级元素

  • none

    隐藏元素

  • inline-block

    让元素同时具备行内级、块级元素的特征

    更其他行内级元素在同一块显示

    可以随意设置宽高

    宽高默认由内容决定

  • display的一下取值，等同于某些HTML元素

    • table: <table>, 一个block-level 表格
    • inline-table: <table>, 一个inline-level表格
    • table-row: <tr>
    • table-row-group: <tbody>
    • table-header-group: <thead>
    • table-footer-group: <tfoot>
    • table-cell: <td>、<th>、一个单元格
    • table-caption: <caption>， 表格标题
    • list-item: <li>

display: none vs visibility: hidden

前者完全消失，后者只是隐藏（还占着位置及空间）

overflow

控制内容超出边界时的展示方式

  • hidden

    超出部分隐藏

  • visible

    超出部分可见

  • scroll

    无论是否超出，都展示水平和数值滚动条

  • auto

    根据内容自动判断是否需要水平和垂直滚动条

另外还有overflow-x、overflow-y分别控制水平和垂直方向

​

常见问题

行内级元素之间的空格占据空间，造成元素之间都一定的缝隙

  • method 1

    书写代码时注意不要流空格

    缺陷：格式不好看

  • method 2

    注释掉元素之间的空白

    缺陷：比较丑陋

  • method 3

    设置父元素的font-size为0，然后子元素单独设置字体；（Safari不适用）

  • method 4

    给元素加float

元素嵌套注意点

  • 块级元素、inline-block元素

    一般情况下，可以包含其他任何元素

    特殊情况，p元素不能包含其他块级元素

  • 行内级元素

    一般情况下，只能包含行内级元素

line-height

设置单行文字的最小高度

继承

如果写的是具体数值（如1.5），继承下来就是具体数值

如果写的是百分比，继承下来的是计算出来的值

normal：常规显示，浏览器会给予元素字体调整成一个合理值，范围在1.0~1.2

font (shorthand property)

font-style font-variant font-weight font-size/line-height font-family

1
2
3

div {
    font: italic small-caps 700 20px/40px "微软雅黑"；
}

  • 前三个可以随意调换顺序，也可以省略

  • /line-height可以省略

  • 后两个保持固定顺序，且不能省略

盒子模型

  • 从内到外：content、padding、border(盒子厚度)、margin

  • width、height只是content的宽、高

  • padding, margin

    顺时针：top, right, bottom, left

    margin一般用来设置兄弟元素之间的间距（而不是父子）

    padding一般用来设置父子元素之间的间距

  • 上下margin传递

    如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

    如果块级元素的底部线和父元素的底部线重合，并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素

  • 解决上下margin传递的问题

    1. 给父元素或者子元素设置diaplay: inline-block
    2. 给父元素padding-top或者padding-bottom
    3. 给父元素设置border

  • 上下margin折叠

    • 垂直方向上相邻的两个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse（折叠）
    • 两个兄弟块级元素之间上下margin的折叠
    • 无内容的块级元素上下margin折叠

    总结：只要margin紧挨在一起就会发生折叠

    折叠后最终值的计算规则：

    如果都是正数，最终值为数值最大那个

    如果都是负数，最终值为绝对值最大那个

    如果正负数都有，最终为最大整数和最小负数相加

  • 解决margin折叠问题

    只设置其中一个margin即可

    条件允许的话，使用padding取代margin

  • Note

    行内级非替换元素：不支持width、height、margin-top、margin-bottom

    行内级替换元素：支持width、height、margin-top、margin-bottom

    ### border-radius

  • 圆角半径相关的属性有

    border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

    border-\*-\*radius定义的是四分之一椭圆的半径

    border-top-left-radius: 40px 20px;

    第一个值是水平半径

    第二个值是垂直半径（如果不设置就跟随水平半径的值）

    border-top-left-radius:50%;, 百分比参考的是border-box的宽度

outline

表示元素的外轮廓

不占用空间

默认显示在border的外面

每个部位都是完整连接的，不会想border那样有可能会断开（比如行内级非替换元素的换行）

outline-offset：设置outline和border之间的间距

boxshadow

可以设置一个或多个阴影

每个阴影用表示

多个阴影之间用逗号隔开，从前到后叠加

的常见格式： = inset? && {2, 4} && ? > 第一个：水平方向的便宜，正数往右偏移 > > 第二个：垂直方向的偏移，整数往下偏移 > > 第三个: 模糊半径（blur radius） > > 第四个: 延伸距离 > > inset：外框阴影变为内框阴影

text-shadow

跟box-shadow原理和使用一样，只不过作用在文字上

box-sizing

用来控制width、height得含义

content-box: width、height不包括padding、border

border-box: width、height包括padding、border

水平居中问题

块级元素

  • margin-left: auto; margin-right: auto;

行内级元素

  • 给父元素设置：text-align: center;

background-image

  • 用于设置元素的背景图片

  • 如果设置了背景图片后，元素没有具体的狂傲，背景图片不是显示出来

  • 会盖在background-color上面

  • 在图片的透明区域，可以看到背景色

  • 可以设置多个背景图片，最前面的(第一张)会显示在最前面（front）

    1

    background-image: url("1.png"), url(2.png), url(3.png)

background-repeat

  • 用于设置背景图片是否要平铺
  • 常见值： repeat(默认)、no-repeat、repeat-x、repeat-y

background-size

  • 用于设置背景图片的大小

    1
2

    background-size: 150px auto;/* 高度auto*/
background-size： 150px; /* 高度auto*/

  • 百分比依赖于background-origin (Position Area)

background-position

  • 用于设置背景图片在水平、垂直方向上的具体位置

    1
2

    background-position： center;
background-position: 20px; /* 如果只设置了一方，另一个方向默认center */

滑动门

如果是非纯色背景，并且左右还带有圆角等特殊效果，就把圆角图片作用在父元素上，给父元素设置左右padding, 把中间的图片作为背景平铺在内容上

大图片显示适配

  • 切一张最大的图（1920）
  • 设置最小宽度

CSS Sprite

一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分

background-attachment

  • fixed： 相对于浏览器窗口是固定的；常跟平铺背景搭配使用
  • local：跟随元素滚动
  • scroll: 相对元素是固定的，跟随浏览器窗口滚动

background

是一系列背景相关的属性的shorthand

常用格式

image position/size repeat attachment color

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面

cusor

1

cusor: url("images/icon.png") 0 0, pointer;

url后面的两个数字

分别代表图片在水平、垂直方向上的偏移，不能设置负数

0 0代表图片左上角和指针是重叠的，数值变大，图片左上角会朝着执政左上角方向偏移

如果水平、垂直分别设置为图片宽高的一般，图片的中心点将和指针重叠

如果图片找不到，就会用pointer作为cursor的值

Normal Flow（标准流-元素定位）

  • 元素按从上到下、从左到右顺序摆放
  • 元素之间不存在层叠现象
  • 通常用padding, margin定位；其中margin还可以设置负数

position定位

relative (相对定位)

  • 通过left、right、top、bottom进行定位

  • 定位参照对象是元素自己原来的位置

  • 往箱子内部偏移是正偏移

  • left、right、top、bottom分别表示距离箱子左、右、上、边的偏移

  • 定位后元素原来占用的空间还在

  • example

    1
2
3
4
5

    img {
    position: relative;
    margin-left: -960px;
    left: 50%;
}

static(静态定位，默认)

  • left、right、top、bottom没有任何作用

fixed (固定定位)

  • 元素脱离normal flow
  • 可以通过left、right、top、bottom进行定位
  • 定位参考对象是视口(ViewPort)，可以简单理解为浏览器窗口（可以通过拖拽边框调整）；注意区别于画布
  • 当画布滚动时，固定不动

absolute(绝对定位)

  • 元素脱离Normal Flow
  • 可以通过left、right、top、bottom进行定位
  • 定位参照对象时最邻近的定位祖先元素，如果找不到这样的参照，参照对象时视口（ViewPort）
定位元素

position的值不为static

绝对定位元素

position的值为absolute或者fixed

子绝父相

在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：父元素relative, 子元素absolute,简称”子绝父相“

水平居中
1
2
3
4

margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
垂直居中
1
2
3
4

margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
等宽
1
2

left: 0;
right: 0;
等高
1
2

top: 0;
bottom: 0;

脱标元素的特性

  • 可以随意设置宽高
  • 宽高默认由内容决定
  • 不再受标准的约束
    • 不在严格按照从上到下，从左到右排布
    • 不在严格区分块级、行内级，块级、行内级的很多特性都会消失
  • 不再给父元素汇报宽高数据
  • 脱标元素内部还是按标准流排布

层叠问题

  • 子元素会层叠在父元素上
  • 非父子关系
    • 都是非定位元素
      • 在标准流中默认不存在层叠现象
      • 可以通过margin的负数值实现层叠
    • 1个是定位元素，1个是非定位元素
      • 定位元素会层叠在非定位元素上
    • 都是定位元素
      • 使用CSS属性的z-index来控制层叠顺序
      • z-index
        • 用来设置定位元素的层叠顺序
        • 默认值是auto，相当于没有
        • 仅对定位元素有效
        • 取值为整数
        • 兄弟关系
          • 值越大，层叠在越上面
          • 值相等，写在后面的元素层叠在上面
        • 非兄弟关系
          • 各自从元素自己以及祖先元素中，找出最邻近的两个定位元素进行比较
          • 如果相等，写在后面的元素层叠在上面

float(浮动)

  • 元素会脱离标准流，以达到灵活布局的效果

  • none: 默认值，不浮动

  • left: 向左浮动

  • right: 向右浮动

  • 浮动元素朝着向左或向右的方向移动，知道自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

  • 定位元素会层叠在浮动元素上面

  • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

    • 比如行内级元素、inline-block元素，块级元素的内容等
    • 利用此特性，可以轻松实现文字环绕功能

  • 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

  • 浮动元素之间不能层叠

    • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

    • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

  • 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

float应用

  • 解决行内级元素、inline-block元素的水平间隙问题

float存在的问题

  • 由于浮动元素脱离了标准流，变成了脱标元素，所以不再想父元素汇报高度

  • 导致了父元素高度坍塌的问题

    • 解决该问题的过程，一般叫做清浮动（清理浮动、清除浮动）

      • 清浮动的常见方法

        • 给父元素设置固定高度（扩展性不好）

        • 让父元素浮动（父元素脱离了标准流，可能导致页面中所有元素都浮动，不推荐）

        • 让父元素成为绝对定位元素（父元素脱离了标准流，改变父元素的盒子特性，不推荐）

        • 设置父元素的display为inline-block、inline-table、table、table-cell、table-caption(改变父元素的盒子特性，不推荐)

        • 设置父元素的overflow为visible以外的值（比如hidden、auto、scroll）（改变了父元素对内容溢出的默认行为，不推荐）

        • 在父元素最后增加一个空的块级子元素(height: 0)，将其clear设置为both （不推荐）

          • 会增加很多无意义的空标签，维护麻烦
          • 用标签解决CSS的问题，违反了结构与样式分离的原则

        • 用after伪元素模仿上面的空块级子元素 (终极方案，使用于当下流行的所有浏览器)

          1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

          /* 适配现在流行的所有浏览器 */
.container::after {
    content: "";
    display: block;
	clear: both;
}
        
/* 适配旧浏览器 */
.container::after {
    content: "";
    display: block;
	clear: both;
    height: 0;
    visibility: hidden;
}
        
/*适配IE浏览器*/
.container {
    *zoom: 1;
}

clear

  • left: 要求元素的顶部低于之前生成的所有左浮动元素的底部
  • right: 要求元素的顶部低于之前生成的所有右浮动元素的底部
  • both: 要求元素的顶部低于之前生成的所有浮动元素的底部
  • none: 默认，无特殊要求
  • 一般只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠
  • br元素的clear属性等价于CSS中的clear, 取值范围：left/right/both

​

官方文档阅读

  • Reference

  • || (double bar): 可出现一个或多个，顺序任意
  • |: 只能出现一个
  • &&： 每个都必须出现，顺序任意
  • []: 分组，表示是一个整体
  • #： 出现一次或多次，每个值之间用逗号隔开
  • ！：跟在分组后面，表示这个分组至少要出现1个值（即使分组内规定所有值都是可选）
  • *： 出现0次或多次
  • +：出现1次或多次
  • ？：出现0次或1次
Web
web css
This post is licensed under CC BY 4.0 by the author.
Recent Update
Contents

windows cmd

git undo