建站记录3——边距自适应布局Tip总结
来源:互联网 发布:plc编程下载 编辑:程序博客网 时间:2024/06/01 13:33
Width属性只指定内容区的宽度。一般高度height默认auto。
默认宽度:auto,会延伸占满可用空间。
%:使用百分数,宽度会计算为所在容器宽度的百分比(容器可以是body,div等)。
Em呢?在CSS中,“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间,而和它所占据的水平空间没有任何的关系。em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em, 10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em特点:1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。CSS代码html { font-size: 62.5%; }这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即:CSS代码 html { font-size: 63%; }
在中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算非常不通 用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了: CSS代码 p { text-indent: 2em; }
rem(root em,根em):是CSS3新增的一个相对单位,使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
Text-align会对块元素中所有的内联内容起作用,并且只能对块元素起作用,对内联元素不起作用。
h具有默认外边距。
<blockquote>标签定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。属性:cite,定义引用的URL
Div为块级别内容创建逻辑划分,没有默认样式。
Span负责内联内容的逻辑分组,没有默认样式。
<li><span class=”cd”>Bugddha Bar</span>,<span class=”artist”>CC</span></li>
内联元素的外边距和内边距。内联元素的四周都增加外边距,只能看到左右的外边距。
可以对内联元素的上下增加内边距,但是内边距不会影响包围它的其他内联元素的间距,所以内边距会与其他内联元素重叠。
图像与其他的内联元素稍有不同,宽度/外边距/内边距属性更像块元素的相应属性。
Margin:CSS定义了一些规则,允许为外边距指定少于 4个值。规则如下:
l 如果缺少左外边距的值,则使用右外边距的值。
l 如果缺少下外边距的值,则使用上外边距的值。
l 如果缺少右外边距的值,则使用上外边距的值。
new???
margin - padding - height - font-size
- 建站记录3——边距自适应布局Tip总结
- CSS自适应布局总结
- CSS自适应布局总结
- CSS自适应布局总结
- CSS自适应布局总结教程
- 记录tip
- 2栏布局——一栏自适应
- CSS3 table — 自适应布局表格
- 【移动端】页面自适应布局—基于rem布局
- 关于自适应布局的一点总结
- 响应式布局跟自适应布局的不同总结
- python学习tip记录
- 菜鸟学Android——横屏竖屏自适应布局
- padding——图片文字的自适应布局
- 移动端自适应布局解决方案——rem
- 三栏布局——左右固定,中间自适应
- css布局—一列宽度固定,一列宽度自适应
- 手机端页面自适应解决方案—rem布局
- win7系统pagefile.sys占用空间调整
- 20条Linux命令面试问答实例
- [PAT甲级]1015. Reversible Primes (20)(可逆素数判断)
- TCP状态图解
- 加载动态效果(三点变化)-3
- 建站记录3——边距自适应布局Tip总结
- 实现浏览器兼容版的element.children
- Eclipse Maven 编译错误 Dynamic Web Module 3.0 requires Java 1.6 or newer 解决方案 (特别注意))
- Docker中监控Java应用程序的方法!
- A
- leetcode--1.two sum
- Git && SVN
- opencv 利用仿射变换函数对图像进行任意角度旋转
- 加载动态效果(8点圆形转)-4