CSS笔记(三)

最新推荐文章于 2021-03-21 20:33:16 发布

ljt2724960661

最新推荐文章于 2021-03-21 20:33:16 发布

阅读量323

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/ljt2724960661/article/details/104087652

版权

前端学习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

CSS Positon(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：1 static 2 relative 3 fixed 4 absolute 5 sticky

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

static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

例如:

<style>
div.static {
    position: static;
    border: 5px solid #73AD21;
}
</style>

<div class="static">
该元素使用了 position: static;
</div>

fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
例如:

<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
<p class="pos_fixed">Some more text</p>

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

<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<style>
h2.pos_left
{
	position:relative;
	left:-120px;
}
</style>

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

<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
<h2>这是一个绝对定位了的标题</h2>

sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed
定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，
它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top,
right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位
相同。

栗子:
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
<div class="sticky">我是粘性定位!</div>

重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：

<style>
img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
</style>
<img src="xxxxurlpath" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素
将被显示在最前面。

CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
visible   默认值。内容不会被修剪，会呈现在元素框之外。
hidden   内容会被修剪，并且其余内容是不可见的。
scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto   如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit   规定应该从父元素继承 overflow 属性的值。
注意:overflow 属性只工作于指定高度的块元素上。

<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>
<div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的
边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
img
{
float:right;
}

彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：

.text_line
{
    clear:both;
}

CSS 布局 - 水平 & 垂直对齐
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
栗子:

<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
<div class="center">
  <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
栗子:

<style>
.center {
    text-align: center;
    border: 3px solid green;
}
</style>
<div class="center">
  <p>文本居中对齐。</p>
</div>

图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中
栗子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>BaiDu</title> 
<style>
img {
    display: block;
    margin: 0 auto;
}
</style>
</head>
<body>
<h2>图片居中对齐</h2>
<p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>
<img src="http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg" alt="Paris" style="width:40%">
</body>
</html>

CSS 组合选择符
组合选择符说明了两个选择器直接的关系。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{
  background-color:yellow;
}

栗子:
<style>
div p
{
    background-color:yellow;
}
</style>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{
  background-color:yellow;
}
如:
<style>
div>p
{
	background-color:yellow;
}
</style
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
//只有第一个Item "I live in Duckburg."显示黄颜色

相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，
且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用
相邻兄弟选择器（Adjacent sibling selector)。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
  background-color:yellow;
}

后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
实例：

div~p
{
  background-color:yellow;
}

ljt2724960661

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS笔记(三)

CSS Positon(定位)position 属性指定了元素的定位类型。position 属性的五个值：1 static 2 relative 3 fixed 4 absolute 5 sticky元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。static 定位HTML...
复制链接

扫一扫