前端学习笔记--CSS布局--文件流定位

1.概述 2.文档流定位:从上到下,从左到右代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0;/* 去掉默认样式*/ } #nav{…

前端学习笔记--CSS布局--float定位

1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性案例: 一列三行布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">…

1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移动后: static往上移,占据box1的位置. 4.relative: box1相对于static 定位. 5.absolute: 初始位置: absolute相对于absolute移动后: 移动后: 6.一般设计方式: 案例: 区别:…

前端学习笔记--CSS布局--盒子模型

1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:…

web前端学习笔记(CSS变化宽度布局)

一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固定另一列变宽的case. 在实际的应用中,只有单列宽度变化,而其它保持固定的布局可能会更加实用.一般在存在多个…

web前端学习笔记(CSS固定宽度布局)

一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度布局</title> <style type="text/css"> #header,#pagefooter,#content { border: 1px solid red; margin:…

web前端学习笔记(CSS盒子的定位)

相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定.以下为后面实验的基准代码. <html xmlns="http://www.w3.org/1999/xhtml…

前端学习(20)~css布局(十三)

常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高). (2)positon 确定元素的位置: static:默认属性值. relative:相对定位.相对于元素本身进行偏移,不会改变它所占据的空间. absolute:绝对定位.相对于父元素中最近的 relative/absolute 进行偏移,会脱离文档流. fixed:固定定位.相对于…

web前端学习笔记(CSS盒子的浮动)

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定. 准备基础代码浮动的性质比较复杂,这里先制作一个基础的页面,代码如下.后面一系列的实验将基于下面…

前端学习 -- Html&Css -- 相对定位绝对定位固定定位

相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: relative:开启元素的相对定位: absolute:开启元素的绝对定位: fixed:开启元素的固定定位(也是绝对定位的一种). 当元素的position属性设置为relative时,则开启了元素的相对定位当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化: 相对定位是相对于元素在文…