隐性改变display类型

隐性改变display类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

  1. position : absolute
  2. float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>

css代码

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

想不起 display:inline-block 是做什么的小伙伴们,单击“元素分类--内联块状元素”可返回到前面小节进行复习。

时间: 2025-01-05 23:43:40

隐性改变display类型的相关文章

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

行内元素水平居中如何设置?如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内水平居中设置</title> 6 <style type="text/css"> 7 div.box

float浮动改变display类型

position:absolute和float都会隐式的改变display类型. 也就是说,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示. 可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效. 但position:relative并不能够隐式的改变display的类型 参考: http://bl

一维数组,二维数组,三维数组,数组与指针,结构体数组,通过改变指针类型改变访问数组的方式

 打印数组中的每个元素,打印每个元素的地址: #include <stdio.h> #include <stdlib.h> void main(void) { int a[10] = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; for (int *p = a; p < a + 10;p++)  //指针类型决定4个字节 { printf("\n%p,%d", p, *p); } getchar(); } 指针数组 #inclu

Oracle改变字段类型

由于需求变化.现在,我们要一个类型NUMBER(8,2)字段类型改变 char. 总体思路如以下: 将要更改类型的字段名改名以备份,然后加入一个与要更改类型的字段名同名的字段(原字段已经改名).然后更新数据,最后删除改名备份的字段. 下面操作在 Oracle 10.2.0.1.0 中通过. /*改动原字段名*/ ALTER TABLE 表名 RENAME COLUMN 字段名 TO 字段名1; /*加入一个和原字段同名的字段*/ ALTER TABLE 表名 ADD 字段名  VARCHAR2(

伪元素改变date类型input框的默认样式实例页面

CSS代码: ::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); } ::-webkit-datetime-edit-fields-wrapper { background-color: #eee; } ::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; } ::-webkit-datetime-edit

CSS样式设置之垂直居中设置

2.垂直居中 我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好. 这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本. 2.1 父元素高度确定的单行文本 第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢? 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和line-height高度一致来实现的.(height: 该元素的高度,line-height: 顾名思义,

CSS--基础

1.伪类选择符:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:blue;}.可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是不能兼容所有浏览器),其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合. 2.权值:标签的权值为1,类

css(九--杂记)

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的. 这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素.今天我们先来了解一下行内元素怎么进行水平居中? 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.(父元素和子元素:如下面的html代码中,div是"我想要在父容器中水平居中显示"这个文本的父元素.反

css基础和心得(四)

现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对 定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位 置.相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像 层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left.right. top.bottom属性确定,偏移前的位置保留不动.那么,什么叫"偏移前的位置保 留不动呢?"就是div元素相对于以前