em | 易学教程

Margin and padding using em

阅读更多关于 Margin and padding using em

问题 When 1em is applied to an element, it takes the default value of the browser (usually, 16px) or the font-size value of its parent, right?. But I noticed that if I use something like margin-top: 1em in a h1 element (without using a reset stylesheet, and therefore, h1 is set to font-size: 32px ), then 1em is equal to 32px , even if its parent element is set to font-size: 16px . However, using something like font-size: 100%; solves the discrepancy. What am I missing? 回答1: When 1em is applied to

Reset font-size:0 doesn't work with 'em' unit

阅读更多关于 Reset font-size:0 doesn't work with 'em' unit

问题 I have a parent element that sets the font-size to 0 (zero) and its child that restore the value .parent { font-size: 0; } .child { font-size: 1em; /* font-size: 16px; */ } Using em it doesn't work. Using px as unit makes the text appear again instead. Can anybody explain me why? 回答1: Yes, it's normal. Because em it's a relative meassure. If you think in what are you making, you are making this: 0 * 1 = 0 So if you reset to 0 you'll obtain forever a zero value. You need to use rem (root em)

javafx root -fx-font-size and em sizing

阅读更多关于 javafx root -fx-font-size and em sizing

问题 I'm trying to resize my layout elements using a root font-size and 'em' values. It looks like whenever I "touch" the -fx-font-size attribute, the root's font size is being reset to the base value (1em = 12px). For the simple fxml: <BorderPane fx:id="mainStack" prefWidth="600" prefHeight="400" stylesheets="/style.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <left> <VBox fx:id="leftPane"> <Button text="btn1"></Button> <Button text="btn2" styleClass="textBigger"><

When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?

阅读更多关于 When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?

问题 I have a global reset that sets font-size and line-height to inherit for every element: * { font-size: inherit; line-height: iherit; } For html , i define them explicitly: html { font-size: 16px; line-height: 1.25em; } /* 16×1.25 = 20 */ Note, that line-height is set in a relative unit. For h1 , i define different font-size: h1 { font-size: 4em; } I expect h1 to inherit the relative line-height of 1.25em . The resulting line-height should be equal to 80px (16×4×1.25). But in reality h1 's

Why can't I decrease the line-height of this text?

阅读更多关于 Why can't I decrease the line-height of this text?

问题 http://jsfiddle.net/mJxn4/ This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px. The CSS in question is: #others .item em { font-size: 13px; line-height: 17px; } Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean. Why

CSS: Em rounding error

阅读更多关于 CSS: Em rounding error

问题 Recently, I've rewritten the CSS file for a site I'm making and tried to make most elements and fonts dynamic in size using em instead of px. The sizes work.. kind of, but there's at least one issue. When using the em unit for the margins of a box (margin: 0.25em), in Firefox I get 4px at the top/left and 3px at the right/bottom - based on 14px font-size (which is actually the box's font-size 0.875em of the browser's 16px). Now, I'm new to em and it's quite possible that I've misunderstood

布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）...

阅读更多关于布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）...

一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法　　 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。二、流式布局（Liquid Layout）　　流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。　　网页中主要的划分区域的尺寸使用百分数

CSS “em” issue: avoid scalling to font-size of specific element

阅读更多关于 CSS “em” issue: avoid scalling to font-size of specific element

My site is almost totally designed in "em" (as opposed to px). It is supposed to be much better for modern browsers. Most of the text is font-size:1em. 1em = 16px by default, I didn't specify it. But I have some content where font-size is 1.2em and other which is 0.8em (for example for H1 or for small buttons). The issue with "em" is that it re-scale all the sizes of an element (margin, padding, height...) according to the font-size. I have the specific code in my CSS: /* Reset */ html [and many other elements] { font-size: 100%; font: inherit; } /* Design */ body { font-size: 1em; line-height

Text-area with em not working in IE and Opera

阅读更多关于 Text-area with em not working in IE and Opera

This is my first attempt to make a complete webpage layout in 'em' measurements. I am building a live preview markdown editor. This page works perfectly in Firefox and chrome, but in IE(i have IE9) and Opera(updated last night) The text-area shoots the boundary significantly. In Opera, the border of textarea is also not showing rounded corners. ( text area is showing rounded corner but not its border) This is css for the textarea #pad { background-color:#BBBB99; background-image:url("../img/edit.png"); border-color:rgba(32, 32, 52, 0.39); border-radius:1em 1em 1em 1em; font-size:1.3em; height

Apache Solr学习第五篇 java操作solr

阅读更多关于 Apache Solr学习第五篇 java操作solr

1. 构建实体类Goods package com.fan.pojo; import org.apache.solr.client.solrj.beans.Field; import org.springframework.data.annotation.Id; import java.io.Serializable; public class Goods implements Serializable { @Override public String toString() { return "Goods{" + "id='" + id + '\'' + ", goodsname='" + goodsname + '\'' + ", price=" + price + ", description='" + description + '\'' + '}'; } @Id private String id; @Field("goodsname") private String goodsname; @Field("price") private float price; @Field("description") private String description; public String getId() { return id; } public void setId