分类 css3 下的文章

2024-08-08




/* 清除默认的列表样式和内外边距 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
/* 设置导航栏链接的默认样式 */
nav ul li a {
    display: block; /* 将链接显示为块级元素 */
    padding: 5px 10px; /* 设置内边距 */
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 设置文本颜色 */
    border-radius: 5px; /* 圆角边框 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}
 
/* 鼠标悬停时的样式变化 */
nav ul li a:hover {
    background-color: #555; /* 背景颜色变深 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 设置当前活动链接的样式 */
nav ul li a.active {
    background-color: #007bff; /* 背景颜色变蓝 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 浮动导航栏模块至左侧 */
nav ul li {
    float: left; /* 向左浮动 */
}
 
/* 清除浮动 */
nav ul::after {
    content: "";
    display: table;
    clear: both;
}

这段代码为导航栏模块设置了浮动布局，使得导航链接并排显示。同时，它还展示了如何去除列表的默认样式，并为链接设置了基本的样式和悬停效果。最后，使用了::after伪元素来清除浮动，确保父元素能够包含浮动的子元素。

- 阅读更多 -

【h5】相对定位和绝对定位

System

2024-08-08

所有,css3

在HTML5中，相对定位和绝对定位是CSS的两种定位机制。

相对定位（Relative Positioning）

相对定位是一个非常常用的技术，它可以让你指定元素相对于它在文档中原始位置的移动。当你使用相对定位时，元素仍然占据它在文档流中的原始空间。




.box {
  position: relative;
  top: 20px; /* 向下移动20px */
  left: 40px; /* 向右移动40px */
}

绝对定位（Absolute Positioning）

绝对定位是一个更加强大的技术，它可以让你指定元素相对于其最近的已定位的（即非 static ）祖先元素的移动。如果没有已定位的祖先元素，那么它将相对于最初的包含块进行定位（通常是浏览器窗口）。使用绝对定位时，元素会从文档流中完全移除，并且可以重叠其他元素。




.container {
  position: relative;
}
 
.box {
  position: absolute;
  top: 20px; /* 相对于父元素向下移动20px */
  left: 40px; /* 相对于父元素向右移动40px */
}

在上述代码中，.box元素被定位在.container元素内部的右下角，即.container元素的右下角加上top: 20px和left: 40px。如果没有.container，.box元素将相对于最初的包含块，即浏览器窗口进行定位。

- 阅读更多 -

css选择器优先级排序

System

2024-08-08

所有,css3

CSS选择器的优先级是由选择器本身的特殊性决定的，特殊性值的高低依次是：

内联样式（使用HTML的style属性）
ID选择器
类选择器、属性选择器、伪类
元素选择器和伪元素
通配选择器（*）

特殊性值计算时，会将ID选择器的值计算在内，并且通过相应的乘法积增加。例如，一个类选择器与一个元素选择器组合的特殊性值将会比仅有一个元素选择器的低，因为类选择器的特殊性值为10。

如果两个选择器特殊性值相同，那么后定义的选择器会被应用。

以下是一个简单的例子，演示了如何根据这些规则来判断优先级：




#myId { /* 特殊性值100 */
  color: red;
}
 
div #myId { /* 特殊性值100 + 1 = 101 */
  color: blue;
}
 
.myClass { /* 特殊性值10 */
  color: green;
}
 
div .myClass { /* 特殊性值10 */
  color: purple;
}
 
div { /* 特殊性值1 */
  color: yellow;
}

如果我们应用这些规则到具体的元素上，例如：




<div id="myId" class="myClass">这是一个文本。</div>

根据特殊性值的比较，div #myId 的选择器优先级更高，因此文本颜色应该是蓝色。div .myClass 的选择器优先级和#myId相同，但它在#myId之后被定义，所以它的规则将不会被应用。

在实际开发中，我们通常会使用更复杂的选择器结构，并且利用层叠（cascade）和继承来构建样式，而不是仅仅依赖特殊性值来决定每一个属性。

- 阅读更多 -

css模糊效果(blur)

System

2024-08-08

所有,css3

CSS模糊效果可以使用filter属性中的blur()函数来实现。blur()函数接受一个参数，表示应用模糊的像素级别。

下面是一个简单的例子，演示了如何给一个元素应用模糊效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS模糊效果示例</title>
<style>
  .blur-effect {
    filter: blur(5px); /* 应用模糊效果，模糊半径为5像素 */
  }
</style>
</head>
<body>
 
<div class="original-image">
  <img src="image.jpg" alt="原图">
</div>
 
<div class="blur-effect-image">
  <img src="image.jpg" alt="模糊效果图" class="blur-effect">
</div>
 
</body>
</html>

在这个例子中，.original-image类中的图片是没有应用模糊效果的原图，而.blur-effect-image类中的图片则应用了模糊效果，模糊半径为5像素。你可以通过调整blur()函数中的数值来改变模糊的强度。

- 阅读更多 -

网站开发进阶CSS3媒体查询@media_css @media only

System

2024-08-08

所有,css3

在CSS中，媒体查询（Media Queries）是一种强大的工具，可以让你根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

媒体查询可以使用两种方式：

通过@media指令在CSS中直接使用。
在HTML文档的<link>标签中使用。

下面是使用@media指令在CSS中的一个例子：




/* 应用于所有设备的基础样式 */
body {
  background-color: lightblue;
  color: white;
  font-size: 16px;
}
 
/* 仅当屏幕宽度至少为 600px 时应用以下样式 */
@media only screen and (min-width: 600px) {
  body {
    background-color: darkblue;
    color: black;
    font-size: 20px;
  }
}
 
/* 仅当设备是打印机时应用以下样式 */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 12px;
  }
}

在HTML中使用媒体查询的例子：




<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在上述例子中，print.css样式表仅在打印文档时应用。

注意：在实际开发中，媒体查询通常用于响应式设计，以便让网站在不同的设备上都可以良好显示，提高用户体验。

- 阅读更多 -

js插入节点/创建节点

System

2024-08-08

所有,css3

在JavaScript中，可以使用document.createElement方法创建新的节点，并使用Node.appendChild或Node.insertBefore方法将新创建的节点插入到DOM中。

例如，要创建一个<div>元素并将其插入到页面的<body>中，可以这样做：




// 创建一个新的div元素
var newDiv = document.createElement("div");
 
// 为新div添加内容
var newContent = document.createTextNode("这是新插入的div内容");
newDiv.appendChild(newContent);
 
// 插入到body中
document.body.appendChild(newDiv);

如果要插入到特定的位置，可以先找到该位置的节点，然后使用parentNode.insertBefore(newNode, referenceNode)方法：




// 假设已经存在一个元素，将新div插入到这个元素之前
var referenceElement = document.getElementById("existing-element");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("这是新插入的div内容");
newDiv.appendChild(newContent);
 
// 插入到referenceElement之前
referenceElement.parentNode.insertBefore(newDiv, referenceElement);

以上代码展示了如何创建和插入新的节点。

- 阅读更多 -

css浮动总结

System

2024-08-08

所有,css3

CSS 的 float 属性用于创建浮动元素，可以让元素向左或向右浮动，并且可以与其他文本或元素的浮动元素形成环境，进行“文字环绕”的效果。

float 属性的可能值：

none：元素不浮动（默认值）。
left：元素向左浮动。
right：元素向右浮动。

使用 float 需要注意以下几点：

浮动元素后的元素会尝试填补浮动元素的空间，导致的现象是文本环绕。
如果父元素的高度不足以包含所有浮动的子元素，则父元素的高度可能不会被撑开。
浮动元素之后的元素可能会被浮动元素“遮挡”，需要使用清除浮动来解决这个问题。

解决浮动引起的父元素高度塌陷的方法：

使用 overflow 属性设置为 auto 或 hidden（如果你确定内容不会被裁剪）。
在父元素的最后添加一个“清除浮动”的元素，并为其设置 clear 属性为 both。
使用伪元素进行清除浮动，这是一种更为现代的方法。

例子：




/* 方法1：使用overflow */
.parent {
  overflow: auto; /* 或者使用 hidden */
}
 
/* 方法2：添加一个清除浮动的元素 */
.clearfix {
  clear: both;
}
 
/* 方法3：使用伪元素清除浮动 */
.parent::after {
  content: "";
  display: table;
  clear: both;
}

在 HTML 中使用：




<!-- 方法1 或 方法2 -->
<div class="parent">
  <div class="child" style="float: left;">左浮动</div>
  <div class="child" style="float: right;">右浮动</div>
  <div class="clearfix"></div> <!-- 清除浮动 -->
</div>
 
<!-- 方法3 -->
<div class="parent">
  <div class="child" style="float: left;">左浮动</div>
  <div class="child" style="float: right;">右浮动</div>
  <!-- 伪元素自动清除浮动 -->
</div>

以上三种方法都可以解决由于浮动元素引起的父元素高度塌陷问题。在实际开发中，可以根据具体情况选择最适合的方法。

- 阅读更多 -

关于html添加了pointer-event属性再添加cursor未生效的问题

System

2024-08-08

所有,css3

pointer-events属性控制元素如何响应鼠标事件，比如点击事件。当设置为none时，元素上的鼠标事件会被忽略，cursor设置也不会生效。

如果你在HTML元素上添加了pointer-events: none;，那么该元素上的鼠标事件将不会被处理，也就是说，你不能在这个元素上改变鼠标光标样式。

解决方法：

如果你需要在这个元素上改变鼠标光标样式，你可以移除pointer-events: none;属性，或者将其设置为auto。
如果你不希望元素响应鼠标事件，但仍然需要改变光标样式，你可以通过给父元素设置pointer-events: none;，然后为子元素设置cursor样式。

示例代码：




<!-- 父元素忽略鼠标事件，子元素可以设置光标样式 -->
<div style="pointer-events: none;">
  <div style="cursor: pointer;">点击我</div>
</div>

在这个例子中，父元素不会响应鼠标事件，但子元素（显示为“点击我”的div）可以设置光标样式为手形，用户点击时会看到手形光标。

- 阅读更多 -

re:从0开始的CSS学习之路 11. 盒子垂直布局

System

2024-08-08

所有,css3




/* 设置基本的HTML元素样式，确保良好的跨浏览器兼容性 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
 
/* 使用CSS3的flexbox布局实现盒子垂直布局 */
.container {
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
}
 
.box {
    margin: 10px; /* 设置盒子之间的间距 */
    padding: 20px; /* 设置盒子内部的填充 */
    background-color: #f0f0f0; /* 设置盒子的背景颜色 */
}

这段代码展示了如何使用flexbox来实现盒子的垂直布局。.container 类使用了 display: flex 属性，并通过 flex-direction: column 设置了主轴方向为垂直，从而使其子元素（如 .box 类）沿着垂直方向排列。

System

2024-08-08

所有,css3

flex-shrink属性定义了项目的缩放比例，它仅适用于flex容器内的子元素。当flex容器的空间不足以容纳所有子元素时，这个属性就会发挥作用。

问题中描述的是当父元素为flex布局，子元素宽度受挤压变形的问题。这种情况下，可以通过设置子元素的flex-shrink属性来控制它们的缩放比例。

解决方案：

设置子元素的flex-shrink属性为0，这样子元素就不会缩小。
如果子元素内容需要保持原有宽度，可以给子元素设置min-width属性，确保它不会被压缩得过小。

示例代码：




.container {
  display: flex;
}
 
.child {
  flex-shrink: 0;
  min-width: 100px; /* 或者你需要的最小宽度 */
}




<div class="container">
  <div class="child">内容不会被挤压变形</div>
  <!-- 其他子元素 -->
</div>

在这个例子中，.container是一个flex容器，.child是它的子元素。通过设置.child的flex-shrink为0，保证了即使父容器空间不足，它也不会缩小，从而避免了变形问题。

- 阅读更多 -