html与css-big

01、盒子模型

概述

**盒子模型分为两种，一种是标准盒子模型，也就是W3C标准盒子模型；另一种是怪异盒子模型，也就是IE盒子模型。盒模型由四个部分组成，分别是content、border、padding、margin。两者主要区别是内容的组成部分不同，标准盒子模型的内容部分由width和height组成；怪异盒子模型的内容部分由width、height、border和padding组成。

表达式

W3C标准盒模型 = (width+height) +border+padding+margin。 怪异盒子模型 = (width+height+border+padding) +margin。**

02、行内元素、行内块元素、块级元素和空元素

特点

行内元素：不独占一行，且设置宽高无效 行内块元素：不独占一行，设置宽高有效 块元素：独占一行，设置宽高有效

元素间转换

display: inline;转换成行内元素 display: inline-block;转换成行内块元素 display: block;转换成块元素

行内元素 inline 概述

行内元素设置宽高无效，但可以与其他行内元素位于同一行，行内元素一般不可以包裹块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

特点

1、不会独占一行，相邻的行内元素会排列在同一行，直到一行排不下才会自动换行，其宽度随元素的内容而变化。 2、外边距和内边距仅设置左右方向有效，上下方向无效。 3、设置行高有效，等同于给父级元素设置行高。 4、元素的宽度就是它包含的文字或图片的宽度，不可改变。 5、行内元素中不能放块级元素，a链接里面不能再放链接。

常用行内元素

a标签、span标签、b标签、i标签、em标签、br标签等。

更多行内元素

<a> // 标签可定义锚 <abbr> // 表示一个缩写形式 <acronym> // 定义只取首字母缩写 <b> // 字体加粗 <bdo> // 可覆盖默认的文本方向 <big> // 大号字体加粗 <br> // 换行 <cite> // 引用进行定义 <code> // 定义计算机代码文本 <dfn> // 定义一个定义项目 <em> // 定义为强调的内容 <i> // 斜体文本效果 <kbd> // 定义键盘文本 <label> // 标签为 input 元素定义标注（标记） <q> // 定义短的引用 <samp> // 定义样本文本 <select> // 创建单选或多选菜单 <small> // 呈现小号字体效果 <span> // 组合文档中的行内元素 <strong> // 加粗 <sub> // 定义下标文本 <sup> // 定义上标文本 <textarea> // 多行的文本输入控件 <tt> // 打字机或者等宽的文本效果 <var> // 定义变量

行内块元素 inline-block 概述

行内块级元素既有块级元素的特点，也有行内元素的特点，它可以自由设置元素的宽高，也可以在一行中放置多个行内块级元素。

特点

1、行内块元素的高度、行高、外边距和内边距都可以控制。 2、默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的font-size: 0;，才会消除间隙。

常用行内块元素

img标签、input标签、button标签、select标签等。

更多行内块元素

<button> // 按钮 <input> // 输入框 <textarea> // 文本域 <select> // 选择框 <img> // 图片

块级元素 block 概述

块级元素有自己的宽高，也就是自定义width和height。除此之外，块级元素独占一行，一般可以作为容器使用，可容纳行内元素、行内块元素和块级元素。

特点

1、每个块级元素都是独自占一行。 2、高度，行高，外边距以及内边距都可以控制。 3、元素的宽度如果不设置的话，默认为父元素的宽度。 4、多个块状元素标签写在一起，默认从上至下排列。

常用块级元素

div标签、p标签、li标签、ol标签、ul标签、h标签等。

更多块级元素

<address> // 定义地址 <caption> // 定义表格标题 <dd> // 定义列表中定义条目 <div> // 定义文档中的分区或节 <dl> // 定义列表 <dt> // 定义列表中的项目 <fieldset> // 定义一个框架集 <form> // 创建 HTML 表单 <h1> // 定义最大的标题 <h2> // 定义副标题 <h3> // 定义标题 <h4> // 定义标题 <h5> // 定义标题 <h6> // 定义最小的标题 <hr> // 创建一条水平线 <legend> // 元素为 fieldset 元素定义标题 <li> // 标签定义列表项目 <noframes> // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 <noscript> // 定义在脚本未被执行时的替代内容 <ol> // 定义有序列表 <ul> // 定义无序列表 <p> // 标签定义段落 <pre> // 定义预格式化的文本 <table> // 标签定义 HTML 表格 <tbody> // 标签表格主体（正文） <td> // 表格中的标准单元格 <tfoot> // 定义表格的页脚（脚注或表注） <th> // 定义表头单元格 <thead> // 标签定义表格的表头 <tr> // 定义表格中的行

空元素 void 概述

空元素表示没有内容的html元素。

特点

1、没有闭合标签。

常用空元素

input标签、img标签、hr标签等。

更多空元素

<hr /> // 横线 <img /> // 图片 <input /> // 输入框 <link /> // 样式引入 <meta /> //

元素类型转换 display

1、display: block;定义元素为块级元素 2、display: inline;定义元素为行内元素 3、display: inline-block;定义元素为行内块级元素

相关链接 1、掘金-CSS中 块级元素、行内元素、行内块元素区别

03、CSS选择器

选择器类型

序号 选择器类型 选择符 值 1 内联样式 – 1000 2 id选择器 #xxx 100 3 class选择器 .xxx 10 4 属性选择器 – 10 5 伪类选择器 – 10 6 标签选择器 – 1 7 伪元素选择器 – 1 8 全局选择器 – –

选择器优先级

内联样式 > id选择器 > class选择器、属性选择器、伪类选择器 > 标签选择器、伪元素选择器 > 全局选择器

04、CSS选择符

选择符

1、元素（标签）选择符：body { border: 1px solid red; } 2、id选择符：#box { width: 67px; } 3、类选择符：.box { font-size: 24px; } 4、通配选择符：* { padding: 0; } 5、相邻兄弟选择符：.txt + p { color: red; } 6、分组选择符：a, .b, #c { font-weight: 600; } 7、伪类选择符：链接伪类、焦点伪类和目标伪类 8、伪元素选择符：--- 9、子代选择符：ol > li { CSS } 10、后代选择符：.red p { CSS } 11、随后兄弟选择符：.txt ~ p { color: red; }

相关链接 1、掘金-CSS选择符的使用

05、CSS中哪些属性可以继承

常见可继承CSS属性

font-size、font-weight、color、text-align等属性。

更多可继承CSS属性

分类 属性 字体属性（font） font-size font-weight font-family font-variant font-stretch 文本属性 color text-align text-shadow text-indent line-height direction word-spacing letter-spacing text-transform

原文链接 1、掘金-css属性哪些可以被继承

06、实现水平及垂直居中的几种方式 07、如何显示/隐藏一个DOM元素 08、用纯CSS实现一个三角形 09、如何理解script标签中的async、defer属性 -----------已废弃----------- 1、盒模型

1.1、盒模型由四个部分组成，分别是margin，border，padding，content。 1.2、标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。 1.3、标准盒模型的width和height属性的范围只包含了content。 1.4、IE盒模型的width和height属性的范围包含了border、padding和content。可以通过修改元素的box-sizing属性来改变元素的盒模型。 1.4.1、box-sizeing: content-box;表示标准盒模型，也是默认值。 1.4.2、box-sizeing: border-box;表示IE盒模型，也称怪异盒模型。

2、css3中的新特性

2.1、圆角 （border-radius: 8px;） 2.2、多列布局 （multi-column layout） 2.3、阴影和反射 （Shadoweflect） 2.4、文字特效 （text-shadow） 2.5、文字渲染 （Text-decoration） 2.6、线性渐变 （gradient） 2.7、旋转 （transform）

3、浮动 3.1、出现浮动的原因

浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

3.2、关于css的定位机制

普通流，浮动，绝对定位（position：fixed;是position：absolute;的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。

3.3、浮动带来的问题

1、父元素的高度无法被撑开，影响与父元素同级的元素。 2、与浮动元素同级的非浮动元素（内联元素）会跟随其后。 3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

3.4、清除浮动的方式

1、父级div定义height。 2、最后一个浮动元素后加空 div 标签 并添加样式clear: both;。理论上能清除任何标签，但是增加了无意义的标签。 3、包含浮动元素的父标签添加样式overflow: hidden;或auto;。 4、父级 div 定义 zoom。空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom: 1;用于兼容IE。 5、用after伪元素清除浮动。用于非IE浏览器。

3.5、实现及原理 3.5.1、父级div定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题 优点：简单，代码少，容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用

<div class="parent_element_box"> <div class="float_element_left">内容一 height: 23px; line-height: 23px; } .float_element_left { float: left; } .float_element_right { float: right; } 

3.5.2、结尾处加空 div 标签 clear: both

原理：添加一个空div，利用css提供的clear:both;清除浮动，让父级div能自动获取到高度 优点：简单，代码少，浏览器支持好，不容易出现怪问题 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

<div class="div1"> <div class="left">Left border: 1px solid red; } .div2 { background: #800080; border: 1px solid black; height: 100px; margin-top: 10px; } .left { float: left; width: 20%; height: 200px; background: #ddd; } .right { float: right; width: 30%; height: 200px; background: #c0a16b; } /*1.结尾处加空div标签 clear:both */ /*清除浮动代码*/ .clearfloat { clear: both; } 

3.5.3、父级 div 定义 overflow: hidden

原理：必须定义width或zoom: 1;，同时不能定义height，使用overflow: hidden;时，浏览器会自动检查浮动区域的高度 优点：简单，代码少，浏览器支持好 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏 建议：只推荐没有使用position或对overflow: hidden;理解比较深的朋友使用

<div class="divcss5"> <div class="divcss5-left">left浮动 width: 400px; border: 1px solid #f00; background: #ff0; // overflow: hidden; } .divcss5-left,
.divcss5-right { width: 180px; height: 100px; border: 1px solid #00f; background: #fff; } .divcss5-left { float: left; } .divcss5-right { float: right; } 

3.5.4、父级div定义伪类 :after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持 建议：推荐使用，建议定义公共类，以减少CSS代码 (1) 在子元素后添加一个空div div{ clear: both; } (2) 在父元素中{ overflow: hidden|auto; zoom: 1 } (3) :after伪选择符，在父容器的尾部自动创建一个子元素

.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } 

clearfix是父容器的class名称，content: 020;是在父容器的结尾处放一个空白符。 height: 0;是让这个这个空白字符不显示出来，display: block; clear: both;是确保这个空白字符是非浮动的独立区块。 :after选择符IE6不支持，添加一条IE6的独有命令zoom: 1;就行了。

4、web布局方式 4.1、文档布局（text） 4.2、浮动布局（float） 4.3、定位布局（position） 4.4、流式布局（streaming） 4.5、弹性布局（rem/em） 4.6、自适应布局（adaptation） 4.7、响应式布局（ BootStrap） 4.8、原文链接

1、知乎-web常见的五种前端布局方式 2、CSDN-web常见的五种前端布局方式