HTML+CSS 第一阶段学习总结（一）

2016-11-27 本文已影响3893人前端develop

一、前端认知

1. 前端是做什么的？
前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。
2. 开发流程

开发流程
3. 前端开发的核心语言

HTML——结构
CSS——样式
JS——行为

二、HTML

HTML（Hypertext Markup Language）翻译过来就是超文本标记语言。

超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。

标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。

当我们将英语单词放入到标记当中，这时候我们可以称之为标签（单标签、双标签）。

HTML的基本结构

<!DOCTYPE html>
<!-- 
    文档头（类型）声明
        不是标签，代表的是 HTML 5 的标准
-->
<html>
<!--
    根元素
        所有的标签都要放在根元素中
-->
<head>
<!--
    头部
        里面包含的绝大部分内容都是不可见的，
        里面的内容主要用于辅助页面的展示
-->
    <title>页面标题</title><!-- 定义页面标题 -->
    <meta charset="utf-8"/><!-- 定义页面的元数据 -->
    <!-- chasrt="utf-8" 针对搜索引擎和解析格式的属性 -->
</head>
<body>
<!-- 
    里面包含的绝大部分在页面中都是可见的，
    主要用于搭建 HTML 结构
-->
</body>

</html>

三、CSS

CSS(Cascading Style Sheets )翻译过来就是层叠样式表。
CSS 就是用来装饰我们的 HTML 的。就像我用 HTML 写了一段文字，但是文字的颜色，文字大小，字体等等就得依靠 CSS 来修饰了。

1. CSS 的引入方式

内联样式表

<div style="width:100px;height:100px;background-color:red;"></div>

内联样式表

内部样式表
写在<head></head>内部

<head>
        <style type="text/css">
          div{
            width: 100px;
            height: 100px;
            background: red;
          }
        </style>
</head>

内部样式表

外部样式表
单独写在一个文件中，通过 link 进行引入
rel：当前引入文件和文件本身的关系
type：当前引入文件的编码格式
href：用于书写引入外部样式所处位置

<head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

外部样式表

2. CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。

CSS 选择器分为三种

标签名选择器div{width:100px;...}
会直接选择某一类标签，会针对这一类标签全部生效。
优先级：1
类选择器.div{width:100px;...}
使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
优先级：10
ID 选择器#div{width:100px;...}
使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
优先级为：100

3. 引入方式的优先级
内联>内部和外部；
内部和外部谁生效

如果选择器优先级相同的话，谁后引入谁生效。
如果选择器优先级不同，选择器优先级高的生效。

四、盒模型

在 HTML 中，万物皆是盒模型，只要是 HTML 中的标签，我们都可以通过设置盒模型相关的内容，对这个元素产生影响。

盒模型由四个部分组成，分别为 content、padding、border以及margin。如下图所示。

盒模型
1. content（盒子模型中的内容）
下面通过一个 Demo 一起来学习盒模型

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Demo

通过上面的这一段代码，我们可以在页面中看到一个宽高分别为100px的红色块。从这里可以看出，盒模型中的content不仅可以设置宽高（内联元素除外）还可以加背景。（在浏览器中按F12即可打开如上图的开发者工具）

1.1. background 的使用

background-color 设置背景颜色
属性值即是颜色值有五种写法
1. 英文如 red,yellow,blue,cyan...
2. 十六进制如 #ffffff...
3. 十六进制简写如 #fff...
4. rgb 如 rgb(255,0,255)...
5. rgba 如 rgba(255,255,255,0.5)...
background-image 设置背景图片
background-image=url("图片路径");
background-position 设置背景定位
background-position 有两个属性值，第一个一般为横向偏移量，第二个一般为纵向偏移量。如果只设置一个数值，另一个数值默认是 center。
属性值可以用：left、right、top、bottom、center 以及像素。
backfround-repeat 设置背景的重复方式
1. 默认值为 repeat 会将背景铺满整个盒模型。
2. repeat-x 背景横向平铺。
3. repeat-y 背景纵向平铺。
4. no-repeat 不重复。
background 的复合写法
书写顺序为：颜色、图片、定位、重复方式。
background-attachment 设置背景图片是否随页面滚动
background-attachment 的默认值为 scroll 即背景图片随着页面的滚动而滚动。也可以填写 fixed 即背景图片不会随着页面滚动，但是会造成偏移量，一般不使用。
接下来稍微修改一下 Demo，看一下例子。

<style>
    div{
        width: 70%;
        height: 1000px;
        background: red url("http://cdn-qn0.jianshu.io/assets/apple-touch-icons/
                    228-0765f118055a1d942fc286fb55f37773.png")center top no-repeat;
        background-attachment: fixed;
    }
</style>

Demo.gif
可以看到简书的背景图是固定不动的，将background-attachment: fixed;注释掉即可观察到偏移量了。

2. padding（盒子模型中的内边距）
还是用一个栗子来看看内边距到底是什么。

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Demo

当我的鼠标移到 div 标签上是，显示出来 div 的宽高是 300 x 300 。

这是因为我给 div 设置了 width: 100px; height: 100px;所以 div 的宽高为 100 x 100，中间那块就是 100 x 100。

另外我给 div 设置了 padding: 100px;所以 div 的上右下左四个方向都有了 100px 的内边距，为图中外面一圈所示的，因为内边距是在盒子内部的，所以内边距会把我们的盒子撑大。

所以 div 的宽为：padding-left + width+ padding-right = 100 + 100 + 100。同理 div 的高为：padding-top + height + padding-bottom = 100 + 100 + 100。

从上面的式子中可以知道 padding 是分上右下左的，我们也可以给每一个边设置不同的宽度。例如上右下左分别为 10px 20px 30px 40px 就可以这样写。

<style>
  div{
     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 30px;
     padding-left: 40px;
  }
</style>

但是这样写还是太过于麻烦了，还有一种更加简洁的写法。

<style>
  div{
    padding: 10px 20px 30px 40px;
  }
</style>

这种写法同样能够实现上右下左分别为 10px 20px 30px 40px 的内边距。
当然，padding 的属性值可以填写 1 ~ 4 个不等，不同个数的属性值所控制的方向如下图所示。

padding 属性值所对应的边

3. border（盒子模型中的边框）
在原来的基础上给 div 加上 border

  <style>
    div{
      border: 5px solid blue;
    }
  </style>

border
可以看到 border 也是算在盒模型之内的，border 同样会影响盒模型的大小。我用的是 border 的复合写法，其中包括边框的宽度、边框的样式、边框的颜色，我们也可以拆开来写。属性的写法见下图。

border
4. margin（盒子模型中的外边距）
margin 和 padding 比较相似，但是 margin 是在盒子之外的，用来控制盒子与盒子之间的位置。margin 可以设置负数。

margin 有两种特殊情况

如果两个元素是兄弟关系时，第一个元素的 margin-bottom 与第二个元素的 margin-top 产生叠压

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;

            margin: 100px;
        }
        .div_1{
            background: red;
        }
        .div_2{
            background: blue;
        }
    </style>
</head>
<body>
    <div class="div_1"></div>
    <div class="div_2"></div>
</body>
</html>

margin 的叠压
从代码上来看，红色块与蓝色块的距离应该是红色块的 margin-bottom，加上蓝色块的 margin-top，但实际上是取盒子之间最大的 margin 值。但是 margin-right 与 margin-left 就不是这样的情况。

如果两个元素是父子关系，子级第一个元素的 margin-top 会传递给父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .div_1{
            width: 300px;
            height: 300px;
            background: cyan;
        }
        .div_2{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="div_1">
        <div class="div_2"></div>
    </div>
</body>
</html>

然后给 div_2 设置 margin-top: 50px;

margin-top 的传递.png
这明明不是我想要的效果，那怎么才能够解决这个问题呢？下面一起来看一下解决办法。

给父级设置 border
给父级设置 padding
给父级设置 overflow:"hidden";

办法已经告诉你们了，具体的还得你们自己去试。

接下来看一下盒模型的实际大小的计算
横向：border-left + padding-left + width + padding-right + border-right
纵向：border-top + padding-top + height + padding-bottom + border-bottom

如果文章对你有所帮助，那么请您点一下❤
由于本人水平有限，如有错误，欢迎大家指正。如果你在操作过程中发现一些没有讲到的错误或者问题，欢迎在评论留言，一起探讨，共同学习进步！
下一篇文章利用GitHub搭建一个你的博客

HTML+CSS 第一阶段学习总结（一）

一、前端认知

二、HTML

三、CSS

四、盒模型

猜你喜欢

热点阅读