移动端开发样式

大小常用单位

—————-

引入方式

内嵌式/内联式

1
2
3
4
5
6
7
8
<head>
    <style>
        A{
            a:b;
            c:d;
        }
    </style>
</head>

链接式

1
2
3
4
5
<head>
    <link rel="stylesheet" href="a.css"
    <link rel="stylesheet" href="css/main/b.css"
    <link rel="stylesheet" href="https://baidu.com/c.css"
</head>

行内式

1
2
3
<body>
    <p style="color: red; background-color: green;">我是好人</p>
</body>

导入式

在html中：

1
2
3
<style>
	@import url(a.css)
</style>

在css中：

1
@import url(a.css)

优先级

理论上

!important > 行内式 > 内嵌式 > 链接式 > 导入式

1
2
3
p{
	color: green !important;
}

实际上

内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高（页面多种方式使用css样式引入）

心得：如果同一个css定义分布在两个css文件中，那么样式取后引入的css文件。所以最好将第三方组件的css放在html靠前位置，自定义的css放到html后面位置。

选择器

标签选择器

根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <style>
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>我爱学习</p>
    </body>
</html>

id选择器

#id ：根据指定的id名称找到对应的标签, 然后设置属性

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <style>
            #aaa{
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="aaa">我爱学习</p>
    </body>
</html>

类选择器

.class：根据指定的类名称找到对应的标签, 然后设置属性

类选择器类似于姓名，可以重复；ID选择器类似于身份证号，不能重复，一般留给js适用。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <style>
            .aaa{
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="aaa">我爱学习</p>
    </body>
</html>

后代选择器

用空格隔开

后代选择器找所有的儿子、孙子、重孙子等后代；

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
            #i1 .c5 li{color: red;}
</style>
<div id="i1" class="c1">
    <p id="i2" class="c2">我是中国人</p>
    <p id="i3" class="c3">我爱学习</p>
    <p id="i4" class="c4">中国人不骗中国人</p>
    <ul id="i5" class="c5">
        <li><p>安徽人</p></li>
        <li><p>浙江人</p></li>
    </ul>
    <p id="i6" class="c6">都是中国人</p>
</div>

image-20220110000640353

子元素选择器

用 > 隔开

子元素选择器只找亲儿子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
            #i1 p{color: red;}
            #i1>p{background-color:black;}
</style>
<div id="i1" class="c1">
    <p id="i2" class="c2">我是中国人</p>
    <p id="i3" class="c3">我爱学习</p>
    <p id="i4" class="c4">中国人不骗中国人</p>
    <ul id="i5" class="c5">
        <li><p>安徽人</p></li>
        <li><p>浙江人</p></li>
        <li>上海人</li>
    </ul>
    <p id="i6" class="c6">都是中国人</p>
</div>

image-20220110002617509

交集选择器

没有任何符号，连在一起

同样可以使用标签名称/id名称/class名称，仅仅作为了解, 企业开发中用的并不多

1
2
3
选择器1选择器2{
    属性: 值;
}

并集选择器

使用 ,隔开

给所有选择器选中的标签设置属性，同样可以使用标签名称/id名称/class名称

1
2
3
选择器1,选择器2{
    属性:值;
}

兄弟选择器

从上往下逐行寻找

相邻兄弟选择器

用+隔开

css2，给指定标签后面紧跟的那个标签设置属性，关键词：同级紧跟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
     h1+p{color: red;}
    
</style>
<div id="i1" class="c1">
    <h1>标题1</h1>
    <a href="#">我是超链接</a>
    <p id="i2" class="c2">我是中国人</p>
    <p id="i3" class="c3">我爱学习</p>
    <p id="i4" class="c4">我爱水果</p>
    <h1>标题1</h1>
    <p id="i5" class="c5">我爱吃饭</p>
    <p id="i6" class="c6">我要加油</p>
    <p id="i7" class="c7">中国人不骗中国人</p>
    <p id="i8" class="c8">都是中国人</p>
    <ul id="i9" class="c9">
        <li><p>安徽人</p></li>
        <li><p>浙江人</p></li>
    </ul>
</div>

<!-- 只有我爱吃饭变红色 -->

除了都是ID这一种情况，其他情况都可以，因为ID是唯一的。

通用兄弟选择器

用~隔开

css3，给指定选择器后面的所有选择器选中的所有标签设置属性，关键词：同级所有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .c3~p{color: red;}
</style>

<div id="i1" class="c1">
    <h1>标题1</h1>
    <a href="#">我是超链接</a>
    <p id="i2" class="c2">我是中国人</p>
    <p id="i3" class="c3">我爱学习</p>
    <p id="i4" class="c4">我爱水果</p>
    <h1>标题1</h1>
    <p id="i5" class="c5">我爱吃饭</p>
    <p id="i6" class="c6">我要加油</p>
    <p id="i7" class="c7">中国人不骗中国人</p>
    <p id="i8" class="c8">都是中国人</p>
    <ul id="i9" class="c9">
        <li><p>安徽人</p></li>
        <li><p>浙江人</p></li>
    </ul>
</div>

image-20220110011118516

相邻兄弟选择器被割开就不会被作用；通用兄弟选择器被隔开也会作用。

序选择器

选中指定的任意标签然后设置属性

同级别的第几个（不区分类型） 同级别同类型的第几个
:first-child 选中同级别中的第一个标签 :first-of-type 选中同级别中同类型的第一个标签
:last-child 选中同级别中的最后一个标签 :last-of-type 选中同级别中同类型的最后一个标签
:nth-child(n) 选中同级别中的第n个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-child 选中父元素中唯一的标签 :only-of-type 选中父元素中唯一类型的某个标签 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    p:first-child{color:red;}  <!--[4]变红-->
    p:first-of-type{color:blue}  <!--[1][4]变蓝-->
</style>

<h2>[0]</h2>
<p>[1]</p>
<p>[2]</p>
<p>[3]</p>
<div>
	<p>[4]</p>
	<p>[5]</p>
	<p>[6]</p>
</div>
<p>[7]</p>
<p>[8]</p>

属性选择器

  • [attribute]
    -作用:根据指定的属性名称找到对应的标签, 然后设置属性
  • [attribute=value]
    -作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
    -最常见的应用场景, 就是用于区分input属性
1
2
3
4
5
6
7
8
9
10
<style>
    input[class]{...}    作用于前两个
    input[type]{...}     作用于三个
    
    input[name=11]{...}  作用于前两个
</style>

<input type="text" name="11" id="" class="AA">
<input type="password" name="11" id="" class="BB">
<input type="radio" name="22" id="" >

伪类选择器

伪类用于定义元素的特殊状态。

  • :link：从未被访问过的状态
  • :visited：被访问过的状态
  • :hover：鼠标悬停时
  • :actiuve：鼠标长按状态
  • 所有伪类详见：w3school
1
2
3
a:link {
  color: #FF0000;
}

通配符选择器

*：给当前界面上所有的标签设置属性

1
2
3
4
5
6
*{
    属性:值;
}

---------
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

CSS显示模式

显示模式

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

  • 容器级的标签独占一行；可以嵌套其它所有的标签
  • 文本级的标签不独占一行；只能嵌套文字/图片/超链接

在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(还有一类, 行内块级元素)

  • 块级元素会独占一行，可以设置宽高
  • 行内元素不会独占一行，不可以设置宽高
  • 行内块级元素不独占一行，可以设置宽高

显示模式转换

设置元素的display属性，可以转换css元素的显示模式

1
2
3
4
5
6
7
8
<style>
    p{display:block}         块级
	p{display:inline}        行内
	p{display:inline-block}  行内块级
</style>

<p>1</p>
<p>2</p>

网页布局方式

布局方式其实就是指浏览器是如何对网页中的元素进行排版的

标准流

标准流(文档流/普通流)排版方式，浏览器默认的排版方式就是标准流的排版方式

  • 垂直排版, 如果元素是块级元素, 那么就会垂直排版
  • 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

浮动流-float

浮动流是一种”半脱离标准流”的排版方式。浮动流只有一种排版方式,，就是水平排版。它只能设置某个元素左对齐或者右对齐

  • 在浮动流中是不区分块级元素/行内元素/行内块级元素的
  • 无论是块级元素/行内元素/行内块级元素都可以水平排版
  • 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
  • 综上所述, 浮动流中的元素和标准流中的行内块级元素很像

注意：

  • 浮动流中没有居中对齐, 也就是没有center这个取值

  • 在浮动流中是不可以使用margin: 0 auto;

  • 假设父盒子没有设置高度并且不浮动，那么子元素设置了高度并且浮动，不会撑起父元素的高度

image-20220402180032110

脱标

当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标。影响：如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。

image-20220402172328086

排序规则

  • 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

  • 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

  • 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

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
<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
</style>

image-20220402172541892

贴靠现象

  • 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

  • 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

  • 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

1
2
3
4
5
6
7
8
9
10
11
12
div{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid #000;
}
p{
    width: 500px;
    height: 500px;
    background-color: yellow;
}

image-20220402173251833

清除浮动

因为浮动流子元素不会撑起父元素的高度，并且浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定，往往会出现不是我们想要的效果。示例如下：

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
<style>
    *{
        margin: 0;
        padding: 0;
        background-color: aliceblue;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: blue;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: pink;
    }
    .ul02 li{
        background-color: palegreen;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>box1儿子1</li>
        <li>box1儿子2</li>
        <li>box1儿子3</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>box2儿子1</li>
        <li>box2儿子2</li>
        <li>box2儿子3</li>
    </ul>
</div>

显示效果：

image-20220402182646464

方法一：添加height

给前面的父盒子（box1）添加高度height

  • 在企业开发中能不写高度就不写高度, 所以这种方式不常用
方法二：添加clear:both

后面的盒子（box2）添加clear:both;属性清除前面浮动元素对我的影响

  • 使用clear:both之后margin属性会失效, 所以不常用
方法三：外墙法

在两个有浮动子元素的盒子之间添加一个额外的块级元素，并设置高度

  • 但是需要添加大量无意义的标签, ，不符合结构、样式分离的思想，后期维护不方便，所以不常用
方法四：内墙法

在前面一个盒子（box1）的子元素最后添加一个额外的块级元素

  • 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
  • 同外墙法缺点一样，不符合结构、样式分离的思想，所以不常用
方法五：添加overflow:hidden

给前面一个盒子（box1）添加overflow:hidden;属性

  • 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性

  • IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;来兼容

  • 优点：可以不用添加额外的标签又可以撑起父元素的高度,

  • 缺点：和定位结合在一起使用时会有冲突

方法六：添加伪元素

给前面一个盒子添加伪元素

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>大儿子</li>
        <li>二儿子</li>
        <li>三儿子</li>
    </ul>
</div>
  • 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
  • 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
方法七：添加双伪元素

定位流

标准流 区分 行/块/行内块 即静态定位
浮动流 不区分 行/块/行内块 脱离标准流
相对定位 区分 行/块/行内块 不脱离标准流
绝对定位 不区分 行/块/行内块 脱离标准流
固定定位 不区分 行/块/行内块 脱离标准流

相对定位 - relative

position: relative;

相对定位：就是相对于自己以前在标准流中的位置来移动

  • 在相对定位中，同一个方向上的定位属性只能使用一个
    • top/bottom 只能用一个
    • left/right 只能用一个
  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
  • 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以给相对定位的元素设置margin/padding等属性时，是基于原先的位置

绝对定位 -absolute

position: absolute;

绝对定位：就是相对于body或者某个定位流中的祖先元素来定位

  • 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
  • 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
  • 如果一个绝对定位的元素是以body作 为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
    • 相对于body定位会随着页面的滚动而滚动
  • 一个绝对定位的元素会忽略祖先元素的padding

绝对定位参考点：依据祖先有没有定位流（相对定位relative/绝对定位absolute/固定定位fixed）

  • 祖先元素没有定位流，默认以 body作为参考点
  • 祖先元素有一个是定位流，就以那个祖先元素为参考点
  • 祖先元素有多个定位流，谁离得最近就以谁为参考点

绝对定位水平居中

  • 注意：当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
  • 如果想让一个绝对定位的盒子自身居中, 可以使用：
    • position:absolute;
    • left:50%;
    • margin-left:-元素宽度一半px;

子绝父相

子元素绝对定位父元素相对定位；企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用。

未标题-1

相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流

固定定位 - fixed

position: fixed;

固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

  • 固定定位的元素是脱离标准流的, 不会占用标准流中的位置
  • 由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
  • IE6不支持固定定位

静态定位 - static

position: static;

默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流

  • 应用场景：一般用于配合JS清除定位属性

z-index属性

z-index:8; 用于指定定位的元素的覆盖关系,默认值为0

  • 默认情况下定位的元素一定会盖住没有定位的元素
  • 默认情况下写在后面的定位元素会盖住前面的定位元素
  • 默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
  • 定位元素的从父现象
    • 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
    • 父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁，子元素的z-index值将会失效

过度模块

过度属性

  • transition-property：哪些属性要过度
  • transition-duration：过度时间多少秒
  • 更多见 w3school
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
  width: 100px;
  height: 100px;
  background: red;
  /*告诉系统以下属性要执行过度*/
  transition-property: width,background;
  /*告诉系统以下属性的过度时间，一一对应*/
  transition-duration: 2s,3s;
}

div:hover {
  width: 300px;
  background: blue;
}

过度连写

transition: property过度属性 duration过度时长 运动速度 延迟时间

后两个可以省略，采用默认的

1
2
3
4
5
6
7
8
9
10
11
div {
  width: 100px;
  height: 100px;
  background: red;
  /*告诉系统要执行过度*/
  transition-property: width 3s,background 5s;
}
div:hover {
  width: 300px;
  background: blue;
}

如果变化的属性很多可以简写，缺点是无法设置各属性的过度时间，只能通一一样

1
2
3
4
5
6
7
8
9
10
11
div {
  width: 100px;
  height: 100px;
  background: red;
  /*告诉系统要执行过度*/
  transition-property: all 3s;
}
div:hover {
  width: 300px;
  background: blue;
}

2D转换

使用 transform 属性，利用以下值实现2D转换

  • translate() - 平移，正为右/下，负为左/上
  • rotate() - 旋转，正为顺，负为逆
  • scaleX() - 缩放
1
2
3
transform: translate(50px, 100px);
transform: rotate(20deg);
transform: scale(0.5, 3);

连写：用空格隔开

1
transform:translate(50px, 100px) rotate(20deg) scale(0.5, 3);

—————-

img

文字属性

font-style

规定文字样式

1
2
font-style:normal;   //正常的，默认
font-style:italic;   //倾斜的

font-weight

规定文字粗细

1
2
3
4
5
6
font-weight: normal/lighter/bold/bolder;  // 正常的/更细/粗/更粗

font-weight:400;  // 100-900之间整百的数字

400=normal
700=bold

font-size

规定文字大小

1
font-size:16px;

font-family

规定文字字体

1
2
3
font-family:"微软雅黑","宋体","黑体",opposans,SimHei

//取值为中文时，需要有双引号或者单引号

文字属性缩写

1
2
3
4
font:style weight size family;
font:italic bold 10px "宋体"；

//style和weight可以省略，并可以互换位置

文本属性

text-decoration

给文本添加装饰

1
2
3
4
5
6
text-decoration:none;

none: 无
underline: 下划线
overline:  上划线
line-through: 删除线

text-align

设置文本水平对齐方式

1
2
3
text-align: center;

center/left/right

text-indent

设置文本缩进

1
2
3
text-indent: 2em;

//em是单位, 一个em代表缩进一个文字的宽度

颜色属性

1
2
3
4
5
6
7
8
color:rgb(0,0,0);   //RGB（红,绿,蓝）

三个数字就是用来设置三原色的光源元件红绿蓝色显示的亮度
取值是0-255, 0代表不发光, 255代表发光, 值越大就越亮
红绿蓝数值一样就是灰色

color:rgba(0,0,0,0.2); 
a，阿尔法通道，表示透明度，取值0-1，越小越透明；20%不透明度
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
color:#000000；     //十六进制

【1】
通过十六进制来表示颜色其实本质就是RGB，每两位表示一个颜色

【2】
十进制   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
十六进制 0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f 

十六进制的第一位*16 + 十六进制的第二位 = 十进制
15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0

【3】
color:#123456ff； //后两位代表透明度

透明度=HEX代码
00%=FF（不透明）    
5%=F2    
10%=E5    
15%=D8    
20%=CC    
25%=BF    
30%=B2    
35%=A5    
40%=99    
45%=8c    
50%=7F   
55%=72    
60%=66    
65%=59    
70%=4c    
75%=3F    
80%=33    
85%=21    
90%=19    
95%=0c    
100%=00（全透明）

背景属性

background-color

1
2
background-color: rgb(0.0.0);
background-color: #ffffff;

background-image

1
2
3
4
background-image:url(images/girl.jpg);
background-image:url(http://baidu.com/0.jpg);

//默认水平和垂直方向平铺

background-repeat

控制背景平铺

1
2
3
4
background-repeat: repeat;     //默认值，平铺
background-repeat: no-repeat;  //不平铺
background-repeat: repeat-x;   //只水平平铺
background-repeat: repeat-y;   //只垂直平铺

background-position

控制背景定位

1
2
3
4
background-position: 水平方向 垂直方向;

background-position: left top;     //具体的方位名词，默认左上角
background-position: 100px 200px;  //具体的像素

方位名词取值：

  • 水平方向: left center right
  • 垂直方向: top center bottom

具体的像素取值：

  • 正负数值，必须带单位

background-attachment

控制背景关联方式

1
2
3
4
5
background-attachment：scroll;
background-attachment：fixed;

scroll  //随着滚动条的滚动而滚动，默认值
fixed   //不会随着滚动条的滚动而滚动

背景属性连写

1
2
3
4
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
background: #fff url() no-repeat fixed 0 0;

//任何一个属性都可以被省略

CSS精灵图

CSS精灵图是一种图像合成技术, 全称CSS Sprite；可以减少请求的次数, 以及降低服务器处理压力。CSS的精灵图需要配合背景图片和背景定位来使用。

1
2
3
4
5
6
7
8
9
<style>
    .box{
        width: 86px;
        height: 28px;
        background-image: url(images/weibo.png);
        background-position: -425px -200px;
    }
</style>
<div class="box"></div>

完整图片：

显示效果：

盒模型

border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
【1】连写
border: 边框的宽度 边框的样式 边框的颜色;
border: 1px solid #000;
//solid-实线  dashed-虚线

【2】按方向连写
border-top: 1px solid #000;
border-top   border-right   border-bottom   border-left

【3】按要素连写
border-width: 上  右  下  左；
border-width:1px 2px 3px 4px;
border-width   border-style   border-color   border-color

【4】非连写 border-方向-要素
border-top-width: 1px;
....

padding - 内边距

边框和内容之间的距离就是内边距

1
2
3
4
5
6
7
8
【1】连写
padding:上  右  下  左;
padding:1px 2px 3px 4px;
padding:8px; //上下左右都是8px

【2】单独设置
padding-top:9px;
padding-top   padding-right   padding-bottom   padding-left
  • 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
  • 给标签设置内边距之后, 内边距也会有背景颜色

image-20220401033137454

margin - 外边距

标签和标签之间的距离就是外边距

1
2
3
4
5
6
【1】连写
margin:上   右  下  左;
margin:1px 2px 3px 4px;

【2】单独设置
margin-top  margin-right  margin-bottom  margin-left
  • 外边距的那一部分是没有背景颜色的
  • 默认， 水平方向上的外边距会叠加；但是垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

image-20220401042758148

margin-top问题

  • 如果两个盒子是父子嵌套关系, 设置了子盒子顶部的外边距, 父盒子也会被顶下来
  • 如果父盒子不想被一起顶下来,可以给父盒子添加一个边框border属性
  • 或者给父盒子添加一个 overflow:hidden; 属性 - 推荐
  • 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin，margin本质上是用于控制兄弟关系之间的间隙的

image-20220401053133037

margin:0 auto;问题

  • 在父子盒元素关系中，子元素设置 margin:0 auto; 可以让子元素盒水平居中。auto 可以理解为水平方向上平分剩余空间

  • 注意想要垂直居中，只能通过像素来设置，不能用 auto 。

text-align:center;和margin:0 auto;区别

  • text-align: center; 是设置盒子中存储的文字/图片水平居中

  • margin:0 auto;是让盒子自己水平居中

image-20220401060918211

盒模型宽度和高度

1.内容的宽度和高度

就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度

就是 边框+内边距+内容

1
2
元素的宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证

3.元素空间的宽度和高度

就是 外边距+边框+内边距+内容

1
2
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证

box-sizing属性

CSS3中新增了一个box-sizing属性, 这个属性取值为border-box可以保证我们给盒子新增内边距padding和边框border之后, 盒子元素的宽度和高度不变，系统会自动减去一部分内容的宽度和高度。

1
2
3
4
5
box-sizing:content-box;
默认值，元素的宽高 = 边框 + 内边距 + 内容宽高

box-sizing:border-box;
元素的宽高 = 设定的width/height的宽高，即无论设置内边距和边框多大，实际显示时系统会自动减去内容的宽高

清除默认边距

为了更好的控制合资的高度、计算盒子的宽高等等，编写代码之前第一件事就是清空浏览器默认的边距。

https://clarle.github.io/yui3/yui/docs/cssreset/

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

line-heitht

1
ling-height:10px;

  • 文字在行高中默认是垂直居中的

  • 单行文字，设置行高等于盒子高度，即可垂直居中

  • 多行文字，只能通过pandding-top padding-bottom 来让文字居中

image-20220401202632266