CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

原创最新推荐文章于 2024-10-01 23:54:35 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

一：Position

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置
定位元素（positioned element）position 为 relative, absolute, fixed 或 sticky
相对定位元素（relatively positioned element）position:relative
绝对定位元素（absolutely positioned element）position:absolute/fixed
粘性定位元素（stickily positioned element）position:sticky

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局
如果父级没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

This value creates a new stacking context when the value of z-index is not auto

fixed:相对于浏览器窗口定位 This value always creates a new stacking context. When an ancestor has the transform, perspective, or filter property set to something other than none, that ancestor is used as the container instead of the viewport

relative:相对于本来的位置定位 Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements;This value creates a new stacking context when the value of z-index is not auto

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

If both top and bottom are specified (technically, not auto), top wins. 如果top和bottom同时设定以top为准
If both left and right are specified, left wins 如果left,right同时设定以left为准

sticky : 设定TRBL之中一个值生效，祖先有不能有overflow:hidden，不超过这个值相当于position:relative 当超过这个值后,相当于position:fixed

此外还有三个值（全局属性）：

inherit：继承

initial：默认值

unset：是继承属性的就继承，不是就默认值

二：盒模型
margin border padding content

标准模式：有DOCTYPE，实际宽度为width+padding-L&R+border-L&R 高度 height+padding-T&B+border-T&B
混合模式：宽，高css中设定(当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。)

三：块级元素和行内元素
块级元素：排斥与其他元素一行，可以设定宽高，一般是容器，div,p,h1~h6
行内元素：不可以设置宽高，可以与其他行内元素位于同一行。高度一般由字体大小决定，宽度由内容控制。a span em strong i等

不过可以用display属性来改变 display:block 块级 display:inline 行内 display:inline-block 又是行内又能设置宽高

四：background

background是简写属性，用来集中设置各种背景属性

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

下面的一个或多个值，可以按任意顺序放置：

<attachment>

参看 background-attachment

background-attachment:

scroll:此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）

fixed:当页面的其余部分滚动时，背景图像不会移动

local:此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框

<box>

参看 background-clip

background-clip: 设置元素的背景是否延伸到边框下面

border-box背景延伸到边框外沿（但是在边框之下）。 padding-box边框下面没有背景，即背景延伸到内边距外沿。 content-box背景裁剪到内容区 ( content-box) 外沿。 text背景被裁剪为文字的前景色。
<background-color>

参看 background-color

<bg-image>

参看 background-image

可以设置多背景(多张图片)，也能设置无背景（none），先设置的图片层级高

<position>

See background-position

background-position:

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;