margin 百分比是按參照物来计算滴 不知道吧?
<style>
#demo{
margin: 0 auto;
width: 1000px;
height: 500px;
background: #eee;
overflow: hidden;
/*垂直显示,改变參照物*/
/*-webkit-writing-mode: vertical-rl;*/
/*writing-mode: tb-rl;*/
}
#demo p{
margin:10% 1%;
background: #ccc;
}
</style>
<div id="demo">
<p>我是一个p哦</p>
</div>
margin:10% 1%;
横向显示的按宽度算
垂直显示是按高度算
留作纪念。多解释。
margin 百分比是按參照物来计算滴 不知道吧?的更多相关文章
- margin百分比,重叠和auto
一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...
- H5移动前端完美布局之-margin百分比的使用
一 ,背景 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐 然后.... 当然 现实情况没有这么糟糕.. ...
- margin百分比的相对值--宽度!
假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px? 不是1 ...
- css的margin
1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...
- margin系列之百分比
本系列摘自 px; height: 600px; } #demo p{ margin: 10% 5%; } HTML: <div id="demo"> <p&g ...
- 当padding/margin的取值形式为百分比时。。。。。
一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...
- CSS margin详解
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
- 理解margin
margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定 ...
- CSS深入理解之margin
前言 改变容器尺寸 margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table- ...
随机推荐
- POJ 1149 PIGS (AC这道题很不容易啊)网络流
PIGS Description Mirko works on a pig farm that consists of M locked pig-houses and Mirko can't unlo ...
- 【转】SQL SERVER 主体,已同步
转自郭大侠博客: https://www.cnblogs.com/gered/p/10601202.html 目录 SQL SERVER 基于数据库镜像的主从同步... 1 1.概念... 2 1. ...
- "etc/profile" E212: Can't open file for writing
今天安装Java环境,出现如下错误: "etc/profile" E212: Can't open file for writing 这是安装到本地JDK路径不正确导致.怎么办呢? ...
- vue-cli脚手架安装过程(精简版)
1:打开node的控制台,并找到对应的文件夹 2:检查node的版本 node -v 3:检查npm的版本 npm -v 4:检查cnpm的版本 cnpm -v 5:安装全局及脚手架 cnpm ins ...
- mysql 统计按天、星期、按月数据的各种 sql 语句 (转录)
文章主要是作为知识整理,内容略有修改,方便以后查阅,内容转摘至 陈宇衡的个人博客,欢迎前去围观. 作为演示效果,先创建一个测试表,在插入两条数据(注:时间为 datetime 类型,unix 时间戳需 ...
- jstl与el结合常见用法
JSTL Functions标签库 在JSP文件中使用Functions标签库,要先通过taglib指令引入该标签库: <%@taglib uri=”http://java.sun.com/js ...
- windows7下搭建HTTP服务器
打开控制面板,选择并进入“程序”,双击“打开或关闭Windows服务”,在弹出的窗口中选择“Internet信息服务”下面所有地选项,点击确定后,开始更新服务. 2 更新完成后,打开浏览器,输入“ ...
- PAT_A1148#Werewolf - Simple Version
Source: PAT 1148 Werewolf - Simple Version (20 分) Description: Werewolf(狼人杀) is a game in which the ...
- python 从给定的URL中提取顶级域名(TLD)
安装 PyPI的最新稳定版本: pip install tld 或者GitHub的最新稳定版本: pip install https://github.com/barseghyanartur/tld/ ...
- Labview学习笔记(二)
一.编程基础 LABVIEW程序成为虚拟.仪器程序,简称VI,一个最基本的VI包括三个部分:前面板.程序框图和图标/连接端口. 1.前面板 在前面板窗口中,可以添加输入控件和显示控件,同时,可以用快捷 ...