gin49sz

导航

 
HTML&CSS基础（CSS2）

1.CSS是什么

层叠样式表

样式：文字大小、背景颜色、元素宽高

层叠：一层层”叠“上去

2.样式位置

2.1行内样式

写在标签的style属性中，又称内联样式

<div style="color:red;font-size:17px">
    
</div>

2.2 内部样式

<head>
    <style>
        div{
            color:red;
            font-size:17px;
        }
    </style>    
</head>
<body>
    <div>
        xxx
    </div>
</body>

2.3 外部样式

position.css

div{
    color:red;
    font-size:17px;
}

.html

<head>
    <link rel="stylesheet" href="position.css">
</head>

2.4 样式表的优先级

行内样式的优先级 > 内部样式 = 外部样式（后面的覆盖前面的）

3.语法规范

h1				   {color:green;font-size:40px}
/*选择器Selectors    声明块(属性名，属性值)*/

3.1 代码风格

  • 展开风格——开发时推荐，便于维护和调试

    h1 {
    color: red;
    font-size: 40px;
}

  • 紧凑风格——项目上线时推荐，可减小文件体积

    h1{color:red;font-size:40px;}

4.选择器

4.1 通配选择器，元素选择器，类选择器，id选择器

  • 通配选择器（选中全部标签），主要用于清除样式

    * {
    color: red;
}

  • 元素选择器，为页面中某种元素设置统一样式

    h1 {
    color: black;
}

  • 类选择器，使用class属性名进行分类

    .container {
    color: black;
}

    <div class="container">
    
</div>

    一个标签不可以有多个class属性，但是一个class属性可以有多个属性值，相同的属性后面的会覆盖前面的

    <div class="contianer navbar">
    
</div>

  • ID选择器，不可以用数字作为开头，且多个元素的id不可以重复

    #btn-delete {
    color: red;
}

4.2 交集/并集选择器

  • 复合选择器（交集选择器）

    注意与后代选择器的区别，复合选择器两个条件之间没有空格

    p.beauty {
    color:red;
}

    <p class="beauty">
    xxx
</p>

    也可以使用类名 + 类名的复合选择器（很少用）

    .beauty.rich {
    color: blue;
}

  • 并集选择器，可以任意组合类，id和元素，关系为或

    含有rich或者beauty的class或者是p标签的标签获得以下样式

    .rich, 
.beauty,
p {
    font-size: 40px;
    background-color: red;
    width: 180px;
}

4.3 后代/子代/兄弟选择器

  • 元素之间的关系

    父元素：直接包裹某个元素的元素

    子元素：被父元素直接包裹的子元素

    祖先元素：当前元素的父元素的父元素....的父元素

    后代元素：当前元素子元素的子元素.....的子元素

  • 后代选择器

    ul的所有的li后代中的a后代

    ul li a {
    color: red;
}

    同理，类名也可以作为后代选择器

    .subject li a {
    color: blue;
}

  • 子代选择器

    仅对div元素的子代中的a标签添加样式，而对孙子代之后的都不考虑

    div > a {
    color: red;
}

  • 兄弟选择器

    对div的最近右兄弟（在div以下的标签，最靠近div的那一个）中是p标签的标签添加样式

    div + p {
    color: red;
}

    对div的全部右兄弟（在div以下的标签）中是p标签的标签添加样式

    div ~ p {
    color: red;
}

4.4 属性选择器

  • 属性选择器

    • 选中所有具有某种属性（例如name, type，也可以自定义属性）的元素

      [title] {
    color: red;
}

    • 选中某种属性值为特定值的元素（例如name="gender"）

      [title="atguigu"] {
    color: blue;
}

    • 选中某种以特定字符开头属性的元素

      [title^="a"] {
    color: red;
}

    • 选中某种以特定字符结尾属性的元素

      [title$="u"] {
    color: blue;
}

    • 选中某种包含特定字符属性的元素

      [title*="t"] {
    color: red;
}

4.5 伪类选择器

  • 伪类选择器

    不是真正的类，而是元素特殊状态的描述

    • 选中没有访问的元素

      .a:link {
    color: orange;
}

    • 选中访问过的元素

      .a:visited {
    color: gray;
}

    • 动态伪类

      未选中 -> 悬浮 -> 选中点击 -> 访问完毕

      link -> hover -> active -> visited

      link 未被访问的

      visited 被访问过的

      hover 鼠标悬浮

      active 选中激活状态的

      必须按照lvha的顺序添加，否则会出现样式被覆盖

      focus 选中焦点（只有input类有）

      input:focus {
    background-color: red;
}

    • 结构伪类

      div > p:first-child 选中div所有子元素中第一个元素，且这个元素必须是p元素，然后添加样式，搭配子类选择器使用

      div > p:first-child{
	color: red
}

      div p:firstchild 选中div后代中的第一个p元素，添加样式，搭配后代选择器使用

      div p:first-child {
 color: red;
}

      p:firstchild 任意一个父类的第一个p元素

      p:first-child {
 color: red;
}

      同理

      last-child 最后一个孩子

      nth-child(n) 第n个孩子

      ​ n=1, 2, ...（第几个） even（偶数项） odd（奇数项） n表示从第一个到最后一个

      一个例子，如何选择前五个孩子

      div > p:nth-child(-n + 5) {
    color: red;
}

      原理：-n表示从-n到0，加上5，实际上有效的项数就是1，2，3，4，5

      可以使用kn+b的格式选中特定的元素

      first-of-type 获得满足该种类型的第一个孩子

      div > p:first-of-type {
    color:red;
}

      <div>
    <span></span>
    <p></p><!--可以选中第一个p标签-->
    <p></p>
</div>

      同理

      last-of-type 获得满足该种类型的最后一个孩子

      nth-of-type(n) 获得满足该种类型的第n个孩子

      nth-last-child(n) 获得倒数第n个孩子

      nth-last-of-type(n) 获得满足该种类型的倒数第n个孩子

      only-child 获得是父元素下唯一一个孩子（该孩子没有兄弟）

      only-of-type 获得是父元素下唯一一个孩子（该孩子没有同类型的兄弟）

      empty 获得没有内容的元素div:empty，必须完全为空，空格也不行

    • 否定伪类

      选择器1:not(选择器2) 选中选择器1中不符合选择器2的元素

      并且not中可以嵌套伪类

      为div下的第一个孩子p元素除外的其他元素添加某种样式

    div > p:not(:first-child) {
    color:blue
}

    <div>
    <p></p><!--这个元素不获得样式>
    <p></p>
    <p></p>
</div>

    • checked和focus

      focus 只关注是否有焦点，而不关注是什么类型

      checked 只有选中的焦点才会生效

      例如：让一个复选框在选中时候或者某种样式

      <style>
    input:checked {
        color: red;
        width:10px;
        height:10px;
    }
</style>
...
<input type="checkbox">

      disabled 只有被禁用的input会获得样式

      enabled 只有未被禁用的input会获得样式

    • 目标伪类

      target 当地址中#的内容与当前所在的id相同，会被应用样式

      给锚点跳转的内容添加边框

      <style>
    div:target {
        border: red solide 1px;
    }
</style>
...
<a href="#target">查看div</a>
...
<div id="target">
    xxx
</div>

    • 语言伪类

      lang 指定语言类型获得样式

      给标记为英文的内容添加样式（注意是标记的内容，浏览器无法识别文字是什么语言）

      <style>
    div:lang(en) {
        background-color:red;
    }
</style>
<div>
    <p lang="en">
        this sentence is used by English
        即使有中文也会被应用样式
    </p>
</div>

4.6 伪元素选择器

  • 伪元素选择器

    选中的不是元素，是元素中一些特殊位置，所以是伪元素

    选中p中第一个文字，添加某种样式

    <style>
    p::first-letter {
        color: red;
        font-size: 40px;
    }
</style>
...
<p>
    dhsuiahdasddsadad
</p>

    first-line 选中第一行

    selection 选中被鼠标选择的内容

    placeholder 选中input中提示的内容

    before 选中元素最开始的位置，创建一个子元素

    举例：在所有class为yuan的前面增加"￥"符号

    <style>
 .yuan::before {
     content: "￥";
 }
</style>
...
<span class="yuan">139</span>
<span class="yuan">77</span>
<span class="yuan">98</span>

    after 选中元素结束的位置，创建一个子元素

    举例：清除浮动

    .clearfix::after {
    content: "";
    display: block;
    clear: both;
}

4.7 选择器的优先级

  1. 行内样式 > 内部样式 = 外部样式
  2. 后来居上，相同类型的样式，后写的，或者在class中后出现最终显示
  3. 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
  4. !important > 行内样式

一些复杂选择的结果

<style>
    .slogan {
        color: red;
    }
    .container span {
        color: green;
    }
</style>
...
<div class="container">
    <p>
        <span>xxx</span>
        <span>xxx</span>
    </p>
</div>

最终span元素获得什么样式取决于选择器的权重

格式：（a, b, c）

a：id选择器的个数

b：类、伪类、属性选择器的个数

c：元素、伪元素选择器的个数

在上述例子中，第一个选择器的权重为（0，1，0）第二个为（0，1，1）

然后比较每一位，当有一方的数字大于另一方，则该选择器优先，否则按照顺序后来者居上，通配选择器的权重为（0，0，0）

在一般IDE中（VS code、WebStorm），当鼠标放在选择器上方时候，会自动计算权值

5. CSS三大特性

5.1 层叠性

如果发生 样式冲突，会根据一定的规则进行样式的覆盖

5.2 继承

子元素会继承父或者祖先元素的一些属性，例如font-size和color

5.3 优先级

important > 行内 > ID > 类选择器 > 元素选择器 > * > 继承的样式

6.颜色

方法一、使用名称

方法二、RGB&RGBA

RGB中三个参数分别代表红绿蓝

div {
    rgb(138, 43, 226);
}

RGBA多一个参数表示透明度（范围0~1）

div {
    rgba(138, 43, 226, 0.2);
}

可以使用取色器获取屏幕上某处某个颜色faststonecapture.cn/faststonecapture

方法三、HEX和HEXA

HEX

??????前两位表示红，中间两位表示绿色，后两位表示蓝色

div {
    color: #ff0000;
}

HEXA

????????前两位表示红，然后两位表示绿色，然后两位表示蓝色，最后两位表示透明度(00表示完全透明，ff表示完全不透明)

div {
    color: #39c5bbaa;
}

方法四、HSL和HSLA

hsl(色相, 饱和度, 亮度)

色相：0deg~360deg

饱和度：0%~100%

亮度：0%~100%

div {
    color: hsl(60deg, 50%, 50%)
}

hsla(色相, 饱和度, 亮度, 透明度)

div {
    color: hsla(60deg, 50%, 0.678)
}

7. CSS常用字体属性

7.1 字体大小

font-size 字体大小

默认当字体大小小于12px后可以在浏览器的 设置 -> 外观 中调整浏览器接受的最小字体（默认12px），以及默认的正常文字大小（默认16px）

font-size具有继承性

body {
    font-size: 20px;
}

body中的所有内容默认都会有20px的font-size

7.2 字体族

font-family 字体族

例子：微软雅黑、楷体、宋体、华文彩云

可以通过,构建一个字体族，多个字体从第一个开始检测，有则使用，无则查询下一个

body {
    font-family: "华文彩云", "楷体"
}

字体分类：

衬线字体serif（也是一种字体属性，表示当前计算机中的第一个衬线字体）

例如楷体，宋体（笔画开始、结束的地方有额外的装饰）

非衬线字体（优先使用）sans-serif（也是一种字体属性，表示当前计算机中的第一个非衬线字体）

例如微软雅黑，黑体

7.3 字体风格

font-style 字体风格

属性值 效果
normal 默认
italic 斜体（非强制，该字体有倾斜风格就用，没有就正常）
oblique 斜体（强制）

7.4 字体粗细

font-weight 字体粗细

属性值 效果
normal 正常
lighter 细
bold 粗
100~1000 自定义粗细

字体粗细中，100300表示lighter，400500表示normal，600一级以上为bold

7.5 字体复合属性

font 字体复合属性

最后两位必须按照字体大小、字体族的顺序写

body {
    font: bold italic 100px "华文彩云";
}

7.6 文本间距

letter-spacing 字符间隔

body {
    letter-spacing: 10px;
}

word-spacing 单词间距（对中文不起作用）

7.7 文本修饰属性

text-decoration 文本修饰

属性值：

underline 下划线 标签ins自带

overline 上划线

line-through 删除线 标签del自带

none 没有线（可以删除超链接下的下划线）

并且可以修改划线的样式

dotted 虚线

wavy 波浪

并且可以修改颜色（三者顺序无所谓）

p {
    text-decoration: underline dotted red;
}

7.8 首行缩进

text-indent 首行缩进

body {
    text-indent: 40px;
}

7.9 文本对齐

text-align 文本对齐

属性值

left 居左

center 居中

right 居右

7.10 行间距

line-height 行间距（本质设置的是行高）

注意不要将line-height和font-size设置为一样的值，否则字体之间行间距会变成0，应该让line-height在font-size的1.5~2倍

或者也可以直接给line-height设置百分比（最常用）

body {
    line-height: 150%;
}

行间距是可以继承的，所以如果出现对某个字的大小修改遮挡其他字，可能是因为包裹这个字的容器（例如span）出现了继承行高，需要添加一个line-height来修改高度（其实是在父容器的line-height基础上增加的值）

p {
    line-height: 40px;
}
span {
    font-size:200;
    line-height:300
}

实际上最后span的行高是340

或者使用数字代替像素值

p {
    line-height: 1.5;
}
span {
    font-size: 200px;
}

span会直接继承p的行高，且 用在自己的font-size上，最终span的行高就是300px

关于height，如果没有设置值，那么实际上的高度就是行高×行数，所以说，当设置的line-height为0px的时候，实际上height也会变成0，那么背景色也就消失了

例子：如何实现单行句子垂直居中和水平居中？

div {
    line-height: 100px;
    height: 100px;
    text-align: center;
}

例子2：如何实现单行句子居右下角（仅限中文，英文line-height在此基础上再减去一定的值）

div {
    font-size: 20px;
    height: 300px;
    line-height: 580;
    text-align: right;
}

7.11 移动基线

在前面无论是调整字体大小还是调整高度或者行距，都不会修改字符的基线条，如果要让一个字符在行内的上方或者下方，则需要用到vertical

vertical-align 垂直方向

属性值 参考都父元素的行高

baseline 默认值

top 顶端对齐

middle 行中线与父元素中的x交点对齐

bottom 底端对齐

注意：

  1. vertical-align控制的是父元素中的子元素，所以直接给包裹文字的标签添加样式不会有效果

  2. vertical-align只对行内元素有效果，如果子元素是块级元素例如div则不能控制

  3. vertical-align不可以用在div上，但是可以用在单元格上，例如给td添加vertical-align: top;的样式，单元格内的文字就会在上方

8.列表相关属性

list-style-type 列表符号类型

属性值

none 删除列表前缀符号（最常用）

square 方块

lower-roman 小写罗马数字

upper-roman 大写罗马数字

decimal 数字

list-style-position 列表符号位置

属性值

inside 列表符号在单元元素盒子内部

outside 列表符号在单元元素盒子外部

list-style-image 自定义列表符号

ul {
    list-style-image: url("../static/image/xx.png");
}

list-style 符合属性

顺序无固定要求

9. 表格相关属性

9.1 通用属性

border-width 边框宽度

border-color 边框颜色

border-style 边框样式（solid、dashed、dotted、double）

border 复合属性

table {
    border: 2px green solid;
}
td, th {
    border: 2px orange solid;
}

边框相关的属性也可以用在其他元素上面，例如div等

9.2 独有属性

table-layout 控制表格列宽

属性值

auto 默认效果，根据内容字数

fixed 全部相等

控制某一列宽度，可以给对应的th加一个自定义的width

border-spacing 控制单元格之间的间距

border-class 合并单元格

属性值

separate 默认，不合并边框

collapse 合并边框，单元格的颜色会覆盖表格外边距

empty-cells 控制空单元格

属性值

hide 隐藏（在separate下能生效）

caption-side 设置表格标题位置

属性值

top 默认值，顶部

bottom 底部

10. 背景相关

background-image 使用图片作为背景

div {
    background-image: url("../static/image/xx.png");
}

background-repeat 设置背景图片重复方式

属性值

repeat 重复

no-repeat 不重复

repeat-x 水平重复

repeat-y 垂直重复

background-position 设置背景图片位置

属性值

left top 默认左上角

right top 右上

left bottom 左下

right bottom 右下

left center 左中

right center 右中

center center 中央

可以只写一个属性值，另一个默认就是center

也可以使用具体的数值，第一个代表距离左侧，第二个代表距离上侧

background 复合属性

属性值没有顺序要求，但是如果没有给对应的属性设置一个值，默认的属性会覆盖该样式中的例如background-color等样式

div {
    background-color: blue;
    background: url(../static/image/yy.jpg) no-repeat 70px 100px;
}

蓝色会被下面的默认背景色覆盖，最终背景色是transparent，即透明

div {
    background: url(../static/image/yy.jpg) no-repeat 70px 100px;
    background-color: blue;
}

这样不会被覆盖

11.鼠标相关

cursor 设置鼠标在元素上的样式

属性值

move 拖动样式

wait 等待样式

crosshair 十字架

pointer 点击

......（更多见MDN）

可以在属性值前加上图片的url自定义样式

div {
    cursor: url(../static/image/xx.png) pointer;
}

12. 长度单位

px 像素

em font-size的值（font-size是可以继承的，如果当前元素没有，会先找
父元素的，如果都没有，会根据默认的值16px来设置）

rem 根元素的font-size，即html标签的的

百分比 根据父元素的对应属性值进行设置

#d4 {
    width: 200px;
    height: 200px;
    font-size: 20px;
    background-color: gray;
}
#d4 .inside {
    width: 50%;
    height: 25%;
    font-size: 150%;
    background-color: orange;
}

13. 元素的显示模式

display 显示模式

属性值

block 块级元素

html body

h1 h2 hr p pre div

ul ol li dl dt dd

table tbody thead tfoot tr caption

form option

inline 行内元素

br em strong sup sub del ins a label span

inline-block 行内块元素

img td th input textarea select buttton iframe

none 隐藏元素

14.盒子模型

盒子模型

14.1 盒子内容区

min-width 最小宽度，当父元素的宽度大于其时候，该元素充满行，否则最小为设定的值

min-height 最小高度，内容高度大于时候，按照内容的最小高度，否则最小为设定的值

max-width

max-height 与上述同理

如何解决外边距塌陷问题

如何解决外边距塌陷的问题？

如果在一个块元素中定义一个块元素，二者的margin可能会合并在一起，例如给父元素增加一个10px的外边距，给子元素添加一个20px的外边距，结果可能二者一共只有一个10px的外边距，且子元素紧挨着父元素上端

解决方法

方案一：给父元素添加1px透明边框

方案二：给父元素添加overflow: hidden属性

14.2 默认宽度

默认情况下，body中的子元素宽度没有设置就是占满整个body宽，但是如果给元素加上margin，元素的宽度会变化，如果加上border和padding，那么content的宽度也会变化

14.3 盒子内边距

修改盒子的内边距，盒子的实际宽度＝设定的width + 两侧的padding

padding 符合属性

属性值

一个值 四个方向的值

两个值 第一个表示上下，第二个表示左右

三个值 第一个表示上，第二个表示左右，第三个表示下

四个值 第一个表示上，第二个表示左，第三个表示右，第四个表示下

行内元素的padding

行内元素可以设置左右padding，但是慎用设置上下padding，上下padding不会占据位置，即其他元素会默认这个高度不存在，可能导致重叠

14.4 盒子边框

border-width 边框宽度（默认情况下边框宽度是3，但由于操作系统的缩放，显示可能是2.4或者更低）

border-color 边框颜色

border-style 边框样式

同时，每个样式还有对应位置的不同

border-left-width 左边框宽度

border-top-color 上边框颜色

...

border-left 左边框符合属性

...

border 符合属性

div {
    border: 1px 2px 3px 4px solid dashed double dotted green blue red orange;
}

14.5 外边距

margin 外边距

上、右、下、左

div {
    margin: 10px 20px 30px 40px;
}

遵循：上、右、下、左

注意：

行内元素可以设置左右的margin，但是上下margin不生效

注意2：

当给一个元素设置左margin为auto时候，其会紧紧贴着父元素右侧，即左侧的margin要多宽有多宽

div {
    mragin-left: auto;
}

当给一个元素的左右margin都设置为auto，这个元素会在父元素中居中

div {
    margin-left: auto;
    margin-right: auto;
}

通常写作

div {
    margin: 0 auto;
}

注意3：

margin的值也可以为负数

当margin的值为负数，其会覆盖上侧的元素

14.6 margin塌陷问题

在一个有多个块元素的父元素中，如果给贴着父元素上端第一个块设置margin-top，或者给贴着父元素下端的最后一个块设置margin-bottom，这些样式都会变成父元素的样式

如何解决？

方法一、给父元素设置边框

方法二、给父元素设置padding

方案三、给父元素设置overflow: hidden（溢出之后的显示模式：隐藏）

14.7 margin合并问题

上下两个元素之间的margin，会取比较大的一个作为二者之间的实际margin，这种情况即margin的合并问题

解决方法：不解决，修改对应的margin值规避即可，非要解决例如使用float等属性，会修改布局影响其他元素

15. 处理内容的溢出

当代码太长，使用VScode的格式化文档功能即可一键格式化

使用方法：

右键 -> 选择格式化文档

对于溢出内容的处理，需要在容器上添加对应的属性

overflow 溢出处理

属性值

hidden 隐藏

visible 显示（默认）

scroll 添加滚动条

auto 根据内容决定是否有滚动条

也可以根据横向和纵向分别设置

overflow-x

overflow-y（不可以一个是hidden一个是visible，并且是实验性功能不建议使用）

16. 隐藏元素的两种方式

16.1 方法一、display

设置display的格式为none即可隐藏元素（不占位）

16.2 方法二、visibility

设置visibility的属性值

visibility 元素可视性（占位）

属性值

show 显示（默认）

hidden 不显示

17. 样式的继承

会继承的css样式

字体属性、文本属性、文字颜色等等（vertical-align不会继承）

不会继承的css样式

边框、背景、内边距、宽高、溢出方式

规律：

继承的属性不会影响布局，即与盒子模型没有关系的

17.样式继承

全部都有的情况下，从上到下依次是内联样式，内部样式，外部样式，默认样式，继承样式

18.默认样式

默认样式的级别高于继承样式

例如：给a标签的父元素修改color，这个颜色不会被继承，因为a标签有自己的初始颜色，这个颜色优先级高于继承样式

19.布局小技巧

19.1 块元素水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: chartreuse;
        }
        .box .element {
            width: 200px;
            height: 200px;
            background-color: bisque;

            margin: 150px auto;/*计算上下边距*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element"></div>
    </div>
</body>
</html>

19.2 行内、行内块元素水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: chartreuse;
            text-align: center;
            line-height: 500px;
            font-size: 30px;
        }
        .box .element {
            background-color: bisque;
			/*如果是行内块，这里要加上vertical-align: middle;*/
        }
    </style>
</head>
<body>
    <div class="box">
	    这是没有span的文字<span class="element">这是一段文字</span>
    </div>
</body>
</html>

19.3 让图片完全垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: chartreuse;
            text-align: center;
            line-height: 500px;
            font-size: 0;

        }
        .box .element {
            background-color: bisque;
            font-size: 20px;
            vertical-align: middle;
        }
        img {
            width: 200px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="element">这个图片垂直居中</span>
	    <img src="图片.png" alt="">
    </div>
</body>
</html>

20. 元素之间的空白问题

行内元素在换行的时候，浏览器在渲染会自动为两个元素之间添加一个空格

方案一、去掉换行和空格

方案二、给父元素设置font-size: 0;，再给需要显示文字的元素单独设置字体大小

21.行内块的幽灵空白问题

一个行内块元素如果是图片的时候，当父元素没有设定高度时候，底部会默认有一条细细的缝隙，这个缝隙来源于默认行内块元素是与基线对齐的

方案一、给行内块元素添加vertical-align属性，注意属性值不可以是baseline

方案二、给行内元素修改display为block

方案三、给父元素的font-size设置为0

22. 浮动

浮动早期的效果：制作文字环绕图片或者文字环绕文字

现在的作用：布局（现在多用弹性盒子）

给一个元素添加浮动后的效果：

  • 这个元素会浮在上层

  • 原本布局中位于该元素下方的会跑到该元素的位置

  • 被该元素遮挡的元素，其中的文字会呈现环绕该元素的状态

  • 默认的特点会被浮动所覆盖（例如块的独占一行等）（脱离文档流 ）

  • 可以设置margin和padding，并且没有margin塌陷

  • 不会像行内块一样被当作文本处理（没有行内块的空白问题）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: aqua;
            padding: 10px;

        }
        .box .element {
            height: 50px;
            padding: 10px;
        }
        .el1 {
            background-color: chartreuse;
        }
        .el2 {
            background-color: brown;
            float: left;
        }
        .el3 {
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element el1">盒子1</div>
        <div class="element el2">盒子2</div>
        <div class="element el3">盒子3</div>

    </div>
</body>
</html>

    22浮动效果

浮动效果

22.1 浮动练习

22.1.1 浮动在四个角落（2、4不浮动撑开父元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }
        .element {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
            margin: 5px;
        }
        .el1 {
            float: right;
        }
        .el3 {
            float: right;
        }
        .el4 {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element el1">盒子1</div>
        <div class="element el2">盒子2</div>
        <div class="element el3">盒子3</div>
        <div class="element el4">盒子4</div>
    </div>
</body>
</html>

22.1.1浮动练习

22.1.2 浮动在一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }
        .element {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
            margin: 5px;

            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element">盒子1</div>
        <div class="element">盒子2</div>
        <div class="element">盒子3</div>
        <div class="element">盒子4</div>
    </div>
</body>
</html>

22.1.2浮动效果.png

22.1.3 前两个浮动在第一行，后两个在第二行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /*限制父元素的宽度*/
            width: 224px;
            background-color: gray;
            border: 1px solid black;
        }
        .element {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
            margin: 5px;

            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element">盒子1</div>
        <div class="element">盒子2</div>
        <div class="element">盒子3</div>
        <div class="element">盒子4</div>
    </div>
</body>
</html>

22.1.3浮动效果.png

22.2 浮动产生的影响‘

22.2.1 父元素塌陷

当所有的子元素都有float后，父元素的高度如果没有设置就会变成0

22.2.2 兄弟元素的影响

当给浮动元素前后添加块元素时候，如果在后面添加，浮动元素会被拽到父元素中，而在前面添加则不会，因为浮动只会影响后面的元素的排列方式，而不会影响前面的

即：

  • 对于后面的兄弟元素，会占据浮动元素之前的位置。在浮动元素的下面
  • 对于前面的兄弟元素，则没有影响

22.3 解决浮动的影响

方法一、给父元素设置高度（解决1不解决2，不推荐）

方法二、给父元素设置float（解决1解决2，但是父元素的兄弟元素会占据父元素位置，不推荐）

方法三、overflow: hidden（解决1不解决2，不推荐）

方法四、给非float的子元素添加clear: both消除左右兄弟浮动产生的影响（推荐）

方法五、定义一个clearfix样式，属性为clear:both在多个float元素后面加上一个块元素，并添加该样式即可

方法六、给父元素添加一个伪元素，内容为空，display为block，clear为both（缺点：如果最后一个元素不是float，则在最后添加的伪元素无法解决问题2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /*限制父元素的宽度*/
            width: 224px;
            background-color: gray;
            border: 1px solid black;
        }
        .box::after {
            content: '';
            display: block;
            clear: both;
        }
        .element {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
            margin: 5px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element">盒子1</div>
        <div class="element">盒子2</div>
        <div class="element">盒子3</div>
        <div class="element">盒子4</div>
    </div>
</body>
</html>

22.4 浮动案例

22.4浮动案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        /*清除默认样式*/
        * {
            margin: 0;
            padding: 0;
        }
        /*定义常用样式*/
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .container {
            width: 960px;
            margin: 100px auto 0 auto;
        }
        .container > div:nth-child(-n + 3) {
            margin-bottom: 10px;
        }

        /*头部*/
        .band > div{
            width: 200px;
            height: 80px;
            background-color: gray;

            text-align: center;
            line-height: 80px;
        }
        .band > div:nth-child(2) {
            width: 540px;
            margin: 0 10px;
        }

        /*菜单*/
        .menu {
            height: 30px;
            background-color: gray;

            text-align: center;
            line-height: 30px;
        }
        /*栏目*/
        .main > div:nth-child(-n + 2) {
            width: 370px;
            height: 410px;
        }
        .main > div:nth-child(2) {
            margin: 0 10px;
        }
        .main > div:nth-child(3) {
            width: 200px;
            height: 410px;
        }
        .column {
            background-color: grey;
            text-align: center;
            line-height: 200px;
        }
        #column1, #column2 {
            width: 370px;
            height: 200px;
        }
        #column3, #column4, #column5,#column6 {
            width: 180px;
            height: 200px;
            margin-top: 10px;
        }
        #column4, #column6 {
            margin-left: 10px;
        }
        #column7, #column8, #column9 {
            width: 200px;
            height: 130px;
            line-height: 130px;
        }
        #column8, #column9 {
            margin-top: 10px;
        }
        /*页脚*/
        .foot {
            height: 60px;
            background-color: gray;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="band clearfix">
            <div id="logo" class="leftfix">logo</div>
            <div id="banner1" class="leftfix">banner1</div>
            <div id="banner2" class="rightfix">banner2</div>
        </div>
        <!-- 菜单 -->
        <div class="menu">菜单</div>
        <!-- 栏目 -->
        <div class="main clearfix">
            <div class="leftfix clearfix">
                <div class="column leftfix" id="column1">栏目一</div>
                <div class="column leftfix" id="column3">栏目三</div>
                <div class="column leftfix" id="column4">栏目四</div>
            </div>
            <div class="leftfix clearfix">
                <div class="column leftfix" id="column2">栏目二</div>
                <div class="column leftfix" id="column5">栏目五</div>
                <div class="column leftfix" id="column6">栏目六</div>
            </div>
            <div class="rightfix clearfix">
                <div class="column leftfix" id="column7">栏目七</div>
                <div class="column leftfix" id="column8">栏目八</div>
                <div class="column leftfix" id="column9">栏目九</div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="foot">页脚</div>
    </div>
</body>
</html>

23. 定位position

23.1 相对定位

position 定位

属性值

relative 相对定位（相对于发生定位之前的位置，并没有脱离文档流）

注意：

  1. 如果给一个元素开启了定位，其层级会高于原本的标签，即无论标签先后顺序，有定位的标签如果会与无定位的标签重叠，则一定显示的是有定位的，如果都有定位，则恢复后来居上的规则
  2. 如果开启了定位，建议不要再使用margin修正位置，否则会降低代码的可阅读性
  3. 开启定位后，也可以开启float，但是仍然不建议这样做，因为二者功能是重复的，会导致代码过于冗余
  4. 相对定位的应用场景：
    • 微调元素（不会影响到其他任何元素）
    • 与绝对定位配合

修改定位的值：

top bottom left right : + 定位的值（可以是负数）

注意：

left不能和right一起设置

top不能和bottom一起设置

23.2 绝对定位

属性值

absolute 绝对定位（会脱离文档流，且不会像float一样把文字剔除）

参考点：

如果父元素有relative，则参考父元素

否则参考网页的最左上角

即，含有绝对定位的元素，其参考点是他的“包含块”

  1. 没有脱离文档流元素，包含块就是父元素
  2. 脱离文档流的元素，第一个开启定位的祖先元素（子绝父相）

注意：

  1. 绝对定位也可以与margin共同使用，但是如果使用top就只能使用margin-top，如果使用left，就只能使用margin-left（建议不要再开启定位后使用margin）
  2. 开启绝对定位后使用float会失效
  3. 使用绝对定位后的元素是”定位元素“，即默认情况下其宽和高是由内容决定的，可以给元素设置宽高，使用相对定位的元素还是原本的元素
  4. 大规模使用定位可能导致某些浏览器的崩溃

一个样例：使用定位创造一个滑动盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 224px;
            background-color: gray;
            border: 1px solid black;
            position: relative;
        }

        .element {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
        }

        .box .location {
            position: absolute;
            left: 0;
            transition: left 1s;
        }
        .box:hover .location {
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="element">盒子1</div>
        <div class="element location">盒子2</div>
        <div class="element">盒子3</div>
    </div>
</body>
</html>

23.3 固定定位

属性值

fixed 固定定位

参考点：

只有视口的左上角（），没有包含块，可以用于做冻结的窗口

注意事项与absolute一致

23.4 粘性定位

属性值

sticky 粘性定位

参考点：

离其最近的一个拥有滚动条件的祖先元素（overflow: scroll），如果都没有，body默认是有滚动行为的

注意：

  1. 粘性定位在未达到设定的位置时候不脱离文档流，到达后变成类似固定定位，是一种专门用于窗口滚动的定位方式
  2. 最常用的值是top
  3. float和margin生效，但不推荐

23.5 定位层级

定位 > 未定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位层级</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 100px;
            position: relative;
        }
        .box {
            height: 200px;
            width: 200px;
            background-color: gray;
            font-size: 50px;
        }
        .box.box2 {
            background-color: yellow;
            position: relative;
            top: -100px;
            left: 100px;
        }
        .box.box3 {
            background-color: greenyellow;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .box.box4 {
            background-color: brown;
            position: fixed;
            top: 400px;
            left: 400px;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>
    
</body>
</html>

23.5定位层级

如何自定义各个定位的层级？

z-index 调整同一水平的层级

属性值

层级数值，数值越大层级越高，同时，层级数值可以嵌套，父元素的z-index值决定子元素的层级上限；数值相同，后来者居上。

例如如果有两个div，第一个设置z-index值为1，第二个设置z-index为2，那么就算第一个div中的有个子元素z-index为999，也无法遮住第二个div中的任何元素

23.6 定位的特殊应用

问题1：开启绝对定位后，若包含块有padding，则参考位置是content的左上角吗？

答案：不是，开启绝对定位后，位置参考点是盒子模型的最左上角，即忽略padding

问题2：当一个子元素开启绝对定位后，有padding和margin，如何让其充满整个父元素的宽？

答案：给子元素设置left=0，right=0（在没有设置宽度的情况下）

.div-parent {
    height: 500px;
    background-color: gray;
}
.div-child {
    height: 100px;
    padding: 10px;
    border: 10px solid black;
    background-color: brown;
    
    left: 0;
    right: 0;
}

也可以不写高度，然后使用top=0，bottom=0使其充满整个行高

问题3：使用定位如何让子元素（块元素）垂直水平居中？

答案：

方法1：四周设置为0，通过margin=auto居中

.div-parent {
    height: 500px;
    width: 500px;
    background-color: gray;
    position: relative;
}
.div-child {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

方法二：通过子元素和父元素的宽度之比来调整（不推荐）

父元素500×500，子元素100×100，要让子元素居中，则子元素距离上和左的距离占整个父元素长或者宽的40%

.div-parent {
    height: 500px;
    width: 500px;
    background-color: gray;
    position: relative;
}
.div-child {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: absolute;
    top: 40%;
    left: 40%;
}

方法三，设置左和上距离为50%，然后通过负的margin（应该是负的子元素的长度和宽度的一半）来往回拉

.div-parent {
    height: 500px;
    width: 500px;
    background-color: gray;
    position: relative;
}
.div-child {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

24.版心

对于不同的显示器有不同的屏宽，应该如何处理尽可能保证显示效果相似？

使用版心

中央位置留下960 ~ 1200的宽度作为整个页面的主体

一般命名：container

或者使用响应式布局，当窗口的宽度改变时候，修改样式以适应不同的个布局

25. 类名

位置
顶部导航条 topbar
页头 header、page-header
导航 nav、navigator、navbar
搜索框 search、search-box
横幅、广告、宣传图 banner
主要内容 content、main
侧边栏 aside、sidebar
页脚 footer、page-footer

26. 重置默认样式

方案一、使用全局选择器（不推荐）

* {
    margin: 0;
    padding: 0;
    ......
}

方案二、使用reset.css

选择具有默认样式的元素，清空具有默认的样式

方案三、使用Normalize.css

Normalize.css是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式

下载地址：Normalize.css：使浏览器更一致地呈现所有元素。 (necolas.github.io)

相对于reset.css，normalize.css有更多的优点

  • 保护有价值的默认样式
  • 为大部分HTML元素提供一般化样式
  • 新增HTML5元素设置
posted on 2024-04-14 10:40  树深时见鹿nnn  阅读(10)  评论(0)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 树深时见鹿nnn
Powered by .NET 9.0 on Kubernetes