CSS学习笔记2

原创
2017/10/15 15:52
阅读数 530

基本视觉格式化

基本框

    CSS假定每个元素都会生成一个或多个矩形框, 框中间为内容框, 内容周围有可选的内边距, 边框, 外边距.

p { border: 1px solid red; margin: 2px 2px 2px 2px; padding: 5px 5px 5px 5px; }

浏览器调试的效果:

这里, 内边距(padding)设置为(5px 5px 5px 5px), 外边距(margin)设置为(2px 2px 2px 2px), 边框设置为(宽度1px, 红色, solid状态).

块级元素

块级元素: 指段落, 标题或div之类的元素. 这些元素会在框之前和之后生成"换行", 所以处于正常流中的块级元素会垂直摆放. 通过声明display:block, 可以让元素生成块级框.

    块级元素通常包含padding(内边距), border(边框), margin(外边距), 而元素的width和height均跟padding挂钩, 与border/margin无关. 元素框的width和height才与padding/border/margin挂钩.

水平格式化

    我们考虑以下的代码:

<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

这里, 整个元素框的width为260px = 200 + 10 * 2 + 20 * 2;

    水平属性有"7大属性": margin-left, border-left, padding-left, width, padding-right, border-right, margin-right;

这"7大属性"中, 只有元素内容的width, margin-left, margin-right可设置为auto.

关于auto, 我们考虑以下代码:

<div style="width: 400px;">
    <p>a paragraph</p>
</div>

这里, 我们设定div的宽度为400px; 内部包含一个p.

1. 设定p存在width, margin-left, margin-right:

p {
    width: 200px;
    margin-left: 50px;
    margin-right: 50px;
    border: 1px solid red;
}

这里我们会发现, div的宽度400px !== 200px + 50px + 50px. 而页面的调试效果表明如下:

调试中显示的右外边距为50px, 但实际上为150px, 这种情况下CSS会强制将margin-right设置为auto.

2. 设定p的width为auto, margin-left, margin-right为空或auto:

这时候width会占据全部的空间.

3. 设定p的width为200px, margin-left/margin-right设定为auto, 则p会居中, 而margin-left/margin-right会平分剩余的宽度:

4. 设定p的margin-right为"-50px":

div {
    width: 400px;
    border: 3px solid black;
}
p {
    margin-left: 10px;
    width: auto;
    margin-right: -50px;
    border: 1px solid red;
}

页面样式为:

这里, p的width = 438 = 400 - 10 - (-50) - 1 * 2

垂直格式化 ---- 这节没看懂!!!!

垂直属性有"7大属性": margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom. 只有height, margin-top, margin-bottom可设置为auto.

但在一个正常流中, 如果一个块元素的margin-top或margin-bottom设置为auto, 它会自动计算为0. 而height必须设置为auto或者某个类型的非负值.

行内元素

基本术语和概念

匿名文本: 所有未包含在行内元素中的字符串. 例如<p>this is <em>a</em> test</p>中, "this is"和"test"均为匿名文本.

em框: 字符框, 由font-size确定em框的高度.

内容区: 在非替换元素中, 内容区为元素中各字符的em框串在一个构成的框. 在替换元素中, 内容区就是元素的固有高度再加上可能有的外边距, 边框或内边距.

行间距: font-szie和line-height之差.

行内框: 这个框通过向内容区增加行间距来描述. 对于非替换元素, 元素行内框的高度刚好等于line-height的值. 对于替换元素, 元素行内框的高度则恰好等于内容区的高度, 因为行间距不应用到替换元素.

行框: 包含该行中出现的行内框的最高点和最低点的最小框.

构造一个行框的步骤:

  1. 确定行中各元素行内框的高度: 1) 得到各行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值, 再将line-height减去font-size, 这就得到了框的行间距. 2) 对于替换元素, 等于height + margin-top + margin-bottom + padding-top + padding-bottom + border-top + botder-bottom.
  2. 对于各内容区, 确定它在整行基线的上方和下方分别超出多少. 另外, 对于替换元素, 要将其底边放在整行的基线上.
  3. 对于指定了vertical-align值的元素, 确定其垂直偏移量.

行内非替换元素

1. font-size < line-height

<p style="font-size: 15px; line-height: 30px;">
    this is a test
</p>

这时候, 内容区为15px, 而整个行框为30px.

2. font-size > line-height

<p style="font-size: 15px; line-height: 30px; border: 1px solid red;">
    this is a test<br />
    this <strong style="font-size: 50px;"> is a </strong> test <br />
    this is a test<br />
</p>

这时候, 第二行的行框高度则为: 50px, 即第二行的高度大于第一/三行:

3. font-size > line-height, 并且引入vertical-align:

<p style="font-size: 15px; line-height: 30px; border: 1px solid red;">
    this is a test<br />
    this <strong style="font-size: 50px; vertical-align: 10px;"> is a </strong> test <br />
    this is a test<br />
</p>

这时候, is a会上升10px:

4. line-height可能导致文本行互相重叠.  例如p > strong, 而strong.font-size > p.line-height, 则造成strong元素跟p元素重叠.

<p style="line-height: 15px">
    this is a test<br />
    this <strong style="font-size: 45px;">is a</strong> test <br />
</p>

这时候, 我们需要设定strong的line-height, 通常可使用em或者缩放因子:

<p style="line-height: 15px">
    this is a test<br />
    this <strong style="font-size: 45px; line-height: 1em;">is a</strong> test <br />
</p>

缩放因子更为灵活, 因为因子是一个继承属性, 而非计算值. 假设我们想让文档中所有元素的line-height都是其font-size的1.5倍, 则可以如下声明:

body { line-height: 1.5; }

而内边框(padding)并不会影响line-height.

行内替换元素

    替换元素(包括内容,外边距,边距和内边距)来定义元素的行内框, 所以不会造成替换元素和其它文本重叠的情况.

改变元素显示

display: block显示块级元素, 而display:inline则显示行内元素.

display:inline-block是混合产物, 为行内块元素.

div { margin: 1em 0; border: 1px solid; }
p { border: 1px dotted; }
div#one p { display: block; width: 6em; text-align: center; }
div#two p { display: inline; text-align: center; }
div#three p { display: inline-block; width: 6em; text-align: center; }

<div id="one">
    this is a test <p> look, it is a test </p> this is a test
</div>
<div id="two">
    this is a test <p> look, it is a test </p> this is a test
</div>
<div id="three">
    this is a test <p> look, it is a test </p> this is a test
</div>

页面效果如下:

内边距, 边框和外边距

基本元素框

拥有padding(内边距), border(边框), margin(外边距), 其width/height均指内容区域, 与padding/border/margin无关.

 

浮动和定位

浮动

浮动的基本规则(以左为例)

1. 浮动元素的左外边界不能超出其包含块的左内边界.

2. 浮动元素的左外边界必须是源文档中之前出现的左浮动元素的右外边界, 除非后出现浮动元素的顶端在先出现浮动元素的底端下面. --- 这样可防止浮动覆盖.

3. 左浮动元素的右边界不会在其右边右浮动元素的左外边界的右边. 例如, 一个body为500px, 左浮动为300px, 右浮动为300px, 则第二个右浮动会下沉, 而不会和第一个浮动重叠100px.

4. 一个浮动元素的顶端不能比其父元素的内顶端更高. 如果一个浮动元素在两个合并外边距之间, 放置这个浮动元素时就好像在两个元素之间有一个块级父元素.

第一个规则可以防止浮动元素一直浮动到文档的顶端. 第二个规则的含义是: 假设有三个段落, 中间段落浮动, 则像一个div一样浮动, 而不会浮动到顶端去(在第一个段落之上).

5. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高.

6. 如果源文档中一个浮动元素之前出现另一个元素, 浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高.

7. 浮动元素不能超出其包含元素的边界, 除非它太宽, 本身都无法放下, 则会下浮.

8. 浮动元素必须尽可能高的放置.

9. 左浮动元素必须向左尽可能远, 右浮动元素则必须向右尽可能远.

 

浮动元素,内容和重叠

问题: 如果一个浮动元素与正常流中的内容发生重叠会怎样?

CSS2.1给出的答案:

1. 行内框与一个浮动元素重叠时, 其边框,背景和内容都在该浮动元素"之上"显示.

2. 块框与一个浮动元素重叠时, 其边框和背景在该浮动元素"之下"显示, 而内容在浮动元素"之上"显示.

代码:

<html>
    <head>
        <title></title>
<style type="text/css">
img.sideline { float: left; margin: 10px -15px 10px 10px; }
p.box { border: 3px solid gray; padding: 0.5em; }
p.box strong { border: 3px double black; background: silver; padding: 2px; }
h2#jump-up { margin-top: -15px; background: silver;}
</style>
    </head>
    <body>
<img src="./text.png" class="sideline" alt="">
<p class="box">
    thie is a test.thie is a test. thie is a test.thie is a test.
    thie is a test.thie is a test.
    <strong>sstrong text now.strong text now.strong text now.strong text now.strong text now.trong text now...</strong>
</p>
<p>
    this is a test this is a test this is a test this is a test this is a test
    this is a test this is a test this is a test this is a test this is a test
    this is a test this is a test this is a test this is a test this is a test
</p>
<h2 id="jump-up">a heading!</h2>
    </body>
</html>

页面效果:

可以看出: 1. 行内元素(strong)完全覆盖浮动图像, 而块元素只有内容显示在浮动元素之上.

清除

    如果不希望某个元素的左右边有浮动元素, 可使用clear属性.

h3 { clear: left; }: 代表h3元素左边没有浮动元素. 同理, right代表右边没有浮动元素; both代表两边都没有浮动元素.

定位

基本概念

position属性: static, relative, absolute, fixed, inherit

static: 元素框正常生成. 块级元素生成一个矩形框, 作为文档流的一部分, 行内元素则会创建一个或多个行框, 置于其父元素中.

relative: 元素框偏移某个距离. 元素仍保持其未定位前的形状, 它原本所占的空间仍保留.

absolute: 元素框从文档流完全删除, 并相对于其包含块定位, 包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文档流中所占的空间会关闭, 就好像该元素原来不存在一样. 元素定位后生成一个块级框, 而不论原来它在正常流中生成何种类型的框.

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部