CSS, HTML 碎片式整理（二）

2020-02-27 本文已影响0人肉桂猿

1. 盒模型
CSS最基础的布局。
keyword - content, padding, border, outline, margin, box-sizing, block box(块级元素), inline box(行内元素)

margin

image
max-width

image

width
百分比是一种相对于包含块的计量单位。它对图片很有用。

媒体查询 - “响应式设计（Responsive Design）” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！媒体查询是做此事所需的最强大的工具。

image

box-sizing

content-box (default)
width/height includes only the content, no padding, no border
W3C标准盒模型宽度=内容宽度(content)+padding + border+ margin

border-box
width/height includes content, padding and border

块级元素
一个块级元素会新开始一行并且尽可能撑满容器。常用的块级元素包括div、 p 、 form 和HTML5中的新元素： header 、footer 、 section 等等。

2. 定位
display: relative, fixed, absolute

static是默认值
relative表现的和 static 一样，除非你添加了一些额外的属性：设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
fixed 相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、right 、bottom 和 left 属性都可用。
absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
none 一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden;还会占据空间.

3. 浮动
float: left, right - 网页上实现文本环绕图片的效果
clear float

image.png

4. 文字居中

text-align: center

5. 块居中

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
}
<P class="blocktext">This rather...

6. 垂直居中

For a document that looks like this:

<div class=container3>
  <p>This paragraph…
</div>

the style sheet looks like this:

div.container3 {
    height: 10em;
    position: relative; /* 1 */
} 

div.container3 p {
    margin: 0;
    position: absolute; /* 2 */
    top: 50%; /* 3 */
    transform: translate(0, -50%); /* 4 */
}

The essential rules are:

1. container relative 定位
1. element absolute 定位
1. element halfway down the container with top: 50%.
  (Note that 50% here means 50% of the height of the container.)
1. translation to move the element up by half its own height.
  (The 50% in translate(0, -50%) refers to the height of the element itself.)

another way is using flex:

div.container5 {
  height: 10em;
  display: flex;
  align-items: center;
}

div.container5 p {
  margin: 0;
}

6. 水平居中& 垂直居中

<div class=container4>
  <p>Centered!
</div>

div.container4 {
  height: 10em;
  position: relative;
}

div.container4 p {
  margin: 0;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

The margin-right: -50% is needed to compensate the left: 50%. The left rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container. By saying that the right margin of the element is further to the right by that same amount, the maximum line length is again the same as the container's width.

When you remove the margin-right: -50% and resize the window again, you'll see that the sentences will be broken already when the window is still twice as wide as the text lines.

Another way is using flex or table:

// flex
div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
}

// table
.parent {
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
}

.parent > .child {
  display: table-cell;
  vertical-align: middle;
}

refer: A Guide to Flexbox

CSS, HTML 碎片式整理（二）

猜你喜欢

热点阅读