HTML5布局之路 文本与特殊布局

一、文本:
背景:background,复合写法,类似于border,可以同时设置颜色、图片、重复、定位、关联(滚动)等。
默认情况下背景会横纵重复。

透明:兼容写法:
{
filter: alpha(opacity = 50);
opacity: 0.5;
}
透明度会影响后代。可以通过z-index来解决。
还可以通过rgba控制透明度。

段落:
line-height: 行间距
text-decoration:文本修饰,如underline下划线
text-indent:首行文本缩进,用em好一点
text-align:水平对齐方式
vertical-align:垂直(有bug,不建议使用)
那么如何居中呢? 用定位。

word/letter-spacing:间距,单词和字母
word-break:自动换行,break-all允许单词内换行

字体样式:
color
font-family:字体系列
font-size:大小
font-style:倾斜
font-weight:粗细
font复合样式,一般不使用

网络字体:用@font-face,先字体系列,然后src


二、定位布局

当页面中出现多个元素层叠状态的时候,用定位布局。

定位:position
static 默认值
fixed 相对于浏览器布局
relative 相对于自己本来的位置进行定位,通常用来作为绝对定位的容器
absolu 绝对定位,父元素有定位过的就以最近的去定位,否则以html标签进行定位,会收到父元素padding的影响

都需要left top right bottom进行激活。

相对定位的元素不会脱离文档流。绝对定位的元素会脱离文档流。当元素脱离文档流就可以为元素设置盒模型属性,但是margin属性中的auto会失效。

z-index越大,越在上面。

界限控制:max/min-height/width
伪元素:::before,::after,内容可以用content属性。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,509评论 0 5
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,094评论 0 1
  • 将者帅者,龟缩九宫; 嫔妃伺候,侍卫簇拥; 可怜卒兵,笔直前冲; 天马蹩脚,无法行空; 炮口向天,隔山闷轰; 车不...
    孤独乞丐阅读 204评论 0 2