absolute撑开宽度

2024-08-28

子元素绝对定位absolute后,自动撑开宽度

position: absolute; white-space: nowrap;

对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因吗!!!=_=!!还是先记基础知识好了,因为里面还是有很多坑!!相对定位: 内联元素加相对定位也不支持宽高!! relative并不会使元素脱离正常文档流! 以上两点说明加上相对定位不影响元素本身的特性,内联元素和块元素依旧保持原来本身的特性!就是说原来是内联加上relative以后还是内联啦! 如

[css] 页面重构“鑫三无准则” 之“无宽度”准则

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 一.关于“鑫三无准则” “鑫三无准则”这个概念早在去年我写“关于Google圆角高光高宽自适应按钮及其拓展”一文时就已经提到了.这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”.“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性. 此准则是针对我个人的,可能没有

absolute元素水平居中

原始(未居中): .con{ width:200px; height:200px; background:#ccc; position:relative; } .abs{ width:40px; height:20px; background:steelblue; position:absolute; ; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta nam

CSS浮动、定位

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r

html&css复习题(参考答案)

1. 常用的块属性标签及特征有哪些? 常用块标签:Div h1~ h6 ol ul li dl td dd table tr th td p br form 块标签特征:独占一行,换行显示,可以设置宽高,块可以套块和行 2. 常用的行内属性标签及特征有哪些? 行标签:span a img var em strong textarea select option input 行标签特征:在行内显示,内容撑开宽高,不可以设置宽高(img ,input除外), 行只能

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl

html+css知识点总结（田彦霞）

html部分 html头部声明 DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本.DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上. <head> <title>标签 title就是说这个网页是干什么的,公司名.产品名.功能名等等,全是给浏览器,以方便用户能快速准确得了解到这个网页要介绍的内容. title的特点: title标签只能在head标签内出现: 标签内的内容通常在浏览器

float、定位、inline-block、兼容性需注意的特性总结

inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.脱离文档流 5.提升层级半层 position:relative; 相对定位 a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元

【面试必备】CSS盒模型的点点滴滴

从接触CSS布局开始,就一直在听盒模型的概念了,网上的文章有很多,深浅不一.有些人会认为盒模型很简单,不就是border.margin.padding.content嘛,一个元素所占的空间就是把它们都加起来~仅仅如此吗?当然不是,盒模型的概念其实挺好理解,但难的是与其他属性一块使用时产生的现象.下面把我知道的一些特性梳理一下,这也是css中最基础的知识,面试常会问的东西. 盒模型的基本概念正如上面说的,盒子模型的几个要素就是border.margin.padding.content,相信你已经

CSS实现水平垂直同时居中的5种思路

× 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路思路一: text-align + line-height实现单行文本水平垂直居中 <style> .test{ text-align: center; line-height: 100px; } </style> <div class="test" sty

CSS3定位和浮动详解

本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. css定位的属性: position 把元素放在一个静态的,相对的,绝对的,或者固定的位置中 top/left/right/botom 元素向上/左/右/下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素显示的对其方式 z-i

css2---必须学的经典---定位问题

定位 position body<html<文档定位是相对文档的不是相对 body 或 html 1.position:relative 相对定位 a.不能使内嵌元素支持宽高 b.不改变文档流 2.position:absolute 绝对定位 a.使内嵌元素支持宽高 b.使元素完全脱离文档流 c.块属性标签内容撑开宽度 d.有父级定位的相对于父级不是结构父级 e.相对定位都是配合绝对定位用的定位元素默认后者层级高于前者 z-index:[number]

CSS 中定位的使用

position relative 设置区块基准点为左上角(相对定位以区块的左上角为基准点仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制 top/right/bottom/left 定位元素偏移量. absolute 设置网页的为基准点左上角(绝对定位以网页的左上角为基准点不会暂居原来的位置) a.使元素完全脱离文档流: b.使内嵌元素支持宽高: c.块属性标签内容撑开宽度(在没有设置宽的情

CSS标签知识

一.内联标签和块标签的区别内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin和padding 5.代码换行被解析块属性标签: 1.默认独占一行显示: 2.没有宽度时,默认撑满一排 3.支持所有css命令二.display display:block; 显示为块display:inline; 显示为内嵌 display:inline-block特性:1.块在一行显示:2.行内属性标签支持宽高:3.没有宽度的时候内容撑

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative; 相对定位 a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制 top/right/bottom/left 定位元素偏移量. absolute绝对定位/定位层级 osition:absolute; 绝对定位 a.使元素完全脱

htmlcss笔记--定位

1.定位: position:relative(相对) 不影响元素本身的特性: 不使元素推理原来文档流:还占有所在的位子. 定位元素控制:top/right/bottom/left 定位元素偏移量. absolute(绝对定位) 使元素脱离文档流, 使内嵌元素支持宽高, 快属性标签内容撑开宽度. 相对于整个文档发生偏移,不是相对以自身原来位置或者body来偏移: *如果有定位父级,就相对于定位父级定位,如果没有,则相对于文档定位相对定位一般情况下都是为配合绝对定位来使用的定位元素默认后者的层

Day14 HTML补充

一.认识前端前端开发的核心语言: html - 超文本标记语言结构 css - 层叠样式表样式 javascript - 脚本语言行为 <html></html> 双标记双标签 <meta/> 标记单标签 css的语法就是属性名:属性值; 第一个HTML文件 <html> <head> <meta charset="utf-8"> <title>我是头</title> <

div+css知识点

前端书写规范: 1.所有书写均在英文半角状态下的小写: 2.id,class必须以字母开头: 3.所有标签必须闭合: 4.html标签用tab键缩进: 5.属性值必须带引号: 6. 7./* css注释 */ 8.ul,li/ol,li/dl,dt,dd拥有父子级关系的标签: 9.p,dt,h标签里面不能嵌套块属性标签: 10.a标签不能嵌套a: 11.内联元素不能嵌套块: div的display默认是block; a的display默认是 inline-

css基础回顾-定位：position

w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. position有以下属性值: 可能的值 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top"