绝对定位 | 易学教程

50道 CSS 经典题

阅读更多关于 50道 CSS 经典题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

Web—02-轻松理解css

阅读更多关于 Web—02-轻松理解css

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是：选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css">` 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> 3、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; color:red ">......</div> CSS文本设置常用的应用文本的css样式： color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font

CSS总结

阅读更多关于 CSS总结

CSS的简介： 1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾(这些符号都是英文的)。 2、CSS得引入方式：行内引入：<div style="这里写样式">我是一个块级的标签</div> 嵌入式：将CSS样式表放到head中用<style>标签包裹起来 <head> ... <style type="text/css"> ...此处写CSS样式 </style> </head> 导入式：将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。导入式会在整个网页装载完后再装载CSS文件。 <head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head> 链接式引入：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。链接式会以网页文件主体装载前装载CSS文件。 <head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head> 3、样式的应用顺序：行内样式优先级最高针对相同的样式属性，不同的样式属性将以合并的方式呈现相同样式并且相同属性，呈现方式在

CSS 样式

阅读更多关于 CSS 样式

1，大小宽度： width:"100px/50%" 高度： height:"100px" 实现高度100% position:fixed; 配合使用 2，背景【写在<head></head>之间， <style type="text/css"> body{ }</style>里面】背景色： background-color：red/#颜色代码; 背景图片：　　 background-image:url(图片路径) ; 背景图的平铺方式: background-repeat:选择属性; 背景图片位置: background-position:（top/bottom/left/right）; 设置背景图片是否滚动: background-attachment：（选择属性）； 3,文字字体样式: font-family:宋体; 字体大小: font-size:4px; (一般在12px -14px之间）倾斜: font-style:italic; 加粗: font-weight :bold; 划线: text-decoration:underline（下划线）/overline（上划线）/line-through（删除线）/none（没有，用来去掉超链接的下划线）; 字体颜色: color:red/#颜色代码; 4,对齐水平对齐： text-align:对齐属性；

CSS定位

阅读更多关于 CSS定位

position的取值主要有如下图：官方给出的总是不那么容易懂得，所以有了以下简洁易懂的总结：　 relative ：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处于文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。　a bsolute ：定位是相对于离元素最近的设置了绝对定位或相对定位的父元素，如果没有父元素设置了绝对或相对定位，则元素相对于根元素即HTML元素定位。设置了absolute的元素脱离了普通文档流，元素在没有设置宽度的情况下，宽度由里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据该位置。来源： https://www.cnblogs.com/kbinblog/p/10915379.html

CSS层模型的应用

阅读更多关于 CSS层模型的应用

1、绝对定位(position: absolute) ：如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来（即不依赖与前面的一个DIV的位置可以独立设置位置），然后使用left、right、top、bottom属性相对于其具有定位属性（即top\right\bottom\left定位属的）的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 2、相对定位(position: relative) ：如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，即默认的位置【0，0】，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 3、固定定位(position: fixed)：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

CSS定位

阅读更多关于 CSS定位

1.relative相对定位　　1>.不影响元素本身的特性(只是给元素加上position:relative属性元素本身不受影响) 　　2>.不使元素脱离文档流　　3>.如果没有定位偏移量，对元素本身没有任何影响 2.定位元素位置控制　　top/left/right/bottom:定位元素偏移量 3.absolute绝对定位　　1>.使元素完全脱离文档流　　2>.使内嵌元素支持宽高　　3>.块属性标签由内容撑开　　4>.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移　　5>.相对定位一般都是配合绝对定位使用的 4.定位层级 z-index:number 　　a.定位元素默认后者层级高于前者 5.遮罩弹窗　　标准不透明 opacity: number 其中number为0到1之间的数字　　IE滤镜 filter:alpha(opacity=number) 其中number为0 到100之间的数字，标准不透明属性在ie下不起作用，所以为了兼容ie需要加上ie滤镜示例代码： .mask{ background: #000; height: 100%; width: 100%; position: absolute; opacity: 0.5; filter:alpha(opacity=50); left: 0px; top: 0px; }

css定位 position

阅读更多关于 css定位 position

position 属性指定了几种元素的定位类型固定定位 fixed：　　生成绝对定位的元素，相对于浏览器窗口进行定位。　　元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。　　如果有多个固定定位标签，都是参考窗口，所以之间不相互影响，但可能出现图层重叠，通过 z-index 值绝对图层上下关系绝对定位 absolute： 1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)，且兄弟标签之间布局不影响(兄弟动，自身相对父级还是保持静止) 2、z-index 值能改变重叠的兄弟图层上下关系 3、子级相对的父级一定要定位处理（三种定位均可以）　　父级要先于子级布局，所以子级在采用绝对定位时，父级一般已经完成了布局，如果父级采用了定位来完成的布局，子级自然就相当于　　父级完成绝对定位　　　　如果父级没有采用定位来完成的布局，我们要后期为父级增加定位处理，来辅助子级绝对定位，父级的定位是后期增加的，我们要　　保证增加后不影响父级之前的布局，相对定位可以完成相对定位 relative ：　　生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。　　在使用中大多数情况是父元素使用相对定位子元素使用绝对定位　

16CSS中的定位

阅读更多关于 16CSS中的定位

1.为什么需要定位？引入问题：一些情况使用标准流或浮动能实现吗？ 1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 2.当我们滚动窗口的时候，盒子是固定在屏幕的某个位置。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：浮动可以让多个盒子在一行没有缝隙的排列显示，经常用于横向排列的盒子。定位则是可以让盒子自由的某个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。 2.定位的组成定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边偏移定位模式：用于指定一个元素在文档中的定位方式；边偏移则决定了该元素的最终位置。 2.1定位模式定位模式决定了元素的定位方式，它通过CSS的 position 属性来设置，其值可以分为以下四个： 2.2 边偏移边偏移就是定位的盒子移动到最终的位置。有 top、bottom、left和right这4个属性。 3.相对定位static(了解) 静态定位是元素的默认定位方式，无定位的意思。语法：选择器 { position: static; } 静态定位是按照标准流的特性来摆放位置，它没有边偏移；静态定位在布局时很少使用； 4.相对定位relative(重要) 相对定位是元素在移动位置的时候

一天搞定CSS：定位position--17

阅读更多关于一天搞定CSS：定位position--17

1.定位取值概览 2.相对定位relative <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; color: #fff; } .div1{ background: red; } .div2{ background: green; /*margin: 200px 0 0 200px;*/ position: relative; left: 200px; top: 200px; } .div3{ background: blue; } span{ background: red; color: #fff; position: relative; width: 100px; height: 100px; } </style> </head> <body>  <div

订阅绝对定位