margin

元素水平垂直居中的方式有哪些？

由 和自甴很熟 提交于 2019-12-24 12:02:17
1、absolute加margin方案 div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%: margin-top: -50px; margin-left: -50px; } 2、fixed 加 margin 方案 div{ position: fixed; width: 100px; height: 100px; top: 0; right:0; left: 0; bottom: 0; margin: auto; } 3、display:table 方案 div{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; height: 100px; } 4、行内元素line-height方案 div{ text-align: center; line-height: 100px; } 5、flex 弹性布局方案 div{ display: flex; align-items: center; justify-content:center } 6、transform 未知元素宽高解决方案 div{ position: absolute; top: 50%; left: 50%;

Strange 5px Margin

由 倾然丶 夕夏残阳落幕 提交于 2019-12-24 10:47:42
问题 I am building a website here: argit.bounde.co.uk I have been searching for hours to try and find the solutions. I am trying to build my own slider which will be fluid width so I cant define height / width where possible. I have got the bulk of the slider working with stock images however when I put elements underneath it they are 5px lower than they are meant to be. This happens in all browsers except IE that I have tested. I want to give the banner which is underneath my slider a negative

CSS基础--常用样式

由 强颜欢笑 提交于 2019-12-24 06:28:26
一、背景相关 背景颜色　　　　　　 background-color ：颜色名称/rgb值/十六进制值 背景图片　　　　　　 background-image　：url('') 背景图片平铺方式　　 background-repeat　：　repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复) 设置背景图片位置　　 background-position　：　　数字+单位/center/top/bottom/left/right 同上。 例如：50px 50px 背景图片是否滚动　　 background-attachment　：　　fixed(不滚动) scroll（滚动） dmeo: 设置页面的body背景： <!DOCTYPE html> <html lang="en"> <head> </head> <style> body{ background-color: aquamarine; background-image: url("cool.jpeg"); background-repeat:repeat-y ; background-position: top; background-attachment: fixed; } </style> <body> </body> </html> 二、边框、边距 边框：border 用法：

Margin-top/bottom not works the to margin-left/right in a sample

由 人盡茶涼 提交于 2019-12-24 05:22:00
问题 I am new to HTML & CSS. I have tried the code below <!DOCTYPE html> <html> <head> <title>Center</title> </head> <body> <div id="div1" style="width:300;background-color:olive"> <div id="div2" style="width:100px; margin-left:auto; margin-right:auto; background-color:gray"></div> </div> </body> </html> The "div2" is in centered horizontally. Then I change the width to height & margin-left/right to margin-top/bottom. (the code below) <!DOCTYPE html> <html> <head> <title>Center</title> </head>

Negative Margin in WPF

由 荒凉一梦 提交于 2019-12-24 04:44:11
问题 When I set margin edges negative values, I want them still be inside the parent panel, but to cropped with parent border. This is What i have: and this is what I want (made in paint): My XAML: <Grid HorizontalAlignment="Left" Height="97" Margin="113,60,0,0" VerticalAlignment="Top" Width="125" Background="#FFF97C7C"> <Ellipse Fill="#FFF4F5F4" Height="56" Margin="-48,-22,-46,63" Stroke="Black"/> </Grid> How can I do it? 回答1: Use ClipToBounds : <Grid ClipToBounds="True" HorizontalAlignment="Left

-webkit-margin-before

由 半城伤御伤魂 提交于 2019-12-24 02:15:51
总的来说：这是CSS3.0的对于文章段P容器的定义方法语句！display:block这个样式，只定义了P容器为一个块;后面四句是CSS3中的样式定义方法；-webkit-margin-before: 1em;-webkit-margin-after: 1em;分别定义p的上边距和下边距的数值是1倍字体高度，如10px像素的字，那么边距就为10px; -webkit-margin-start: 0px;-webkit-margin-end: 0px; 上面二句则定义为左右边距都为0PX，这个应该好理解；所以以上p {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}相当于CSS2.0中的p { display: block; margin-top: 1em; margin-bottom: 1em; margin-right: 0px; margin-left: 0px;} 但由于CSS3.0要求浏览器版本较高，所以国内并没有流行CSS3.0样式，依然以CSS2.0为主流，但以后应该是CSS3.0的天下，因为它代表着先进性。 下面是讲下它的由来：

Avoid layout to be resized on margin changed

由 ♀尐吖头ヾ 提交于 2019-12-24 02:14:57
问题 I'm programmatically changing the margin of a layout inside a framelayout. My goal is to make a sliding view like the Facebook app. Is it possible to avoid this layout to be resized? This is my layout moving: <LinearLayout android:layout_width="match_parent" android:layout_height="48dp" android:background="#00a2ff" android:gravity="center_vertical" android:orientation="horizontal" > <LinearLayout android:id="@+id/left" android:layout_width="match_parent" android:layout_height="match_parent"

margin-bottom is calculated differently in Opera

由 蹲街弑〆低调 提交于 2019-12-24 02:09:38
问题 I have a div with relative position and a children div with position absolute. <div id="container" class="out"> <div id="inside"></div> </div> CSS: #container { width:100px; height:100px; position: relative; } #inside { position:absolute; top:25px; left:25px; right:25px; bottom:25px; margin-bottom:24px; } Chrome, Safari and Firefox seem to work correctly but Opera browser (in Mac) is calculating margin-bottom twice. This a fiddle: http://jsfiddle.net/4fw9wc0o/1/ Is this a bug or am I missing

Crop transform in WPF?

由 旧时模样 提交于 2019-12-24 01:41:28
问题 WPF allows to use subclasses of Transform to scale(ScaleTransform), rotate(RotateTransform), skew (SkewTransform) and so on any FrameworkElement. But I cannot see how to crop some FrameworkElement using these. Is there any way how to crop lets say a Label of width 30px so it will behave as if its width was 20px? To be more exact: I want to do this before laying out so that the Label would be laid out as if its width was 20. But I want it to be rendered fully so the last 10 pixels will be

CSS基础

由 风格不统一 提交于 2019-12-24 01:25:01
CSS基础语法： 例如 p{ color:red; background-color: green; } css的四种引入方式: 1 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <p style="color:red;background-color:green">hello liuliu</p> 2 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下 <style> p{ color:red; background-color: green; } </style> 3 将一个.css文件引入到HTML文件中 <link rel="stylesheet" href="first.css"> 4 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下： <style> @import 'first.css'; </style> 注意： 导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件
订阅 margin