绝对定位 | 易学教程

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/heitaitou/p/12263097.html

CSS Position(定位)

阅读更多关于 CSS Position(定位)

一、position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 1、static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 div.static { position: static; border: 3px solid #73AD21; } 尝试一下 » 2、fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： p.pos_fixed { position:fixed; top:30px; right:5px; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 3、relative 定位相对定位元素的定位是相对其正常位置。 h2.pos_left { position:relative; left:-20px; } h2.pos_right {

HTML学习（六）：CSS布局模型

阅读更多关于 HTML学习（六）：CSS布局模型

1. CSS布局模型清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：流动模型（Flow）浮动模型 (Float) 层模型（Layer）这三个布局模型究竟是什么布局？下面几个小节会详细给大家介绍。 2. 流动模型（一）先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 <!DOCTYPE HTML> < html > < head > < meta http-equiv = " Content-Type " content = " text/html;

CSS居中

阅读更多关于 CSS居中

一、文本居中 1、横向居中 text-aline:center; 2、单行文本垂直居中 line-height:height; 3、多行文本垂直居中盒子不设置高度，同时设置上下相同的padding； .box{ width:400px; font-size:20px; line-height:40px; padding:20px 0px; } 二、块级元素居中： 1、横向居中 ①已转块或块级： margin:0 auto; ②绝对定位（宽度定值） .box{ position:relative; } .box .son{ width:400px; position:absolute; left:50%; margin-left:-200px; } ③空间移动（宽度不定） .box{ position:relative; } .box .son{ width:400px; position:absolute; left:50%; transform:translateX(-50%);/*空间移动，水平移动*/ } 2、垂直居中 ①不设置父盒子高度，同时设置上下相同的padding，前提是块级元素和父盒子宽度都固定 .box { width: 400px; /* 子盒子垂直居中父盒子高度省略设置相同的上下padding */ padding: 100px 0; border:

CSS学习笔记——定位

阅读更多关于 CSS学习笔记——定位

1.元素的定位属性边偏移属性：left、right、top、bottom 定位模式：position：static/relative/absolute/fixed 定位=边偏移+定位模式。 2.静态定位 position:static 静态定位是所有元素的默认定位，使用静态定位，偏移量无法改变元素的位置。静态定位的主要作用是用于消除定位。 3.相对定位 position:relative 使用相对定位可以使用偏移量改变元素的位置，但是原来所占的位置，继续占有，并且每次移动的位置是以自己左上角的基点移动。注意：相对定位不脱离标准流，会占位置。 div { background-color: purple; position: relative; left: 100px; top: 150px; } 4.绝对定位 position:absolute 可以通过偏移移动位置，而且是完全脱标，不占位置。如果父级元素没有定位，那么子级元素的绝对定位以浏览器为准；如果父级有定位，那么子级元素以最近已经定位的父级元素为准，父级的定位可以是relative或者absolute，称为子绝父相或者子绝父绝。使用最多的是子绝父相。 5.子绝父相相对定位：占有位置不脱标绝对定位：不占有位置脱标在页面布局中，经常使用父级是相对定位子级是绝对定位例如：页面图片的轮播。 6

【前端】CSS定位

阅读更多关于【前端】CSS定位

初级开发者，文章有不当的地方请各位大佬指点，谢谢！ 1. 为什么要使用定位？如果我们需要实现上面的效果，使用标准流和浮动使无法实现的。但是定位就可以实现将盒子定在某一个位置自由的漂浮在其他盒子（包括标准流和浮动）的上面。浮动的盒子是压不住img这样的元素的。 2. 定位的4中分类值语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：选择器 { position : 属性值 ; } 3. 4种定位各自的特点静态定位（1）静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。（2）静态定位按照标准流特性摆放位置，它没有边偏移。（3）静态定位在布局时我们几乎不用的相对定位（1）相对定位是元素相对于它原来在标准流中的位置来说的；（2）相对于自己原来在标准流中位置来移动的；（3）原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。相对定位示例： <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 相对定位示例 </

CSS之盒模型边框，内边距，外边距，阴影，圆角

阅读更多关于 CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型盒子模型盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成；盒子里面的文字和图片等元素是内容区域；盒子的厚度我们称为盒子的边框；盒子内容与盒子之间的距离是内边距；盒子与盒子之间的距离是外边距；标准盒子模型盒子边框（border） border: border-width || border-style || border-color 属性作用 border-width 定义边框粗细，单位是 px border-style 边框的样式 border-color 边框颜色 border-style ： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线； dashed：边框为虚线； dotted：边框为点线；表格细线边框通过表格的 cellspacing="0" ，将单元格与单元格之间的距离设为 0 但是两个单元格之间的边框会出现边框，从而使边框变粗；通过设置 css 属性 table {border-collapse: collapse;} 表示相邻边框合并在一起； <style> table, th, td { border: 1px dashed #ccc; border-collapse: collspase; } </style> 内边距（padding）属性作用

2月1日学习日志

阅读更多关于 2月1日学习日志

今天着重于学习了div+css布局相关的知识: 1.css定位:相对定位(让元素相对于自己原来的位置，进行位置调整),固定定位 (页面滚动,位置不变),绝对定位. position:relative; left: 600px;　　　　//left为居左600px top: 50px;　　　　　//top为居顶50px 2.ico图标的调用与创建: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 3.版心布局: width:1190px; 　　　　/*宽度*/ margin: 0 auto;　　　　 /*居中对齐*/ 4.超链接的相关操作: /*超链接被鼠标经过时*/ a:hover{ color:#c81623; } /*取消下划线*/ a{ text-decoration:none; } 5.背景色: background-color:#020000; 6.左浮动(从左边向右) float:left; 今日疑点:1.css的层级调用关系?2.矢量图标的导入. 明日任务:初步开始学习制作app 来源： https://www.cnblogs.com/sicilya/p/12250093.html

CSS：画扇形

阅读更多关于 CSS：画扇形

来自： https://github.com/haizlin/fe-interview/issues/527 四个半圆叠加，过半调整 z-index < div class = " container " > < div class = " fan-1 " > </ div > < div class = " fan-2 " > </ div > < div class = " fan-3 " > </ div > < div class = " fan-4 " > </ div > </ div > .container { width : 200px ; height : 200px ; position : relative ; border-radius : 100% ; } div { width : 50% ; height : 100% ; position : absolute ; left : 0 ; top : 0 ; } .fan-1, .fan-3 { background : #CC9999 ; } .fan-2, .fan-4 { background : white ; } .fan-1, .fan-2 { border-radius : 100px 0 0 100px ; transform-origin : 100% 50% ; z-index :

CSS position relative absolute fixed

阅读更多关于 CSS position relative absolute fixed

position属性absolute与relative 详解最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一. 解读absolute与relative 很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。 Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错

订阅绝对定位