学习要点：1.设置背景 主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。 一．设置背景盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。 CSS 背景设置的样式表如下：属性说明CSS 版本background-color背景的颜色1background
当你发现好多图都能用css画出来的时候，你就会觉得css很有魅力了。//我是这么觉得的，先不考虑什么兼容问题像漫画里出现的对话框，往往都是一个对话框然后就加入一个箭头指向说话的那一方，来表示这个内容是谁述说的。 今天认真学了一下：相关资料首先，要知道一个对话框无非就是一个矩形和一个小三角的契合，想起小学时候教的七巧板；所以简单来说，只要能制作出矩形和小三角即可
转载
2024-06-12 21:12:31
43阅读
常见CSS居中方法1. 水平居中1.1 文本级居中1.2 块级居中2. 垂直居中2.1 文本级居中2.2 块级居中 1. 水平居中1.1 文本级居中文本、或具有inline特性的元素，想要使其居中，则设置文本所在容器、或具有inline特性元素的父元素设置如下属性：元素 { text-align: center; }实例：div{
width: 100px;
height: 100px;
转载
2024-03-21 22:46:27
614阅读
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> <style> .tip { position: relative; background-color: deepskyblue; margin: 2
原创
2021-08-04 15:29:25
3473阅读
出于 CSS 精确定义网页样式的本意，在格式化页面对象时， CSS 将所有的元素都放置在一个“容器”里面，这个“容器”叫做 BOX。对于容器的格式化，CSS 提供了强大的支持，现在，首先了解一下与格式化“容器”有关的属性。 “容器”的属性共有以下的几类： l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。 l 填充距(
转载
2024-02-28 20:20:36
68阅读
框模型，其中的细节问题，需要再查阅资料。CSS内边距、边框、外边距 CSS框模型定义了元素框处理元素内容、内边距、边框 和 外边距 的方式。 内边距、边框和外边距默认值都是0。许多元素由用户代理样式表设置外边距和内边距，可以通过将元素的 margin 和 p
原创
2022-09-08 16:57:12
267阅读
居中显示模态框 <style> body { height:1200px; } #alert-box { display:table; width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; right:0; z-index ...
转载
2021-09-13 18:26:00
258阅读
2评论
CSS2.1是当前普遍使用着的CSS版本，平时如果循规蹈矩的编写CSS，或许不会发现问题，可问题就是：如果想要保存的时候，不小心按Ctrl+s的
时候多留了一个s在CSS文件里，问题就开始来鸟；或者是不小心在规则的大括号外边多写了一个分号……出错的事情是千奇百怪的，对于新手来说频率可能会高
些。出现这样的问题的时候、调试起来你可能会感觉很莫名其妙，这就需要了解一下CSS2.1版本的容错
如何插入样式表当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：link
mystyle.css浏览器会从文件 mystyle
转载
2024-04-09 16:21:51
9阅读
框模型图示： 解释：元素的最内部分是实际内容 直接包围内容的是内边距 内边距的边缘是边框 边框外是外边距 （外边框默认是透明的，不会遮盖其后的任何元素）。注意：背景应用与内部内容、内边距和边框组成的区域。很多浏览器会自动设置内外边距，所以需要自
原创
2014-06-25 21:52:49
600阅读
1. 小程序整个屏幕弹窗:.cl-panel-box {
position: fixed;
right: 0;
top: -100vh;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 999;
background: #ffffff;
transition: 0.4s;
}
.
原创
2023-10-01 23:39:31
216阅读
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <title>css聊天框</title> <style> * { margin: 0; padding: 0; ...
原创
2022-07-06 16:34:36
1224阅读
非本人原创，此为本人导师代码，在此整理分析。1、遮蔽层，弹框弹出时，页面变灰。CSS部分.overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla(0, 0%, 0%, .7);}2、定时提示小弹框，页面垂直居中显示CSS部分 /*t
原创
2015-07-24 11:23:22
719阅读
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。一、CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距...
转载
2020-02-05 15:24:00
78阅读
2评论
第一章、基本的圆角框 原创：冰极峰 转载请注明出处 2009年11月30日10:19:34 序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的
转载
2009-11-30 17:40:00
113阅读
文章目录前言一、盒子隐藏概述二、display1.赋予display none属性2.未加display:none;效果展示2.加display:none;效果展示三、visibility1.visibility: hidden;2.未加visibility: hidden;效果展示3.加visibility: hidden;效果展示四、overflow1.代码示例：2.不加这个属性效果展示3.
转载
2024-01-28 06:00:03
66阅读
对于在网页端布局，垂直居中难于水平居中，同时实现水平和垂直居中是最难的。在移动端，因为设备的宽高是可变的，故一些方案很难实现。以下使用几种方案对下面的html去实现居中，如有不足，可以提出宝贵的意见：<div class="center">
<img src="1.jpg" alt>
</div>1. 使用text-align水平居中这种方案只能使水平居中，
转载
2024-03-21 10:12:52
157阅读
一.浮动
float ：
浮动的盒子不占原来的位置，其下方的盒子会上移
父盒子会发生塌陷现象。同一级盒子right浮动，同级左边的盒子需要左浮动，right浮动的盒子才能上来
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
二.定位
relative : 设置相对定位的盒子，相对自己原来的位置移动，
转载
2024-04-20 20:55:04
63阅读
CSS容器查询终于来了! 它们目前在谷歌浏览器（105）中得到了支持，很快就会在Safari 16中得到支持。这对前端来说容器查询与媒体查询一样重要。在这节课中，我们介绍一下容器查询是如何工作的，如何使用它们，以及语法是什么样子的，并分享一些现实生活中的例子和用例。简介在设计一个组件时，我们需要适配不同的变化，并根据CSS类或视口大小来改变它们。这对于我们开发来说不是很理想，会迫使我们根据变化类或
本文介绍了css的几个基本选择器——元素、类名、id，以及使用不同选择器的时机，相关区别和具体使用用法
css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式。当然它是通过选择器来实现这一点的。基本规则结构：语法= 选择器 +声明块 1.元素选择器——直接使用html元素名，指向文档元素 如果想给所有段落都添加缩进的话使用元素选择
