绝对定位

CSS左右布局中间自适应

由 风格不统一 提交于 2019-11-27 02:49:19
方法1:左右div设置浮动，脱离标准流，中间那块元素就会上去。 （注意：html代码中中间部分的div必须放到左右div的后面） <style> .boxLeft{ min-height: 100px; width: 200px; background: #987; float: left; } .boxRight{ min-height: 100px; width: 200px; background: #369; float: right; } .boxCenter{ min-height: 100px; margin-left: 220px; margin-right: 220px; background: #192; } </style> <div class="box"> <div class="boxLeft">left</div> <div class="boxRight">right</div> <div class="boxCenter">center</div> </div> 方法2:左右绝对定位的两块div元素,脱离标准流，中间那块元素就会上去 （注意：中间部分的div必须放到左右div的后面） <style> .boxLeft{ min-height: 100px; width: 200px; background: #987; position:

前端学习 之 CSS（三）

由 ∥☆過路亽．° 提交于 2019-11-27 02:49:12
九 :浮动 浮动是 css 里面布局最多的一个属性，也是很重要的一个属性。 float ：表示浮动的意思。 属性值： none: 表示不浮动，默认 left: 表示左浮动 right ：表示右浮动 例： html 内容： <div class="box1">第一个div</div> <div class="box2">第二个div</div> <span>一个span</span> View Code css 内容： *左浮动*/ .box1 { width: 300px; height: 300px; background-color: red; float: left; } /*右浮动*/ .box2 { width: 400px; height: 400px; background-color: green; float: right; } /*左浮动*/ span { float: left; width: 100px; height: 200px; background-color: yellow; } View Code 效果图： 出现的效果图，三个元素并排显示， .box1 和 span 因为是左浮动，紧挨在一起，这种现象贴边。 .box2 盒子因为右浮动，所以紧靠着右边。 浮动四大特性的学习是必不可少的： 1. 浮动的元素脱标 2. 浮动的元素互相贴靠 3.

005 (H5*) CSS三大重点之三：定位

由 南楼画角 提交于 2019-11-27 02:48:55
目录 1：定位模式和边偏移 2：定位模式 　　静态定位 　　相对定位： 移动位置：脱标、占位置 　　绝对定位： 脱标、不占有位置、　　 拼爹型 　　子绝父相 　　固定定位：脱标、占有位置、 3： 定位模式转换 3：z-index 前言 理论 一：元素的定位属性 1：元素的定位属性主要包括定位模式和边偏移两部分。 1.1: 边偏移 | 边偏移属性 | 描述 | | ------ | ----------------------- | | top | 顶端偏移量，定义元素相对于其父元素上边线的距离 | | bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 | | left | 左侧偏移量，定义元素相对于其父元素左边线的距离 | | right | 右侧偏移量，定义元素相对于其父元素右边线的距离 | 2：position属性的常用值 | 值 | 描述 | | -------- | ------------------------ | | static | 自动定位（默认定位方式） | | relative | 相对定位，相对于其原文档流的位置进行定位 | | absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 | | fixed | 固定定位，相对于浏览器窗口进行定位 | 二：静态定位(static) 静态定位是所有元素的默认定位方式

总结CSS基础知识【复习之一】

由 佐手、 提交于 2019-11-27 01:38:32
知识解析： CSS规定的定位机制有三种： 分别是 标准流、浮动及绝对定位。 W3C标准： 结构化标准语言（HTML和XML）、表现标准语言（CSS）、行为标准语言（DOM和ECMAScript） 　　　　　 倡导结构、样式、行为分离 CSS中，存在3种的定位机制 ：标准文档流（Normal flow）、浮动（float）、绝对定位（absolute positioning） 标准文档流 特点： 从上到下，从左至右，输出文档内容 　　　由块元素和行元素组成 块级元素 特点： 从左到右撑满页面，独占一行 　　　触碰到页面边缘时，会自动换行 　　　即块级标签，如div、ul、li、dl、dt、p... 行级元素 特点： 能在同一行内显示 不会改变HTML文档结构 如：span、strong、img、input... 块元素和行级元素都是盒子模型 盒子模型是四种组成： boder+padding+margin+width等于盒子模型尺寸 自动居中——列布局 三个技能点： 标准文档流、块级元素、margin属性 margin:0 auto auto根据浏览器宽度自动设置两边的外边距 原理：（浏览器的宽度-外包含层的宽度）/2=外边距 如果想让你页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或者绝对定位属性。 CSS中规定的第二种定位机制： 能够实现横向多列布局

CSS垂直居中的方法

由 依然范特西╮ 提交于 2019-11-27 00:39:01
方法1：display:flex+align-items 只需要给父元素设置属性 1 <style> 2 .box { 3 position: absolute; 4 width: 100px; 5 height: 100px; 6 border: 1px solid red; 7 8 display: flex; 9 justify-content:center; 10 align-items:center; 11 } 12 </style> 13 <div class="box"> 14 <span>center</span> 15 </div> 方法2：绝对定位和负边距 top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。 1 .box{ 2 position: relative; 3 width: 200px; 4 height: 200px; 5 border: 1px solid red;

CSS

由 China☆狼群 提交于 2019-11-26 23:46:12
CSS 1、什么是CSS？ 　　Casding Style Sheet 层叠样式表 2、作用： 　　使样式与内容分离 　　 网页的表现统一，容易修改 　　丰富的样式，使得页面布局更加灵活 　　减少网页的代码量，增加网页的浏览速度，节省网络带宽 　　运用独立于页面的CSS，有利于网页被搜索引擎收录 3、编写CSS代码的位置 　　1.标签内部 优先级最高 　　　　<div style=””></div> 　　2.页面内部（一般写在头部） 　　　　<style>CSS代码</style> 　　3.外部CSS文件 　　　　.css文件 　　　　使用<link rel="stylesheet" type="text/css" href="xxx.css">导入 4、基本语法 　　CSS规则主要由两个主要部分组成 　　选择器{css属性：值;css属性 ：值.....} 　　标签内部的css不需要选择器 5、CSS选择器 　　1.标签选择器 　　　　标签名{css属性：值;css属性 ：值.....} 　　　　所有此类型的标签都有这个样式 　　2.类选择器 　　　　<div class=”类名”></div> 　　　　.（类名）{css属性：值;css属性 ：值.....} 　　3.id选择器 　　　　<div id=”xxx”> 　　　　#xxx{css属性：值;css属性 ：值.....}

Css

由 二次信任 提交于 2019-11-26 22:31:27
/*--> */ /*--> */ css概述 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。 一 css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3 链接式 将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下： <style type="text/css"> @import"mystyle.css

让div撑满整个屏幕的方法（css）

由 与世无争的帅哥 提交于 2019-11-26 20:46:05
转载于: http://localhost:11212/sale-v2/mgm/record 在body只有一个div的时候，可以通过这样的方式让div撑满整个屏幕。 1.给div设置定位。 　　复习一下—— 　　css中position有五种属性： 　　　　static:默认值，没有定位 　　　　absolute:绝对定位，相对于父级元素进行定位 　　　　relative:相对定位 　　　　fixed:固定定位,相对于浏览器窗口进行定位 　　　　inherit:从父元素继承定位信息　　 除了默认值static和inherit之外，添加其他三种都可以实现窗口自适应。 代码如下： 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 div{ 7 width:100%; 8 height: 100%; 9 background: yellow; 10 position: absolute; 11 } 12 13 </style> 14 15 16 <body> 17 18 <div></div> 19 20 </body> 2. 通过设置html,body的宽高来让div充满屏幕 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 html,body{ 7 width: 100%; 8 height

伪元素为什么要设置绝对定位

由 最后都变了- 提交于 2019-11-26 20:27:33
效果实现了，但是没理解为什么要设置绝对定位，高手们谁知道？ /*使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; width:1px; height:20px; position:absolute;/*为什么要设置绝对定位*/ top:15px; right:0px; background-image:linear-gradient(to top,#f00,#000); 绝对定位脱离文档流，且具有跟随性，即紧随在它之前的元素（未设置绝对定位的元素）的后面，且不占据任何空间。这个时候给他设置top， right 从而完美控制伪元素的位置，且不需要加入padding margin 以免影响整体宽高值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p{ position: relative; } span{ position: absolute; } .test{ display: block; box-sizing: border-box; width:100px; height:100px; position: absolute; background:#3f3f3f; padding:20px 20px

css教程2

由 吃可爱长大的小学妹 提交于 2019-11-26 19:40:53
定位： position 属性的五个值： static relative fixed absolute sticky static： 平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现 fixed： 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： Fixed定位使元素的位置与文档流无关，因此不占据空间。 relative: 相对定位元素的定位是相对其正常位置。 移动相对定位元素，但它原本所占的空间不会改变。 相对定位元素经常被用来作为绝对定位元素的容器块。 absolute: 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative;
订阅 绝对定位