绝对定位 | 易学教程

记录CSS

阅读更多关于记录CSS

ID选择器：#id { } ID是独一无二的，不可重复类选择器： .class { } 标签选择器 h p input... 子选择器：.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素后代选择器：.food li 通用选择器：*{ } 匹配html中所有标签元素分组选择符：h1,span,li { } 伪类选择符：例： a:hover{color:red;}->鼠标滑过状态设置字体颜色变红; :link /*没有访问过的链接*/ :visited /*已经访问过的链接*/ input:focus{ } 选取获得焦点（光标）的表单标签的权值为1，类选择符的权值为10，ID选择符的权值为100；行内样式style权值1000；继承或者 * 权值0 改变样式权重：!important >> p{ color:red!important; } 权重叠加：复合选择器会权重叠加；权重会叠加，不会有进位 (相同权重值时)：层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。继承性：子标签会继承父标签的某些样式，text- font- line- color 标题标签不会继承父元素文字大小； a标签不会继承父元素的文字颜色；优先级：内联样式表

CSS 基础

阅读更多关于 CSS 基础

CSS 介绍 CSS （ C ascading S tyle S heet ，层叠样式表 ) 定义如何显示 HTML 元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染） CSS语法 CSS实例每个 CSS 样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ CSS的几种引入方式行内式是在标记的 style 属性中设定 CSS 样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将 CSS 样式集中写在网页的 <head></head> 标签对的 <style></style> 标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式外部样式就是将 css 写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1

CSS

阅读更多关于 CSS

本节笔记整理 CSS笔记整理：在标签上设置style属性： background-color: #2459a2; height: 48px; ... 编写css样式： 1. 标签的style属性 2. 写在head里面 style标签中写样式（1）- id选择器 #i1{ background-color: #2459a2; height: 48px; } （2）- class选择器 ****** .名称{ ... } <标签 class='名称'> </标签> （3）- 标签选择器 div{ ... } 所有div设置上此样式（4）- 层级选择器（空格） ****** .c1 .c2 div{ } （5）- 组合选择器（逗号） ****** #c1,.c2,div{ } （6）- 属性选择器 ****** 对选择到的c1标签再通过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; } PS: - 优先级，标签上style优先（行间样式），编写顺序，就近原则（位置上下） 2.5 css样式也可以写在单独文件中 <link rel="stylesheet" href="commons.css" /> 3、注释 /* */ 4、边框 - 宽度，样式solid/dotted，颜色 (border: 4px dotted red;)

CSS(8)---通俗讲解定位(position)

阅读更多关于 CSS(8)---通俗讲解定位(position)

CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流、浮动、定位。前面两个之前已经讲过，详见博客： 1、 CSS(5)---通俗讲解盒子模型 2、 CSS(6)---通俗讲解浮动(float) 3、 CSS(7)--- 通俗讲解清除浮动一、为什么要用定位？如果说浮动关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。我们来思考下定位用于的场景。 1、打Log标签比如你想在商品的图片想打个标签比如：包邮、最新上架等等。怎么做比较好呢，如果你要粗暴那就直接ps在图片上添加标签。只是这样有个很大的弊端，比如你要添加新标签你需要重现修图，比如商品之前包邮后面不包邮了，那你又需要重新p图。这样肯定是不合适的。那怎么做比较合适？其实很简单，将商品图片和标签的标签分开来。然后通过css在商品图片上添加标签。这个时候通常会定位去完成。 2、切换Banner 有些商城的首页都会有个Banner，这里左右的箭头和下面的小点点一般也是用定位来做。 3、广告位窗口有些位置在左右侧会有固定的广告窗口，不论怎么滑动页面这个广告窗口都是在固定位置这个就需要用到固定定位了。二、定位概念 1、定位的分类在CSS中， position 属性用于定义元素的定位模式，其基本语法格式如下：选择器 {position:属性值;

css的盒子模型

阅读更多关于 css的盒子模型

网页布局的本质就是把网页中的元素，例如文字。图片等放在一个盒子里，然后利用css来摆放盒子达成想要的效果，就是网页布局 css的三大模型 1.普通流 2.浮动元素添加浮动以后，会自动转换成行内块元素浮动的目的就是为了让多个块元素显示在同一行上必须要消除浮动，因为如果不消除浮动，就会造成排版混乱在父元素中加入overflower=hidden或者在浮动的盒子后面加一个标准流的空div让这个div clear=both去消除浮动 3.定位定位的属性包括边偏移和定位模式 postion有4个属性 static，默认定位，relative相对定位，absolute绝对定位，fixed固定定位 static默认定位，是默认的，是不可以固定位置de relative每次移动的时候都是以自己的左上角为移动，是不脱标的 absolute是脱标的是不占用位置的是依靠父盒子去定位的，如果不设置偏移的话，就是跟着父盒子走只要追寻原则子绝父相就完全没问题了，吧父亲的定位做成相对的定位，孩子的定位就会跟着父亲走网页布局的流程 1.先确定页面的版心 2.分析页面中的行模块，以及每一行的列模块 3.制作html结构 4.css初始化，然后利用盒子模型，div+css控制页面的模块来源： oschina 链接： https://my.oschina.net/u/3234136/blog

css之position

阅读更多关于 css之position

在我之前的认知中，position值有static(默认)、relative(相对)、absolute(绝对)、fixed(固定不变) 这四个值大家了解css的都是知道的我就不多说，这里要说的是sticky(粘性)，sticky是17年浏览器才开始支持的，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。 sticky 生效的前提是，必须搭配 top 、 bottom 、 left 、 right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛。它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛， relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见）， fixed 定位自动切换回 relative 定位。要实现效果只需要简单css {position:sticky;top:0;} 参考链接 http://www.ruanyifeng.com/blog/2019/11/css-position.html 来源： https:/

1114 CSS基础

阅读更多关于 1114 CSS基础

目录 CSS入门标签设置长宽 1.字体样式 1.1 字体类型 font-family 1.2 字体大小 font-size 1.3 字体颜色 color 1.4 字体粗细 font-weight 1.5 文本斜体 font-style 2.文本样式 2.1 文本对齐 text-align 2.2 文字装饰 text-decoration 2.3 首行缩进 text-indent 4.背景样式 4.1 背景颜色 background-color 4.2 背景图片 background-image 4.3 背景重复 background-repeat 4.4 背景位置 background-position 4.5 背景固定样式 background-attachment 5.边框属性 5.1 边框样式 border 5.2 边框局部样式 border局部 5.3 圆,圆角边框 border-radius 6.display 显示方式定义使用同行显示 display: inline 异行显示 display: block; 兼并 display: inline-block; 标签特性 7.盒子模型 7.1 margin: 外边距 7.2 border: 边框 7.3 padding: 内边距 7.4 content: 内容区域 8. 浮动布局 float 8.1 三种取值 8

CSS 水平对齐(Horizontal Align)

阅读更多关于 CSS 水平对齐(Horizontal Align)

CSS 水平对齐(Horizontal Align) 在CSS中，有几个属性用于元素水平对齐。块元素对齐块元素是一个元素，占用了全宽，前后都是换行符。块元素的例子： <h1> <p> <div> 文本对齐，请参阅 CSS文本章节。. 在这一章中，我们会告诉你块元素如何水平对齐布局。中心对齐,使用margin属性块元素可以把左，右页边距设置为"自动"对齐。 Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素： .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } 提示: 如果宽度是100％，对齐是没有效果的。注意： IE5中块元素有一个margin处理BUG。为了使上述例子能工作，在IE5中，需要添加一些额外的代码。实例使用position属性设置左，右对齐元素对齐的方法之一是使用绝对定位： .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } 注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。

CSS BFC和IE Haslayout介绍

阅读更多关于 CSS BFC和IE Haslayout介绍

BFC(Block Formatting Context) 1. BFC的定义是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。从上面的定义我们可以看到Document显示HTML元素的方式和BFC的定义很像，其实我们可以认为Document就是最大的一个拥有BFC的元素了。 2. BFC到底是什么？当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC

Css里的BFC

阅读更多关于 Css里的BFC

一、BFC简介 BFC全称：Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）二、BFC的触发条件（只要元素满足下面任一条件即可触发 BFC 特性） body 根元素；浮动元素：float 不为none的属性值；绝对定位元素：position (absolute、fixed)； display为： inline-block、table-cell、flex； overflow 除了visible以外的值 (hidden、auto、scroll)；三、BFC的布局规则 <1> 内部的盒子会在垂直方向，一个个地放置； <2> BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 <3> 属于同一个BFC的两个相邻Box的上下margin会发生重叠； <4> 计算BFC的高度时，浮动元素也参与计算 <5> 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； <6> BFC的区域不会与float重叠；四、BFC的应用 <1>解决margin重叠问题 <2>解决浮动高度塌陷问题 <3>解决侵占浮动元素的问题五、解决方法（代码和效果图） <1>解决margin重叠问题代码如下： <

订阅绝对定位