绝对定位 | 易学教程

DIV CSS浏览器的兼容性

阅读更多关于 DIV CSS浏览器的兼容性

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。 2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。 3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。 a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div> c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red

css知识整理

阅读更多关于 css知识整理

定位文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。 relative 相对元素定位，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 absolute 绝对定位，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。 fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。 static 默认值。没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。约等于标准流 inherit 从父元素继承position属性的值。总结： relative相对正常位置，absolute相对最近的已定位父元素。 relative不可以设置大小，absolute可以设置大小。 absolute和fixed的块元素会自动转化为行内块元素。模式转换定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级。父相子绝使用场景当页面中出现盒子压盒子的效果是，推荐使用定位。拓展标准流盒子居中： margin： 0 auto；

48/49 前端--CSS样式

阅读更多关于 48/49 前端--CSS样式

目录 CSS样式 1. 高度宽度 2. 字体属性文字字体 font-family 文字大小 font-size 文字字重(粗细) font-weight 字体颜色 3. 文本文本对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 练习： 4. 背景图 background 练习： 5. 边框 border 属性：练习： 6. display属性练习： 7. 盒子模型 margin外边距 padding内边距练习： 8. float 浮动练习： 9. overflow 溢出属性练习： 10. 定位 position z-index 层级 opacity 标签透明度圆形头像 CSS样式 1. 高度宽度 width:200px; # 宽度。50% 按父级标签的宽度百分比来算 height:200px; # 高度块级标签才能设置宽度，内联标签的宽度由内容来决定。 2. 字体属性文字字体 font-family font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 文字大小 font-size

css定位

阅读更多关于 css定位

定位position position属性的值： static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ---固定定位 sticky ---粘性定位（本文不讲这个） position:static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top , right , bottom , left 和 z-index 属性无效。 position:relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。注意：元素并未脱离文档流示例 .box { width: 100px; height: 100px; background: lightgreen; color: #000; border: 1px solid #ccc; } #two { position: relative; top: 20px; left: 20px; background: lightcoral; } #outer { margin: 0 auto; width: 500px; height: 500px; border: 1px solid #000; } <div id="outer"> <div class="box" id

CSS 布局入门

阅读更多关于 CSS 布局入门

概述 Web 兴起之后，关于CSS的介绍和学习资料已经铺天盖地。本文不涉及具体的CSS语法之类的，而是希望从初学者的角度，让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。什么是 CSS 了解一个概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。 CSS (cascading style sheets)，可以翻译成中文层叠样式表。从名字可以看出：层叠：说明样式可以叠加，所以会有优先级样式表：说明CSS是描述样式的，而且只是个表，不是程序语言，所以后来随着 CSS 的应用越来越多，才会有 Sass 和 Less 这些扩充 CSS 语法的语言出来 CSS 的作用 CSS 的作用就是样式，其实 Web 只用 HTML也可以做出来，只是随着机器和浏览器性能的提升，人们对网页的美观和易用性要求越来越高，CSS 的重要性才逐渐凸显。 CSS 我觉得有2个主要的作用：可以将 Web 的样式统一管理，便于修改，类似于程序语言中的变量或者配置文件将网页内容和样式分离开，让灵活呈现内容成为可能注意 HTML 才是网页的实际内容，CSS 只是控制HTML元素的如何显示，显示与否。 CSS for 布局 CSS 在布局上用的最多，就是因为了有了 CSS，才会有所谓的 div css 布局方式，以前用 HTML 都是 table 布局。初步了解

【css】浅谈BFC

阅读更多关于【css】浅谈BFC

定义：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC的布局规则如下： 1.内部的盒子会在垂直方向，一个个地放置； 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠； 3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 4.BFC的区域不会与float重叠； 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此； 6.计算BFC的高度时，浮动元素也参与计算。以下行为会触发BFC 官方：根元素(<html>) 浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group

部份css样式详解(附实际应用)

阅读更多关于部份css样式详解(附实际应用)

本文的所有实例均基于博客园的页面定制。所有表格内容来自W3CSchool。页面背景（background）博客开通之后，很多人最先做的事情一定是改页面的背景，换成一张图片或者换上一个自己喜欢的颜色，这时候用到的就是background属性。但是，在什么地方用呢？所有的html标签都支持这个属性。所以，随便用。我们经常能看到类似 background: #fff; 这种使用方式，如果背景是张图片，那可能会看到 background: url('xxx.jpg'); 这种使用方式。即使没有系统的学过css，仅看这两条代码也能知道前者是在设置背景色，后者则是在设置背景图片。实际就是选择图片做背景还是选择颜色做背景。那么现在设置一下博客的背景： body { background: #FFE4C4; } 颜色确实改变了哈，同理可以设置图像背景。我们在浏览器中检查元素（F12），可以看到background实际上是一系列属性的集合。对于单纯的背景颜色来说，这一系列的属性通常可以无视，对于图像背景，则按需设置这些内容（一般是 postion, size, repeat, attachment 这几条）。这些属性的具体使用方式可以通过手册查找到，这里不再叙述。上面换上了背景图像之后，我们使用手机打开，发现图像平铺了（未设置repeat），但是关闭了这条属性

CSS--定位

阅读更多关于 CSS--定位

一、什么是定位改变元素在页面中的位置二、定位的分类 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位三、普通流定位页面中元素的默认定位方式，默认文档流，从上往下，从左往右 1、每个元素都在页面有自己的空间 2、每个元素都是从父元素的左上角开始显示 3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行 4、行内元素是多个元素在一行显示，从左往右逐个排列四、浮动定位 1、当元素设置浮动后，该元素脱离默认文档流，后面的元素会上前补位。当前元素会在当前行，向左或者向右排列 float：left、right、none 特点：（1）、元素一旦浮动，就脱离文档流了，不占据页面空间，后面会上前补位（2）、浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素边缘（3）、浮动就是解决多个块级元素在一行显示的问题 2、浮动引发的特殊情况 a、（1）当父元素显示不下所有已浮动元素的时候，显示不下的几个将换行显示，换行显示的规则：优先上浮，之后向左/右对齐（2）浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，不让其他后面浮动元素占用 b、元素一旦浮动，如果没有定义宽度，宽度会以内容为准 c、元素一旦浮动起来，就变成了块级元素，可以设置宽高，可以设置上下外边距 d、文本，行内元素，行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素

css — 权重、继承性、排版、float

阅读更多关于 css — 权重、继承性、排版、float

目录 1. 继承性 2. css中的权重 3. 常用格式化排版 4. 浮动布局float 1. 继承性继承性：在css有某些属性是可以继承下来，如 color,text-xxx,line-height,font-xxx,letter-spacing,word-spacing是可以继承下来，但有些属性是不可以继承下来的，如 border:1px solid green; 2. css中的权重继承来的属性权重值约为0 权重比较规则: 如果选中了标签： 1.数选择器数量： id 类标签，谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 3.同是继承来的属性 1.谁描述的近，谁的优先级越高 2.描述的一样近，这个时候才回归到数选择器的数量 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级注意：!important要写在分号的前面使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。 3. 常用格式化排版 3.1 字体属性 1.字体语法： /*网页中的文字设置字体为微软雅黑*/ body{font-family:"Microsoft Yahei"} 2.备选字体语法： body{font-family:

css几个重要属性

阅读更多关于 css几个重要属性

一、Position属性：规定元素定位类型: 1.static (默认值)没有定位元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 2.absolute绝对定位相对于父元素进行定位，元素位置通过top right bottom left属性进行规定，不占位置。 3.relative 相对定位相对其正常位置进行定位，用margin来固定位置，占位置。 4.fixed 固定定位相对于浏览器窗口进行定位。二、z-index属性：设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是处于较低元素的前面。注意：Z-index只能在定位元素上奏效，可负。三、float属性: 元素浮动，经常应用于图像，使文本围绕在图像周围。CSS中，任何元素都可以浮动。清除浮动的常用方法： clear:both：对最后一个字元素使用，可防止父元素高度坍塌。 overflow:hidden：超出部分隐藏四：after/：before选择器：再被选元素的内容后/前面插入内容，用content属性来指定要插入的内容。五、dispaly属性 1、inline-block：行内块元素；可设置宽高，且可在一行显示 2、none：该元素不会被显示。 3、block：该元素以块状元素显示出来，前后都有换行符。 4、inline：默认；无法设置宽高。

订阅绝对定位