CSS - 核心技术

一、浮动float

让原来的元素，可以脱离正常的文档流，实现左右排列，不设置宽度就是最小宽度。
float 其实是类似 iOS 中的 collectionView 或者说 iOS 的collectionView 就是借鉴 float 创建的。原理可以这样理解，一个大块内包含多个小块，多个小块可以按照流水布局。
三个取值：
- none：设置对象不浮动
- left：设置对象浮在左边
  - 代码：

<!DOCTYPE html>
<html>
<head>
    <title>神奇的float</title>
    <meta charset="UTF-8">
    <style type="text/css">
    body {
        margin: 0;
    }
    .container {
        border: 1px solid blue;
        height: 300px;
        width: 250px;
    }
    div {
        height: 100px;
        float: left;
    }
    /*如果块级元素不设置宽，默认会充满这行，但是会默认有一个margin（相对的距离）,可以将body的margin设为0*/
    .first {
        background-color: red;
    }
    .second {
        background-color: blueviolet;
    }
    .third {
        background-color: orange;
    }
    .n {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="first">
            第一个div
        </div>
        <div class="second">
            第二个div
        </div>
        <div class="third">
            第三个div
        </div>
        <div class="n">
            第四个div
        </div>
    </div>
</body>
</html>

    * 效果图（外部为蓝色边框）

float2.png

- right：设置对象浮在右边
* 代码

<!DOCTYPE html>
<html>
<head>
    <title>神奇的float</title>
    <meta charset="UTF-8">
    <style type="text/css">
    body {
        margin: 0;
    }
    .container {
        border: 1px solid blue;
        height: 300px;
        width: 250px;
    }
    div {
        height: 100px;
        float: right;
    }
    /*如果块级元素不设置宽，默认会充满这行，但是会默认有一个margin（相对的距离）,可以将body的margin设为0*/
    .first {
        background-color: red;
    }
    .second {
        background-color: blueviolet;
    }
    .third {
        background-color: orange;
    }
    .n {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="first">
            第一个div
        </div>
        <div class="second">
            第二个div
        </div>
        <div class="third">
            第三个div
        </div>
        <div class="n">
            第四个div
        </div>
    </div>
</body>
</html>

    * 效果图

float-right.png

为什么说是流水布局呢？
- 如果我们不指定外部承载多个 div 的容器的宽度，那么容器会自动给一个合适的宽度，像这样
  
  float1.png
- 如果我们给外部的容器宽度设置了一个小于4个div宽度的合，那么布局就会按倒序向下排列，这个过程也称为流水。

二、定位position

relative
- 官方：即使偏移，位置还在。实质就是靠近最近的元素进行偏移，不分定位。
- 解释：可以理解为让自身元素的原点（0，0）进行偏移（左上），相对于自己移动。
absolute
- 官方：偏移了，位置就没了。靠最近的元素是 relative/absolute 定位进行偏移。
- 解释：absolute 进行偏移的时候默认先去寻找外面position属性设为 absolute 或者 relative 的元素，如果有相对它进行偏移，如果没有相对于浏览器左上角（0，0）进行偏移。
fixed:相对于浏览器的窗口的位置，没有依赖感。
- 代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
        height: 100px;
        width: 100px;
    }
        .rel {
        background-color: orange;
        /*display: inline-block;*/
    }
        .abs {
        background-color: green;
        /*display: inline-block;*/
                float: left;
    }
    .abs1{
        height: 150px;
        width: 150px;
        background-color: black;
        /*display: inline-block;*/
        float: left;
    }
    .outer{
        height: 200px;
        width: 200px;
        background-color: aqua;
        /*display: inline-block;*/
        float: left;
    }
    .fix{
        position: fixed;
        height: 100px;
        width: 100px;
        left: 20px;
        top: 30px;
        background-color: red;
    }
    </style>
</head>
<body>
<div class="fix">我不动</div>
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br>
    <div class="outer"> 
        <!-- <div class="rel"></div> -->
    </div>
    <div class="abs"></div>
    <div class="abs1"></div>
</body>
</html>

- 效果图

fixed.gif

多个 display:inline-block 的 div 元素排列，默认会下边对齐，而且中间会有间距:
- 代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
        height: 100px;
        width: 100px;
    }
    .rel {
        background-color: orange;
        display: inline-block;
    }
    .abs {
        background-color: green;
        display: inline-block;
    }
    .abs1{
        height: 150px;
        width: 150px;
        background-color: black;
        display: inline-block;
    }
    .outer{
        height: 300px;
        width: 300px;
        background-color: aqua;
        display: inline-block;
    }
    </style>
</head>
<body>
    <!-- <div class="outer">  -->
        <div class="rel"></div>
    <!-- </div> -->
    <div class="abs"></div>
    <div class="abs1"></div>
</body>
</html>

- 效果图

效果图1.png

如果想让它们无间距的上边对齐，可以全部添加float属性：
- 代码，这里其实不用设置 display 属性，只设置 float 就可以了，因为 float 也可以将块级元素转成行内元素。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
        height: 100px;
        width: 100px;
    }
    .rel {
        background-color: orange;
        /*display: inline-block;*/
    }
        .abs {
        background-color: green;
        display: inline-block;
        float: left;
    }
    .abs1{
        height: 150px;
        width: 150px;
        background-color: black;
        display: inline-block;
        float: left;
    }
    .outer{
        height: 200px;
        width: 200px;
        background-color: aqua;
        display: inline-block;
        float: left;
    }
    div.outside{
        height: 700px;
        width: 700px;
        float: left;
    }
    </style>
</head>
<body>
<div class="outside">
    <div class="outer"> 
        <!-- <div class="rel"></div> -->
    </div>
    <div class="abs"></div>
    <div class="abs1"></div>
</div>
</body>
</html>

- 效果图

效果图2.png

三、行高line-height

normal 默认。设置合理的行间距，允许内容顶开或溢出指定的容器边界。
number 设置数字，此数字会于当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距，不允许负值。
% 基于当前字体尺寸的百分比行间距，不允许负值。
inherit 规定你改改从父元素继承 line-height 属性的值。
注意：html 默认字体 16px.

四、水平居中与垂直居中

水平居中
垂直居中
示例：
- 文字居中代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    #mycenter {
        height: 400px;
        width: 300px;
        background-color: red;
        /*line-height: 300px;*/
        /*文字垂直居中,试用于一行文字*/
        text-align: center;
        /*水平居中*/
        margin-left: auto;
        margin-right: auto;
        display: table;
        /*设置居中*/
/*position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left:-150px;*/
    }
    /*#mycenter1{
        height: 300px;
        width: 400px;
        background-color: red;
        line-height: 300px;文字垂直居中,试用于一行文字
        text-align: center; 水平居中
        float: left;
        margin-left: 10px;
    }*/
    .inner{
        display: table-cell;
        vertical-align: middle;
        /*width: 300px;*/
        /*height: 100px;*/
        background-color: orange;
        text-align: center;
    }
    </style>
</head>
<body>
        <div id="mycenter">
            <div class="inner">
            啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男ttt女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是
<!-- <img src="https://www.baidu.com/img/bd_logo1.png" height="127"> -->
        </div>
    </div>
    <!-- <div id="mycenter1">
啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男ttt女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是
</div> -->
</body>
</html>

-  效果图

文字居中.png

图片居中
- 代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    #mycenter {
        height: 400px;
        width: 300px;
        background-color: red;
        /*line-height: 300px;*/
        /*文字垂直居中,试用于一行文字*/
        text-align: center;
        /*水平居中*/
        margin-left: auto;
        margin-right: auto;
        display: table;
        /*设置居中*/
/*        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left:-150px;*/
    }
    /*#mycenter1{
        height: 300px;
        width: 400px;
        background-color: red;
        line-height: 300px;文字垂直居中,试用于一行文字
        text-align: center; 水平居中
        float: left;
        margin-left: 10px;
    }*/
    .inner{
        display: table-cell;
        vertical-align: middle;
        /*width: 300px;*/
        /*height: 100px;*/
        background-color: orange;
        text-align: center;
    }
    </style>
</head>
<body>
        <div id="mycenter">
            <div class="inner">
            <!-- 啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男ttt女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是 -->
<img src="https://www.baidu.com/img/bd_logo1.png" height="127">
        </div>
    </div>
    <!-- <div id="mycenter1">
啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男ttt女女是事实上事实上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不难男男女女男男女女男男女女是事实上事实上是
</div> -->
</body>
</html>

- 效果图

图片居中.png

五、Html调色原理

HTML 的颜色表示可分两种：
- 以命名方式定义常用的颜色，如 RED。
  命名方式所包括的色中不多也不是很方便，所以较少采用。
- 以 RGB 值表示，如 #FF0000 表示 red。
  众所周知颜色是由“red”、“green”、“blue” 三原色组合而成的，在 HTML 中对于彩度的定义是采用十六进制的，对于三原色 HTML 分别给予两个十六进位去定义，也就是每个原色有 256 种彩度，故此三原色可混合成一千六百多万个颜色。

最后编辑于：2017.11.27 03:37:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 200,045评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,114评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 147,120评论 0赞 332
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,902评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,828评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,132评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,590评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,258评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,408评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,335评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,385评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,068评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,660评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,747评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,967评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,406评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,970评论 2赞 341

CSS - 核心技术

一、浮动float

二、定位position

三、行高line-height

四、水平居中与垂直居中

图片居中.png

五、Html调色原理

推荐阅读更多精彩内容