背景相关属性定位position类选择器

来源：互联网发布：淘宝一件代发货源编辑：程序博客网时间：2024/06/01 08:07

背景相关属性

Background-color：背景色

Background-image:背景图片

Background-repeat：背景图片重复

Repeat：重复（默认）在水平和垂直两个方向上进行复制

No-repeat：不重复

Repeat-x：水平方向重复

Repeat-y：垂直方向重复

也可以将这一属性值封装到一个属性background中，书写顺序是：

背景色：background-color

背景图片：background-image

重复方式：background-repeat

位置：background-position

表达更加简单

尺寸相关属性

height：高度

width：宽度

max-width：最大宽度

max-height：最大高度

min-width：最小宽度

min-height：最小高度

显示相关属性

隐藏元素方法：

visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

Display：none不仅隐藏内容，且不占位置

div{
    height: 100px;
    /*visibility: hidden;*/
    display: none;
}

Inline：将块级元素以内联元素形式显示，此时width和height属性无效，

其空间取决于元素的内容。

Inline-block：将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

li{
    display: inline-block;
    width: 400px;
    background-color: #61ffe9;
}
span{
    width: 600px;
    display: block;
    background-color: aquamarine;
}

也可以将内联元素以块级元素形式表现，即display：block

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) -清除边框外的区域，外边距是透明的。

Border(边框) -围绕在内边距和内容外的边框。

Padding(内边距) -清除内容周围的区域，内边距是透明的。

Content(内容) -盒子的内容，显示文本和图像。

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

定位position

position 属性指定了元素的定位类型。

position 属性的四个值：

static

relative

fixed

absolute

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

relative 定位

相对定位元素的定位是相对其正常位置。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

bsolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

所谓的选择器，指的是选择施加样式目标的方式。

3.1元素选择器

用标签名作为选择器，选中所有相应的元素

3.2id选择器

顾名思义，是根据id来选择元素，其样式定义形式为：

#idname{

..............................

}

3.3类选择器

根据class属性来选择元素，其样式定义形式为：

.className{

..................................

}

dd{.....}定义的样式会施加到所有class=“odd”的元素上，比如上面的第一个和第三个div,当然也包括class=“odd”的<p>

CSS 属性选择器

具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id。

（1）根据有无属性来选择

结果:所有具有title属性的元素都运用了蓝色的背景

(2)根据属性的值来进行选择

~=：选中属性值是完整单词的元素

title^=’div’:选中title属性值包括div开头的

title$=’div’:选中title属性值包括div结尾的

title*=’div’:选中title属性值包括div的元素

阅读全文

1 0

背景相关属性 定位position类选择器

背景相关属性定位position类选择器