时间过得真快呀，从2019年11月1日开始来黑马上前端9期班上课，到现在已经把基础班课程（html、css）上完了，下面我就来讲讲我所学到的知识。
网页是什么呢，网页就是是指在因特网根据一定的规则展示特定内容的数据，就是html文件;其是由图片、文字、超链接、声音、视频等元素组成。前端人员开发代码 --- 浏览器显示代码（解析、渲染）---- 生成web页面。而HTML是超文本标记语言，不是编程语言，是用来描述网页的一种语言，是以标签格式组成的一种标记语言。
前端代码开发过程中，主要会涉及到五大浏览器：IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器、Opera浏览器，其对应的内核有IE浏览器内核：Trident内核，也是俗称的IE内核；Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；Firefox浏览器内核：Gecko内核，俗称Firefox内核；Safari浏览器内核：Webkit内核；Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核，但实际开发中移动端的浏览器使用的内核都是Webkit。由于浏览器的内核不同，解析代码时候可能会不统一，我们可以通过web标准规范各大浏览器的解析规范，达到元素最终显示的样式统一；web标准由结构标准 html、表现标准（样式标准）css、行为标准javascript。下面我来讲讲标准流、浮动、定位这三种css常用的布局方法。
标准流包括块级元素和行内元素，块级元素独占一行，从上向下顺序排列，常用的元素有div、hr、p、h1-h6、ul、ol、dl、form、table；行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行，常用元素有span、a、i、em。
浮动是让盒子从普通流中浮起来，让多个块级盒子一行显示。为什么需要浮动呢？有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局；浮动还可以改变元素标签默认的排列方式；一般情况下我们需要将块级元素在一行显示，如果使用display:inline-block; 会出现缝隙，我们处理不掉，所以在实际开发中我们常用浮动来进行布局。浮动的属性为float，取值有left、 right 。浮动有脱离标准流，在标准流中不占据位置特性；浮动元素一行显示多个特性；浮动的元素是互相贴靠在一起的（不会有缝隙）而且是顶端对齐，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐的特性；浮动以后的元素具有行内块元素的特性，默认的宽高根据内容来决定。
定位是将盒子在浏览器的某一个位置。定位是由定位模式+边偏移（方向英文更改）组成。边偏移有top、bottom、left、right属性；定位模式有静态定位：position:static;相对定位：position:relative（参照物：相对于自己去进行位置移），相对于自己为参照物进行位移，属于占位定位，盒子仍然在标准流里面，而且其是不会改变盒子的显示模式的；绝对定位：position:absolute（绝对定位的参照物默认以父级为主，如果父级没有定位，就一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照），绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；固定定位：position:fixed（参照物：电脑屏幕（可视窗口）），固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以。
绝对定位的盒子居中对齐，绝对定位和固定定位的盒子不能使用margin:auto;设置水平居中，如果想要居中我们就需要如下设置：设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中。
子绝父相，布局的时候我们一般是上下布局，如果上边的盒子用了绝对定位就会脱离文档流，就会影响下面的布局，所以我们用子绝父相，用了相对定位父级原来的位置是不会改变的；子级绝对，父级相对，父级盒子定位了，但是依然占位，不会影响其他盒子的布局；
z-index堆叠顺序，z-index是定位的z轴显示，只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；如果没有定位属性的话z-index不生效。
定位会改变display属性，相对定位不会改变盒子的显示模式；绝对定位和固定定位会将盒子的显示模式转化成具有行内块元素的特性。
|
|
收藏
淘帖
踩
