HTML 12.1-12.2初学

/* <length> 长度值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
text-indent: 15%;

/* 关键字 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;
Copy to Clipboard

decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>

字体的属性（font-）

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。虽然不能通过 font 直接设置，但是font-stretch，font-size-adjust 和 font-kerning 也会重置为初始值。

语法

可以将font属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。

如果将 font 指定为系统关键字，则它必须是以下之一：caption, icon, menu, message-box, small-caption, status-bar。

如果 font 字体相关的属性的简写：

必须包含以下值：
- <font-size>
- <font-family>
可以选择性包含以下值：
font-style, font-variant 和 font-weight 必须在 font-size 之前
在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
line-height 必须跟在 font-size 后面，由 "/" 分隔，例如 "16px/3"
font-family 必须最后指定

/* Set the font size to 12px and the line height to 14px.
   Set the font family to sans-serif */
p { font: 12px/14px sans-serif }

/* Set the font size to 80% of the parent element
   or default value (if no parent element present).
   Set the font family to sans-serif */
p { font: 80% sans-serif }

/* Set the font weight to bold,
   the font-style to italic,
   the font size to large,
   and the font family to serif. */
p { font: bold italic large serif }

/* Use the same font as the status bar of the window */
p { font: status-bar }

列表样式（list-style）

list-style CSS 属性是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position ，CSS list-style 属性是设置list-style-type, list-style-image 和 list-style-position 的简写属性。

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

line-height

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

非继承属性

当元素的一个非继承属性(在Mozilla code 里有时称之为reset property )没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）

 p { border: medium solid; }

清除浮动

overflow

CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性，

指定除visible(默认值)以外的值将创建一个新的块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

语法

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

值

visible

默认值。内容不会被修剪，可以呈现在元素框之外。

hidden

如果需要，内容将被剪裁以适合填充框。不提供滚动条。

scroll

如果需要，内容将被剪裁以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。（这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。

auto

取决于用户代理。如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。

overlay

行为与auto相同，但滚动条绘制在内容之上而不是占用空间。仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。

p {
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* 内容不会被修剪 */
}

额外标签法

特点

给谁清除浮动，就在其后额外添加一个空白标签。

优点：通俗易懂，书写方便。（不推荐使用）

缺点：添加许多无意义的标签，结构化比较差。 2. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

/* Add an arrow after links */
a::after {
  content: "→";
}

语法

element:after  { style properties }  /* CSS2 语法 */

element::after { style properties }  /* CSS3 语法 */

示例

<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在MDN上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>
Copy to Clipboard
.exciting-text::after {
  content: "<- 让人兴兴兴奋!";
  color: green;
}

.boring-text::after {
   content:    "<- 无聊!";
   color:      red;
}

before

CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

注意: 由::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上， 比如<img>或<br> 元素。

语法

/* CSS3 语法 */
element::before { 样式 }

/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }

/* 在每一个p元素前插入内容 */
p::before { content: "Hello world!"; }

CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。

示例

加入引入标记

使用 ::before 伪元素的一个简单示例就是用于加入引号。此处同时使用了 ::before 和 ::after来插入引用性文本。

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

浮动

什么是浮动？

float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

特点

1. 脱离文档流。. 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

2. 向左/向右浮动直到遇到父元素或者别的浮动元素。

3. 浮动会导致父元素高度坍塌。

4.浮动元素不占空间.

（注：文字概念均来自mdn）

muxin_Yrzz

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫