绝对定位 | 易学教程

CSS的三种布局机制（标准流、浮动、定位）

阅读更多关于 CSS的三种布局机制（标准流、浮动、定位）

CSS的三种布局机制普通流（标准流）普通流中主要分为两个板块，一个是块级元素，一个是行内元素块级元素块级元素的特点就是独占一行，从上到下顺序排列块级元素： div、hr、p、h1~h6、ul、ol、dl、form、table、... 行内元素行内袁术会按照顺序从左到右的顺序排列，直到父元素的宽度不足会换行行内元素： span、a、i、em、... 浮动：Float 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。我们知道想让独占一行的块级元素像行内元素那样在一排中有序的排列有两种方式第一种display: inline-block，转换为行内块元素，但是有个缺陷就是每个行内块元素之间都会有空白间隙第二种就是我们现在要说的浮动，浮动的特点脱标：脱离标准流，浮于标准流的上面不占位置：浮动的元素是不会占用标准流的位置的，也就是说当一个盒子浮动了之后，其下的空间会被其他标准流元素占用，位于浮动元素下面改变display属性：float属性会改变元素display属性，任何元素都可以浮动。浮动元素会生成一个块级框，生成的块级框和我们前面的行内块极其相似。但是是紧密贴在一起的，不会像行内快那样有间隙。在定位后面统一详细说明。浮动的应用一般我们的网页的布局就是标准流 + 浮动 + 定位完成的浮动和标准流的父盒子搭配因为浮动脱标

css中定位的用法

阅读更多关于 css中定位的用法

定位定位（position）：用来检索或者设置元素的定位方式（改变元素位置的属性） position的属性值有static、absolute、relative、fixed、sticky 注:使用了定位属性margin:auto会失效。使用定位的步骤 1:给元素添加position属性 2:寻找参照物 3:添加坐标(四坐标:top、bottom、left、right) 静态定位(static) position的默认值，默认文本流的状态。不会识别left right top bottom指定的坐标注:加了静态定位等于无作用，默认值不识别坐标。如下图绝对定位(absolute) 1: 参照物：按照已经有定位的父元素进行位置的变化。 2: 假如当前没有父元素或者父元素没有定位的情况下，以整个文档为参照物。 3: 绝对定位，脱离文档流、不占据空间注:此图父子元素都用了绝对定位,根据坐标进行了移动。相对定位(relative) 1 : 参照物：自身默认的位置！ 2 : 始终占据空间，不会破坏文档流注:以下两图可做对比固定定位(fixed) 1 : 参照物：浏览器窗口 2 : 脱离文本流，不占据空间注：比较下面两图可知红色盒子固定位置了！黏性定位(sticky) 1:position:relative 和 position:fixed的结合。 2:页面没超出窗口范围

css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

阅读更多关于 css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

一、上中下左固定 - fixed+margin 概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<

css定位属性

阅读更多关于 css定位属性

定位（position）定位是CSS里很重要的一个属性，作用：检索或者设置元素的定位方式（改变元素位置的属性）其中有很多的属性值也有很多今天就先讲五种定位： 1. static 静态定位: static 静态定位是position的默认值,默认文本流的状态，不会识别left right top bottom值指定的坐标。 2. absolute 绝对定位： a : 参照物：按照已经有定位的父元素进行位置的变化。 b : 假如当前没有父元素或者父元素没有定位的情况下，以整个文档为参照物。 c : 绝对定位，脱离文档流、不占据空间。 d : 可以识别 left right top bottom值指定的坐标。 3. relative 相对定位： a : 参照物：自身默认的位置。 b : 始终占据空间，不会破坏文档流。 c : 可以识别 left right top bottom值指定的坐标。 4. fixed 固定定位： a : 参照物：浏览器窗口。 b : 脱离整个文本流。不占据空间。 c : 可以识别 left right top bottom值指定的坐标。 5. sticky 粘性定位： position:relative 和 position:fixed的结合。如果页面没超出窗口范围，按照relative 执行，如果内容超出窗口位置，按照fixed执行。可以识别

Css定位属性position使用

阅读更多关于 Css定位属性position使用

Position 有四个属性值用来确定定位方式分别是： static（静态定位，position默认值）；absolute（绝对定位）；relative（相对定位）；fixed（固定定位）；sticky（粘性定位）。用法： absolute（绝对定位）根据父元素定位使用 left right top bottom指定的坐标 </head> <style> *{ margin:0; padding:0; } .box{ width:400px; height:200px; background:red; margin:50px auto; /* 形成参照物 */ position:absolute; } .box p{ width: 200px; height:100px; background:yellow; /* 根据父元素的定位进行位置的变化 */ position:absolute; left:20px; top:50px; } </style> <body> <div class="box"> <p>子元素</p> </d relative（相对定位）根据自身的默认位置使用 left right top bottom指定的坐标且占据空间不会破话文档流。 <style> *{ margin:0; padding:0; } .box{ width:400px; height

CSS的position属性

阅读更多关于 CSS的position属性

背景：学习前端知识，自己做页面目的：学习前端知识组网图：不涉及工具：vscode1.41.0 简介：CSS的position属性； CSS的position属性用于指定元素在网页中定位的方式，它有四种属性： static：静态定位，不开启定位； fixed：固定定位，开启定位； relative：相对定位，开启定位； absolute：绝对定位，开启定位；四种偏移量：top、right、bottom、left 实例演示一：relative相对定位和left的使用 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > love < /title > < style > body { margin: 0px ; padding: 100px ; } h1 { margin: 0px ; width: 100px ; height: 50px ; background-color: blueviolet ; position: relative ; left: 200px ; } < /style > < /head > < body > < h1 > 一沙一世界 < /h1 > < /body > < /html > 实例演示一：absolute绝对定位，

前端CSS(3)

阅读更多关于前端CSS(3)

前端基础CSS(3) 一、文本属性和字体属性（常用的） 1、文本属性　　text-align:left|right|center|justify（两端对齐，只适用于英文）; /*对齐方式*/ 　　color:色值; /*文本颜色*/ 　　text-indent:2em; /*首行缩进，建议单位用em*/ 　　text-decoration:none|underline|overline|line-through|inherit; 　　line-height:高度值; 2、字体属性　　font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300没区别*/ 　　font-family:字体; 　　a、网页中不是所有字体都能显示，因为这个字体要看用户的电脑里面装没装，比如你设置：font-family:”华文彩云”;如果用户电脑里面没有这个字体，那么就会变成宋体 ; 　　　　b、为了防止用户电脑里面没有你设置的那个字体，我们通常写多个用逗号隔开的备选字体，如：font-family: "Times New Roman","微软雅黑";备选字体可以有无数个，默认显示第一个，没有安装第一个就显示第二个，以此类推，都没装就显示宋体 ; 　　　　c、我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体

复大官网总结

阅读更多关于复大官网总结

一、使用到的技术 html5 css3 javascript jquery bootstrap 第三方jquery插件 @media实现响应式布局二、根据设计稿设计内容的宽度　　PC端设计稿宽度是1920px的，这是在设计的时候根据电脑的浏览器分辨率来定的。　　　　　　页面主体宽度（内容宽度）设置为1200px，1200px是一个比较适合PC端显示器浏览的安全内容宽度，保证在宽度大于1200px分辨率的设备下浏览页面不会出现横向滚动条，页面有banner地方的宽度就设置为100%，设置百分比的好处是可以根据屏幕分辨率的大小自动缩放。　　移动端设计稿宽度为750px,750px是iphone6的物理像素，也叫屏幕分辨率。移动端设计稿是按照设备的物理像素所给。物理像素：　　　　顾名思义，就是设备屏幕上的实际像素，也就是说这个手机被出厂造出来的时候，这个屏幕上有多少个像素点，它的物理像素就是多少；设备独立像素：　　　　也叫做逻辑像素（对于前端来说，和css像素是一样的），这个不同的设备是不一样的，在viewport为ideal-viewport模式时，如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；三、布局编写 3.1、页面整体结构 1 <!DOCTYPE html> 2 <html> 3 <head> 4

CSS BFC

阅读更多关于 CSS BFC

1、什么是BFC 　　BFC就是一种属性。这种属性可以影响元素的定位以及其兄弟元素之间的相互作用。BFC是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。中文城块级格式化上下文 BFC的布局规则如下： 1. 内部的盒子会在垂直方向，一个个地放置； 2. BFC是页面上的一个隔离的独立容器； 3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠； 4. 计算BFC的高度时，浮动元素也参与计算 5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 6. BFC的区域不会与float重叠；那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性： body 根元素；浮动元素：float 不为none的属性值；绝对定位元素：position (absolute、fixed) display为： inline-block、table-cells、flex overflow 除了visible以外的值 (hidden、auto、scroll) BFC作用：　　1、利用BFC可以消除下边距折叠。　　 <body> <div class="p"></div> <div class="p"></div> </body> 这样的两个p会发生下边距重叠

css浮动与定位

阅读更多关于 css浮动与定位

CSS的布局模型： 1.浮动模型（float）： float属性:none(默认值，不浮动) left(左浮动)； right(右浮动)； 2.清除浮动（ clear）： clear属性：left:清除左浮动； right:清除右浮动； both:清除左浮动和右浮动； CSS的定位布局：布局的定位有四种方式：（ 1）相对定位 (relative) （ 2）绝对定位 (absolute) （ 3）固定定位 (fixed) （ 4）静态定位 (static) 大体说一下前两种：（1）：相对定位的参照物：相对于偏移前的位置进行定位相对定位不会脱离正常的文档流注：relative和absolute结合使用（2）：绝对定位：绝对定位依赖于position属性，如果父元素有position属性，就相对于父元素绝对定位（r），如果父元素没有position，它就会再往上找上一级父元素，如果都没有，最后就找到body，相对于body 来源： https://www.cnblogs.com/zxbk-xz/p/12312287.html

订阅绝对定位