关于定位以及盒子模型的小技巧

我们正常的页面的布置都是跟随文档流来渲染的,但是一些样式层叠或者其他的一些属性,需要定位才能生效,像z-index,如果没有加上position:relative;那么就不会生效。

我们可以这样理解,正常的文档流就相当于一张纸上渲染的东西,当要把纸折叠,或者是变换,脱离了这部分,那就需要通过规则来变换,这个规则就是定位,可以有绝对定位,相对定位,fixed,这三种规则,又有不同的方式,可以由我们来定义。

注意:相对定位虽然没有脱离正常的文档流,但是他也会比普通的文档流要高一点点。绝对定位是脱离文档流,层次比相对定位要高。

时间: 2024-10-12 10:57:28

关于定位以及盒子模型的小技巧的相关文章

CSS定位元素--盒子模型

页面版式主要由三个属性控制: position 属性. display 属性和 float 属性.其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠.并排,还是根本不在页面上出现, float 属性提供控制的方式,以便把元素组成成多栏布局. 盒子模型有关的三个属性 边框(border) .可以设置边框的宽窄.样式和颜色. 内边距(padding) .可以设置盒子内容区与边框的间距. 外边距(margin) .可以设置盒子与相邻元素的间距. 边框(bord

iOS 【UIKit-UIPageControl利用delegate定位圆点位置 之 四舍五入小技巧】

在UIScrollView中会加入UIPageControl作为页码标识,能够让用户清楚的知道当前的页数.我们须要优化的一点是让pageControl的小圆点精确的跟着scrollView而定位.我们先来看一下效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="381"

2018-06-08CSS常用样式+浮动+定位+盒子模型

CSS布局样式: 常用样式: ①    字体 ②    颜色 ③    背景 布局: ①    浮动 ②    定位 ③    标签特性 标签盒子模型: ①    内边距 ②    边框 ③    外边距 动画: ①    旋转 ②    渐变 Link的正确用法: <link rel="stylesheet" href="ZuoYe1.css"> 常用样式: ①    字体: 大小,颜色,粗细,字体! 子标签会继承父标签的样式(不是所有的样式都会被继承

python 之 前端开发(盒子模型、页面布局、浮动、定位、z-index、overflow溢出)

11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如果把一个盒子比喻成一个壁挂相片,那么 外边距margin ===== 一个相框与另外一个相框之间的距离 边框border ====== 边框指的就是相框 内边距padding ===== 相片与边框的距离 宽度width/高度height ===== 指定可以存放相片的区域 1.css显示模式:块级

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

选择器的优先级问题 1.选择器相同 就近原则 2.选择器不同 行内 > id选择器 > 类选择器 > 标签选择器 除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

2015-09-22 第四节课 CSS块级元素 行内元素 浮动 盒子模型 绝对定位、相当定位和固定定位

常见的块级元素和行内元素 一.块级元素 1.块级元素的特点: (1).默认显示在父标签的左上角. (2).块级元素默认占满一行(沾满整个文档流). 2.常见的块级元素: <p>.<h1-h6>.<ulli>.<olli>.<div>.<tabl>.<hr> 二.行内元素(内联元素) 1.行内元素的特点: (1).大小受到文字区域的影响,不受到width和height的影响. (2).行内元素不会单独占满一行. 2.常见的行

css的核心内容 标准流、盒子模型、浮动、定位等分析

1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换成块级元素: 标准流:就是标签的排列方式.<div class="style2">我的未来不是梦</div><span id="st" class="style1">栏目一</span><span

css盒子模型,定位,浮动

1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Content(内容) - 盒子的内容,显示文本和图像. 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 2.定位 Static 定位

盒子模型及层模型【定位】

首先需要说明,盒子模型是针对HTML元素的每一个标签的!因为HTML中每一个标签都符合盒子模型的特点! CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式.如下所示: 需要注意: 盒子是由三部分组成的,即:盒子壁[border]+内边距[padding]+内容区[content=width+height] 而盒模型是由四部分组成的,即:外边距[margin]+盒子壁[border]+内边距[padding]+内容区[content=width+he