第七章  基本视觉格式化

正常流(没有浮动和定位元素)、非替换元素(包含在文档中)、替换元素(用作其它内容的占位符,如img)、块级元素(会和其它元素形成换行,如div)、行内元素(span之类的元素)和根元素(位于文档树顶端的元素,在HTML文档中就是元素html)

水平格式化

<p style="width:200px;">wideness?</p>  /*200px指的是内容区的宽度*/

水平格式化七大属性:margin-left、border-left、padding-left、width、padding-right、border-right和margin-right,其中有3个属性可以设置为auto:元素内容的宽度width及左右外边距

如果设置width、margin-left或margin-right的某个值为auto,而余下两个属性指定为特定值,那么设置为auto的属性会自动确定所需长度,从而使元素框等于父元素的width

如果这3个属性都设置为特定值(值不合理,且过分受限),此时会把margin-right强制取为auto

某个外边距和width设置为auto,设置为auto的外边距会减为0

3个值都设置为auto,两个外边距都自动为0,width完全填充其包含块

外边距可以设置为负数(按反方向偏移)

如果width、内边距和外边距设置为百分数值,会应用同样的基本规则

替换元素,非替换元素的所有规则同样适用于替换元素,有一个例外:如果width为auto,元素的宽度则为内容的固有宽度,可以为width设置一个特定值覆盖这个规则,变化成比例调整

垂直格式化

垂直格式化七大属性:margin-top、border-top、padding-top、height、padding-bottom、border-bottom和margin-bottom,其中有3个属性可以设置为auto:元素内容的高度height及上下外边距。上下内边距和边框必须是特定的值或者0,如果将margin-top或margin-bottom设置为auto,它会自动计算为0,两个都为auto的话,都为0(没有外边距)

百分数高度,计算的是包含块height的百分数

如果将块级正常流元素设置为height:auto,显示时其高度将正好是包含其内联内容的行高,下边框是文本最后一行的下面,上边框是文本第一行的上面

合并垂直外边距:垂直相邻外边距的合并,这种行为只应用于外边距

对于负外边距,两个垂直外边距都为负值,取绝对值大的那个,若一个正一个负,正的要减去负值的绝对值

行内元素

span{border:1px dashed black;}

基本术语和概念

匿名文本:未包含在行内元素中的字符串;em框:font-size的值确定了em框的高度;内容区:元素中各字符的em框串在一起构成的框;行间距:font-size与line-height的值差除2;行内框:对于非替换元素,行内框高度等于line-height,对于替换元素,行内框高度等于内容区高度;行框:包含行内框的最高点和最低点

改变元素显示

display,none、inline、block、inline-block(行内块元素,像一个图像放在文本中,底端位于文本基线上)

run-in属性使某些块级元素成为下一个元素的行内部分

第八章  内边距、边框和外边距

width、height、margin

border-style,none(无)、hidden(隐藏)、dotted(虚线)、dashed(较粗的虚线)、solid(实线)、double(双线)、outset(凸起按钮)

border-top-style、border-right-style、border-bottom-style、border-left-style

border-top-width、border-right-width、border-bottom-width、border-left-width,thin、medium(默认)、thick、<length>、inherit

border-top-color、border-right-color、border-bottom-color、border-left-color

简写border-top、border-right、border-bottom、border-left

h1{border-bottom:thick solid gray;}

padding-top、padding-right、padding-bottom、padding-left

第九章  颜色和背景

background-color

background-image:a.grid{background-image:url(small.gif);}

background-repeat,repeat(垂直和水平方向都平铺)、repeat-x、repeat-y、no-repeat、inherit

background-image:body{background-image:url(small.gif);background-repeat:repeat-x;}

background-position,<percentage>、<length>、left、center、right

p{background-position:top right;}  /*也可用百分数左上角为0%,0%,第一个数表示左右,第二个表示上下*/

background-attachment,scroll、fixed(相对于可视区是固定的)、inherit

汇总background

body{background:white url(yinyang.gif);}

第十章  浮动和定位

float,left、right、none(初始值,阻止浮动)、inherit

浮动元素从文档的正常流中删除,其他内容会“环绕”该元素,浮动元素的包含块是其最近的块级祖先元素

将一个浮动元素的外边距设置为负值,这个浮动元素将超出最近块级父元素的限制

浮动元素、内容和重叠

行内框(strong)与浮动元素重叠时,其边框、背景和内容都在该浮动元素“之上”显示

块框(p元素也是块级元素)与浮动元素重叠时,其边框、背景都在该浮动元素“之下”显示,而内容在浮动元素“之上”显示

清除,元素设置为禁止浮动元素出现在它旁边,left、right、both、none(初始值)和inherit

h3{clear:left}  /*防止h3左边出现浮动元素*/

定位

position属性,static(初始值,静止的)、relative(相对的,文档流中保存原来的位置)、absolute(绝对的,从文档流中完全删除)、fixed和inherit

偏移属性,top(到包含块顶端的距离)、right、bottom、left

限制宽度和高度

min-width、min-height、max-width、max-height为元素定义一个最小最大属性

内容溢出和剪裁

overfiow,visible(初始值,元素之外也可见)、hidden(隐藏)、scroll(滚动)、auto和inherit

元素可见性visibility,visible(初始值,可见)、hidden(隐藏,不可见)、collapse(折叠)和inherit

p.clear{visibility:hidden;}

绝对定位

元素绝对定位时,会从文档流中完全删除,然后相对于其包含块定位,其边界根据偏移属性(top、left等)放置,定位元素不会流入其他元素的内容

z-index,可以利用其来改变元素相互覆盖的顺序,z代表从前往后的轴,拥有较高z-index值的元素会覆盖拥有较低z-index值的元素

css权威指南(下)的更多相关文章

  1. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  2. CSS权威指南 - 层叠

    CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...

  3. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  4. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  5. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

  6. CSS权威指南(第三版)

    CSS权威指南(第三版).pdf 网盘: https://545c.com/file/24657411-425141851   获取码:  276922

  7. css权威指南-基本视觉格式化(水平与垂直)

    1.基本概念     (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法                     就是使之成为浮动或定位元素.     ( ...

  8. CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  9. css权威指南--笔记

    第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...

随机推荐

  1. Swift小功能点积累

    label字符加删除线 let label = UILabel(frame: CGRectMake(, , , )) let attr = NSMutableAttributedString(&quo ...

  2. ubuntu nginx 伪静态 设置

    简单的静态设置 1  vim nginx.conf // 修改nginx配置文件 server { .... root /usr/local/nginx/html; #nginx网站根目录 #下面这个 ...

  3. react组件什么周期记录,转的

    react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数,理解生命周期函数,对写出合理的commponet很有帮助.下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题. ...

  4. Common Configration实验

      用了一个CombinedConfigration 来做属性文件的继承(套用)发现它是以先添加的ConfigureRation作为最终输出也就是如果要实现我们项目中的效果 需要从内层目录向外层目录逐 ...

  5. linux正确重启MySQL的方法

    修改了my.cnf,需要重启MySQL服务,正确重启MYSQL方法请看下面的文章 由于是从源码包安装的Mysql,所以系统中是没有红帽常用的servcie mysqld restart这个脚本 只好手 ...

  6. user-agent查询

    浏览器地址栏输入:javascript:window.navigator.userAgent通过网站查询:http://www.enhanceie.com/ua.aspxhttp://www.user ...

  7. xampp install

    the way of restart: sudo /opt/lampp/lampp restart config root: /opt/lampp/etc/httpd.conf /opt/lampp/ ...

  8. Linux下high CPU分析心得【非原创】

    非原创,搬运至此以作笔记, 原地址:http://www.cnitblog.com/houcy/archive/2012/11/28/86801.html 1.用top命令查看哪个进程占用CPU高ga ...

  9. linux系统装windows时需要注意的问题

    (1)    利用windows安装光盘安装XP.WIN7系统时,sata接口的硬盘要将其设置为兼容模式或者IDE模式才能安装.我认为这些盗版光盘安装系统的软件并没有支持sata接口硬盘的驱动程序才导 ...

  10. PBS

    赞同,已经试验成功.后来查手册: $man qdel-p 的功能是强制净化队列.这个 "p" 可能是  "purge" 的缩略形式 qsub,qdel,qmgr ...