css margin没有宽高的元素会显示吗

2024-11-01

CSS属性之margin

0.对自身可视宽度的影响 1>改变处于标准文档流中,未设置width值的block元素的可视宽度在标准文档流中,对于没有设置宽度的block元素,当其具有内容或者设置高度后,其自身宽度为父元素宽度的100%,这个时候给block元素设置水平方向的margin值,就会改变元素的可视宽度.但是不能改变高度,因为block元素的高度是固定或者等于其内容的高度,并不会拉伸. 这个特点在bootstrap的布局里就有用到. <div class="wrap"> 父元素padd

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+

js实现未知宽高的元素在指定元素中垂直水平居中

js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.soft

CSS Transform让百分比宽高布局元素水平垂直居中

很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法.但如果这个元素的宽高是用百分比表示呢? 如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性.下面来看代码实例: HTML代码 <div class="

绝对定位元素left、right、top、bottom值与其margin和宽高的关系

绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + left + right + marginLeft + marginRight = W 垂直方向: height + top + bottom + marginTop + marginBottom =H 由于绝对定位元素的这种特性,所以可以实现伪元素与宿主元素等尺寸效果以及绝对定位元素的水平垂直居中设置

css中固定宽高div与不固定宽高div垂直居中的处理办法

固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-50px; 不固定高宽div垂直居中的方法方法一(此div元素应是 inline-block): 用一个"ghost"伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧

css中盒子宽高的auto

CSS盒模型中,auto属性只适用于外margin和width,height,border和padding不适用.下面就来说说它的情况.这里所说的都是标准流盒子. 1.横向来说 (1)若设置width,magrin-left,margin-right中某个值为auto,剩下两个为指定值,则设为auto的属性会确定所需的长度,从而使元素的宽度等于父元素的width.例如,盒的横向长度必须等于400px,没有设置padding和border,margin-right和width设置为100px,左外

css实现不定宽高的div水平、垂直居中

一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示. 兼容方面也一样拿IE来做比较,第二种方法IE8以上都能使用. IE8及IE8以下都会出现问题. <body> <div id="box"> <div id="content">div被其中的内容撑起宽高</div> </div> </body&g

css/css3 未知元素宽高，垂直居中和水平居中

未知元素的宽高情况下垂直居中和水平居中第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-content: center; align-items: center; } 第二种 css3的transform .ele{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 第三种 displa

css background-image 自适应宽高——转载

就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../image/Click_03_temp.png); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;} 转载来源:https://blog.csdn.net/chenqk_123/

css样式：宽高按一定比例进行自适应

纯 CSS 实现高度与宽度成比例的效果最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 CSS 定义如下: .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到的一个需求:在保持 item 元素宽高比恒定(如高是宽的 1.618 倍)的情况下,使得 item 元素可以和父元素同比缩放. 我们知道,如果当 item 元素是图片,

css中的宽高以及百分比参照

百分比数参照物父元素宽度:padding,margin,width,text-indent 父元素高度:height 自身:transform中的translate() 其他单位 vh:窗体高度 vw:窗体宽度

背景图宽高100%无法无法显示的问题【body设置relative，当前元素absolute】

以下1,2两个关键元素 body{ width:100%; height:100%; position:relative; //1 } .login-form { width: 100%; background:url(./img/loginbg.png) no-repeat; height:100%; background-size: 100% 100%; position: absolute; //2 background-position:center; z-index:4;

jl1.如何设置元素的宽高包含元素的边框和内边距

方法一: 文档地址:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing属性: box-sizing: border-box; 抱歉,由于我的粗心,导致之前标题中的错误.目前已经改回来了. 再次强调一下,该属性包含元素的边框和内边距,不包含外边距!

前端css图片固定宽高问题

img需要宽高都固定时,图片往往会因此变形,此时可采用的方法有: 上述代码会使得图片居中,边缘部分不显示.这是在图片大小跟container大小差不多的情况下.如果图片很大的话,只显示中心部分是不行的. 此时,设置width:100%:或者height:200px;都可以. 设置width百分之百,会让高都裁剪或填充黑色.设置height固定值会让宽度裁剪或填充.

一个未知宽高的元素在div中垂直水平居中

<body> <div id="#div1"> <img src="img1.png"></img> </div> </body> 那么,如何让img元素在div中居中对齐呢? 第一种方法第一步:在img标签后面添加一个元素,比如说添加一个span元素 <body> <div id="div1"> <img src="img1.png

css实现未知元素宽高垂直居中和水平居中的方法

第一种:display:table-cell的方式 .container { /*父级容器*/ display:table-cell; text-align:center; vertical-align:middle; } 第二种:flex盒子布局 .container { /* 父级容器 */ display:flex; justify-content: center; align-items: center; } 第三种:css3的transform .container { /* 父容器

css盒模型宽高混合计算calc

例如: .element{ width:calc(expression); } 兼容性:在IE9+.FF4.0+.Chrome19+.Safari6+都得到了较好支持,但是在移动端的支持不是很好. 其中,expression是一个用来计算长度的表达式,支持“+”,“-”,“*”,“/”运算符. 表达式中有“+”,“-”运算符的,前后必须要有空格,例如 “width:calc(100% - 20px)”这种写法:而对于“*”,“/”并没有这种要求,但为了风格的统一,建议前后也要留空格. 总结 :

百度地图设置div样式宽高为百分比不显示地图

如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#allmap {width:100%;height:100%;overflow: hidden;margin:0;font-family:"微软雅黑";position:absolute;} </style> 完美解决

CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%; transform: translateX(-50%) translateY(-50%); } flex布局写法: .center{ display:flex; justify-content:center align-items:center; } 2.禁

css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

css 几种常用的简单容易记住的水平垂直居中方法前言正文第一种方法第二种方法结束语前言我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用一下margin就可以完成,这里就不向大家做过多的解释了.但是,如果不知道元素的宽高呢? 是不是就会在这上面用点心思了,接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧,放心绝对容易记. 正文首先来创建一个html页面,html代码和css代码如下: <div class=

css margin没有宽高的元素会显示吗

热门专题