* 文档流

元素从上自下从左到右排列，即文档流

（所以一个普通的元素前面有一个向右浮动的元素，这个元素不会和这个浮动元素发生重叠，但是如果这个普通元素前面是一个向左浮动的元素，可以看到

元素会和浮动元素重叠）

* 布局种类

布局分为： 块级布局（float、多列）、行级布局、定位布局、表格布局、弹性布局、网格布局

（多列：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts）

* inline、inline-block、block元素的区别

块级元素（block）总是独占一行，从上自下排列，可以包含块级元素也可以包含行级元素

内联元素（ inline）总是在一行排列，直到一行排满再换行排列，可以包含行级元素不能包含块级元素

内联块级元素像内联元素一样排列，一行排满再换行排列，像块级元素一样，可以包含块级元素也可以包含行级元素

* 常见布局

1、三列布局：

a)  对于三列宽度都是固定的情况，可以利用position:absoult/float/display:inline-block来实现布局

b) 对于左右宽度固定，中间宽度自适应，父容器由最高的子元素撑开的情况用绝对定位和inline-block都不可行：

inline-block实现左中右三列布局，三个模块必须设置固定宽度，中间宽度无法做到自适应；

absolute，父元素高度最多只能做到由中间元素撑开，且左右两边的元素脱离了文档流。

划重点- 双飞翼或圣杯布局实现三列布局：

圣杯布局和双飞翼布局都是采用float布局，中间模块优先渲染，宽度设置为100%，自适应宽度；左右模块固定宽度，然后利用负外边距让左右两个模块布

局到合适的位置的模式创建三列布局。

划重点- 圣杯布局与双飞翼的不同之处：

     圣杯布局与双飞翼布局的不同之处在于中间元素的内容被左右两个模块挡住时的处理方式不同，圣杯布局采用的是父容器设置合适的左右padding值，然后

左右两个模块设置为相对定位，分别利用left、right来调整元素的位置。而双飞翼布局是在中间的元素的内容外面在加一层div，然后为这个div加左右margin

值，来让左右元素不遮挡中间的元素内容。

划重点- 负外边距：

     负外边距可以影响普通文档流中的元素，也可以影响浮动元素和绝对定位的元素：

负外边距对普通文档流中的元素的影响：它不同于relative定位，负外边距偏移元素之后，元素位置改变之前元素在文档中占据的空间不会保留，所以会影响其他元

素的布局；relative定位，在偏移元素之后，会保留元素之前占据的位置，所以不会影响其他元素的布局。

负外边距对浮动元素的影响与对处在普通文档流中的元素的影响一样。

负外边距对绝对定位的元素的影响，利用负外边距和绝对定位让元素水平垂直居中显示。

可以利用负外边距改变元素的宽度：

父容器设置固定宽高，子容器设置固定高度，不设置宽度，然后子元素利用负外边距可以增加容器大小，利用这一特点可以实现以下布局：

希望靠最右边的元素没有白色的空白

                  <div style="width: 430px; border: 10px solid #f00; margin-top: 20px;">

                  <ul style="height: 210px; list-style: none; overflow: hidden; margin-right: -10px;">

				<style scoped>

					li {

						float: left;

						width: 100px;

						height: 100px;

						margin-right: 10px;

						background: #000;

						margin-bottom: 10px;

			                  }

				</style>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

			</ul>

		      </div>

　　        

希望靠最右边的元素没有白色的空白，还可以将父容器宽度设置为430px，子容器宽度设置为440px，默认子容器多余的10px会被裁剪掉，但是子元素

里面的元素仍然可以并排显示。

               http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#undefined

之外的总结：

  * float浮动不越过父容器的padding值（在圣杯布局中，父容器设置了左右padding值，中间元素自适应容器宽度，没有多余的空间，左边的元素通过

margin-left偏移上去之后，右边的元素不会因为浮动自动显示在中间元素的右侧，因为没有多余的空间，所以右边的元素也需要通过margin-left设置

来偏移到中间元素的右边）

* margin-left、margin-right等margin值无论取正值还是负值，都不会把容器的padding值计算在内（一个元素在一个有padding值的父容器中，该元素利

用margin偏移的   时候不会将父容器的padding值计算在内，当一行显示不下所有元素时，剩余元素会在下一行显示，但是这些元素仍然是在父容器中，

偏移原理一样，偏移时不将父容器的padding值计算在内）

未设置margin-left:-100%

设置了margin-left：-100%

* position中的top、left等属性取正值时，如果父容器有padding，则以padding为基准。元素position默认为static，静态元素没有top、left等属性。

* position: relative可以和float一起使用

圣杯布局： https://alistapart.com/article/holygrail

2、左右布局：

3、居中对齐：

行级元素垂直居中对齐：

块级元素垂直居中对齐：

行级元素水平居中对齐：

块级元素水平居中对齐：

应用场景：

文本相对旁边的行内块级元素居中显示（在容器中居中对齐）

4、自适应屏幕高度：

（关于布局所有：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout）

让子元素的高度等于父元素的高度，子元素设置为100%，必须给html和body都设置height为100%

<html style="height: 100%;">

  <body style="height: 100%;">

    <div style="height: 100%;">

      <p>

        这样这个div的高度就会100%了

      </p>

    </div>

  </body>

</html>

多列等高

* float的理解以及清除浮动的使用

  float的理解：

浮动元素会脱离文档流，设置了浮动的元素会显示为块级布局（例如给一个行级元素设置浮动就可以为行级元素设置宽高），浮动元素会沿着容器的左侧或右侧排列，

文本或内联元素（inline或inline-block元素）会环绕浮动元素布局。

浮动元素的作用：通常利用浮动布局来水平排列元素或让文字环绕图片显示。

一个浮动元素，如果前面的元素也是一个浮动元素，且这个两个元素是在同一方向浮动，后面的元素会紧跟随前面的元素排列；如果这两个浮动元素是在两个相反

的方向浮动，那么它们分别在左右两边排列。

如果浮动元素的前面是一个处在文档流中的普通块级元素，那么这个浮动元素会在新的一行排列。

如果浮动元素后面是一个处在文档流中的普通块级元素，那么浮动元素会和后面的普通元素重叠。（这个普通元素会移动到浮动元素的左侧位置开始排列）

（关于浮动更多内容：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats）

 清除浮动：     

      1、 直接通过clear来清除，clear可以取的值有none、left、right、both、inherit。（对块级元素有效，行级元素都是围绕浮动元素显示，所以clear对行级元

素没有意义）

（clear的作用是指定一个元素是否可以在之前的浮动元素旁边或者说必须向下移动在它下面。例如：设置了clear：left 的元素旁边不能有左浮动的元素，设置了

clear：right的元素 旁边不能有右浮动的元素。

clear可以作用于浮动元素或非浮动元素，作用于非浮动元素，会将非浮动元素的边框边界移动到所有相关浮动元素的外边界下方； 当作用于浮动元素时，

会将元素的外边界移动到所有相关的浮动元素的外边界的下方。)

验证：  

          <style>

            * {

                margin: 0;

                padding: 0;

            }

            body {

                background: #989EA4;

                font-size: 62.5%;

            }

            /*.clearfix:after {

                display: block;

                content: '';

                clear: both;

            }*/

            .wrapper{ border:1px solid black; padding:10px; }

            .both { border: 1px solid black; clear: left; }

            .black { float: left; margin: 0; background-color: black; color: #fff; width:20%;}

            .red { float: right; margin: 0; background-color: red; width:20%; }

             p { width: 45%; }

        </style>

           <div class="wrapper">

               <p class="black">

                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. 
                   Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. 

               </p>

               <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. 
                Duis mattis varius dui. Suspendisse eget dolor.
              </p>

               <p class="both clearfix">This paragraph clears both.</p>

           </div>

2、 给元素设置overflow:hidden或auto

3、通过伪元素：after设置clear替代

       .clearfix:before, .clearfix:after {

                content: " ";

                display: table;
       }

        .clearfix:after {

                clear: both;

                overflow: hidden; 
       }

       .clearfix {

                zoom:;
       }

https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

为什么要清除浮动：   1、让浮动元素也能撑开容器高度；2、让浮动元素不影响其他元素的布局

三种清除浮动方式的使用场景：   1、clear作用于非浮动元素，让前面的浮动元素不影响后面元素的布局，可能希望后面的元素能够在新的一行显示。

2、overflow：hidden或auto，容器中有浮动元素，希望容器的高度能由里面的元素撑开时。

3、利用伪元素after设置clear的方式，和利用overflow清除浮动一样，可以让浮动元素撑开容器高度。

（与overflow不同的是它的原理不是将浮动元素高度计算在内 ，而是加了一个空元素将整个容器撑开，clear作用于

一个非浮动元素时，这个非浮动元素的边框边界会移动到相关浮动元素的外边界下方显示，就是这个原理）

其他：

* BFC IFC

   BFC：

     BFC即块级格式化上下文，设置为BFC元素，它的布局是独立的，元素不受外面元素布局的影响，元素的布局也不影响外面的元素。

生成BFC元素的方式： float不为none

overflow不为visible

display设为table-cell、table-caption、inline-block等

position不为static或relative

设置元素为BFC的作用： 不让元素与浮动元素重叠。处在BFC中的元素，每一个元素的左边界总是要与包含块的左边界相接触，而创建了BFC的

元素不能与浮动元素相重叠。

清除内部浮动。处在文档流中的普通元素，不会将浮动的子元素的高度计算在内，而BFC元素会将其浮动的子元素的高度

计算在内。（可以让浮动的元素，仍就可以撑开容器）

不让相邻两个元素的垂直外边距发生重叠。处在同一BFC的两个相邻的元素的垂直外边距会发生重叠的现象。

BFC元素不会和其他元素的垂直外边距发生重叠。 (垂直方向具有margin值的上下相邻的两张图片，外边距不会发生重叠，

图片默认为inline-block布局)

* 外边距重叠    

外边距的三种情况：

相邻两个元素的垂直外边距发生重叠。

处于同一文档流的两个相邻元素的垂直外部距会发生重叠现象：

当两个相邻元素的垂直外边距相等时，会合并为一个外边距；

当一个外边距的值大一个外边距的值小时，外边距为值大的哪一个；

当两个外边距都为负数时，外边距取绝对值大的那一个；

当一个为正一个为负时，外边距为两个值求和之后计算的值。

父元素与子元素的垂直外边距发生重叠。父元素与子元素处在同一文档流中。

自身没有内容填充时上下垂直边距发生重叠。

* 关于盒模型

* 可以继承和不可以继承的元素属性

  可以继承：font有关的，color、backgrond等

不可以继承：width、height、padding、margin、opacity等

* css中的各种单位

   px：绝对大小单位，相对于屏幕分辨率而言

em： 相对大小单位，相对于父元素的字体大小计算（默认1em = 16px）

rem： 相对大小单位，相对于根元素的字体大小计算

https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

* overflow的使用

* 响应式布局

   http://getbootstrap.com/css/

* background的使用

a)  可以设置背景图片的起始位置、大小、是否重复、指定初始位置的相对区域、指定背景外延的位置、背景显示的方式、背景色

background：url(), 0% 0%, repeate, fixed...

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

b)  下面两个属性可以取的值有：border-box、padding-box、content-box（inherit），分别是相当于元素边框、元素内边距、元素内容。

background-origin: padding-box （背景图为fixed显示时，此属性不起作用）
background-clip: border-box

background-attachment可以取值：fixed、scroll（默认）、local

c)  fixed相对于视口，不随着内容滚动而滚动

scroll相对于元素本身，不随着内容滚动而滚动

local相对于元素内容，如果元素有滚动机制将随着内容的滚动而滚动

1、给元素添加背景图片

给元素添加背景图片可以同时添加多张，并分别指定背景图的初始位置：

.examplethree {
       background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"),
      url("https://mdn.mozillademos.org/files/7693/catfront.png");
      background-position: 0px 0px, center;
}

* line-height的使用

1、 行高字面意思即一行文字的高度，具体的就是两行文字间基线之间的距离。

2、 可以设置的属性值有：normal、inherit、长度值（px/em）、百分比、数值

3、对于没有设置高度的块级元素而言，line-height决定其元素的高度（包含内容的元素，下面同理）

4、对于非替换行级元素（span、a等标签元素），font-size决定其元素的高度，最终元素的布局取决于父元素与子元素中行高值最大的那一个

5、对于可替换行级元素，line-height可以影响部分可替换行级元素的布局（影响高度），例如button、input等，对于img的布局没有明显影响。

一般设置行高的值采用设置数值的方式：

行高 设置成百分比，行高的值等于这个百分比乘以当前元素的字体大小，后代会继承这个最终算出来的行高值，不能自适应

行高 设置成em，行高的值等于这个设置的值乘以当前元素的父元素的字体大小（如果当前元素有字体大小则乘以当前元素的字体大小），不能自适应

行高 设置成数值， 行高的值等于这个数值乘以当前元素中的文本的字体大小，后代继承的是父元素的这个行高的数值值，可以自适应（子元素不同字体大小有不同的行高）

注： 一个没有设置高度的块级元素，高度取决于line-height，如果这个行高的值是以数值的形式设置的，则最终行高的值等于这个数值乘以元素中的文本的字体大小，这个文本的字体大小可能是由另外一层包裹的元素来决定的

* vertical-align的使用

  1、vertical-align用来调整行级元素的基线，只对行级元素有效

2、 可以取的值有：百分比、数值、normal、inherit、text-top、text-bottom、top、bottom

3、 text-bottom（text-top）与bottom（top）的区别：

一个是元素的底端与父元素字体的底端对齐，另一个是元素及其后代的底端与整行的底端对齐。

.box1{background:black; color:white; padding-left:20px; display: inline-block; line-height: 4;}

.dot1{display:inline-block; width:4px; height:4px; background:white; vertical-align: text-bottom;}

.box2{background:black; color:white; padding-left:20px; display: inline-block; margin-left: 20px; line-height: 4;}

.dot2{display:inline-block; width:4px; height:4px; background:white; vertical-align: bottom; }

　

           <span class="box1">

			<span class="dot1">

			</span>

			我是一段文字。

	    </span>

	    <span class="box2">

			<span class="dot2">

			</span>

			我是一段文字。

	    </span>

　　

　a)元素没有设置行高时表现一致：

b)设置行高之后，可以看到两者的差别：

行高增大了父元素的高度（应该说是增大了文字整行的高度所以整个高度增大了），text-bottom相对父元素字体的底部对齐，不动；bottom相对的是整行的底部对齐，父元素增高底部变化，bottom的位置随之变化。

c)   如果不要行高，直接使用height给box设置高度，表现如下：

说明设置行高时，增大的是整个一行文字的高度，vertical-align设置为bottom时，相对整行的底部定位，在最底部；而直接给box设置height高度时，增大的是父元素的高度，父元素中文字这一行的高度并没有变，所以，vertical-align设置为bottom时，不会有变化。

* ::before ::after的使用

css3之前用:来表示伪元素，css3修订后用::来表示伪元素

作用： 在元素后面或前面添加内容

1、元素内容前面添加文本：

2、元素内容前面添加图片：

content用于在:before 、:after中为元素添加内容，它除了可以在元素中添加文本、图片，还可以通过open-quote等属性给特定的文本添加引号，

通过attr属性还可以获取元素中某个属性的值，然后将读取的值添加在元素内容中：

content详细语法：

更多关于content：https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

* animation、transition、transform的区别

* 文本内容超出容器不断行问题

   默认word-break为normal，内容为数字和英文时超出容器不会断行,给元素添加word-break：break-all

更多关于word-break:

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/

 持续更新...

前端入门应该掌握的html+css知识点的更多相关文章

  1. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  2. 前端入门3-CSS基础

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  3. web前端入门：一小时学会写页面

    一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1 ...

  4. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  5. 前端入门系列之HTML

    前端入门系列之HTML 超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言.网页内容可以是:一组段落.一个 ...

  6. web前端该怎么入门?web前端入门教程(非常详细)

    初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! ...

  7. 新浪、腾讯、淘宝为何如此重视Web前端？前端入门容易吗？

    为什么新浪.搜狐.网易.腾讯.淘宝等在内的各种规模的IT企业,都对web前端越来越重视了呢?小编为您揭晓答案! web前端的由来 以前会Photoshop和Dreamweaver就可以制作网页.随着时 ...

  8. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  9. 前端学习 第五弹： CSS （一）

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

随机推荐

  1. html css input定位 文本框阴影 灰色不可编辑

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. （8）视图层参数request详解

    PS:浏览器页面请求的都是get请求 PS:post请求是通过form表单,阿贾克斯发 request里面的常用方法 def index(request): print(request.META) # ...

  3. linux之数据备份

    第一种方法:tar备份 [root@bogon ~]# cat bp/linux.txt no centos [root@bogon ~]# tar cvf bp.tar bp //打包bp目录 bp ...

  4. Properties 类的使用

    定义: 表示一个持久的集合,可以存在流中,或者从流中加载.是Hashtable子类,map集合方法都可以用. 方法的使用: /* * 集合对象 properties继承Hashtable实现了Map接 ...

  5. MySQL--时间戳与时区问题

    对于使用 timestamp 的场景,MySQL 在访问 timestamp 字段时会做时区转换,当 time_zone 设置为 system 时,MySQL 访问每一行的 timestamp 字段时 ...

  6. day6 python学习

    ---恢复内容开始--- 今日讲课内容: 1.  新内容: 字典  1.字典有无序性,没有顺序,2字典的键:key必须是可哈希的.可哈希表示key必须是不可变类型,如:数字.字符串.元组.不可变的,字 ...

  7. The Guardian’s Migration from MongoDB to PostgreSQL on Amazon RDS

    转载一片mongodb 迁移pg 数据库的文章 原文:https://www.infoq.com/news/2019/01/guardian-mongodb-postgresql The Guardi ...

  8. 高维数据的高速近期邻算法FLANN

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jinxueliu31/article/details/37768995 高维数据的高速近期邻算法FL ...

  9. MySQL联结查询和组合查询

    联结查询 1.关系表 主键:一列或一组列,能够唯一区分表中的每一行,用来表示一个特定的行 外键:为某个表中的一列,包含另一个表的主键,定义量表的关系. 2.创建联结 规定要连接的表和他们如何关联即可 ...

  10. 利用 groupby apply list 分组合并字符

    利用 groupby apply list 分组合并字符 因为需要对数据进行分组和合并字符,找到了以下方法. 有点类似 SQL 的 Group BY. import pandas as pd impo ...