效果图： 注意以下要点： 1、提示框的箭头效果，且箭头随位置变动。 2、提示框的关闭按钮，且提示框内容高度随意。 3、阴影效果 代码： <!DOCTYPE HTML> <HTML> <HEAD> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ function showTip(flag){ var tip = $("div.tool-tip-content-wrapper, div.tool-tip-info-border"); if(flag) tip.show(); else tip.hide(); }...
only-child选择器“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例演示通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。HTML代码：<p class="post"><p>我是一个段落</p><p>我是一个段落</p></p><p class="post"><p>我是一个段落</p></p>CSS代...
writing-mode介绍css 的writing-mode据说是为了中文，日文等方块文字设计的，用来修改文字的书写方向，通过这个属性可以实现文字从右向左的布局，或者从上向下的布局。writing-mode使用.wrtmod{margin:15px;padding:15px;border:1px solid #bababa;background:#f1f1f1;font-size:15px;writing-mode:vertical-rl;writing-mode: tb-rl; }效果如下：chrome浏览器：IE浏览器：writing-mode的属性值有：horizontal-tb,vertical-lr,verti...
我之前设置了font-weight:bolder;一直不明白为什么在浏览器上显示最后的效果就变成了normal呢，后来查了一下才发现bolder是相对父元素的。如果父对象的值为 normal，子对象值设为 bolder，则最终以 bold，即粗体显示。而我的父元素有设定过font-weight:200;所以最后显示就变成了normal的效果了。 font-weight 字体浓淡(精细)属性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | in...
font-weight允许值 normal | bold | bolder | lighter | l00 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 font-weight初始值 normal font-weight可否继承 是 font-weight适用于 所有元素为理解用户代理怎样决定字体变形的粗细，得先从关键字100到900谈起，然后我们再来看它是如何继承的。 这些数字关键字用于定义与字体的相关特征的映射关系，即字体的粗细被分成九个等级。例如，OpenType就使用了九...
引言：今天想写个人的欢迎界面，又折腾起了前端，然而真的捉急呀为了美观点，花多点时间吧，又是凌晨三点了0.0CSS实现单张背景图片的填充实现方式一：直接使用body元素的background-image属性，多个浏览器兼容，基本满足要求添加background-color: #22C3AA;在加载图片前显示颜色BUG：页面太小时下方会留有空隙详细属性w3school里面的background属性<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tr...
背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。css2 中的背景(background)概述CSS2 中有5个主要的背景(background)属性，它们是：* background-color: 指定填充背景的颜色。* backgroun...
字符以及HTML实体描述以及说明 这是我们使用最多的空格，也就是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用 html实体表示才可累加。为了便于记忆，我总是把这个空格成为“牛逼(nb)空格(sp – space)”，虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏，在两端对齐布局中又是不可少 的元素。是个让人又爱又恨的小东东。? ...
display:none视为不存在且不加载，即，不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。visibility:hidden隐藏，但在浏览时保留位置，即，使对象在网页上不可见，但该对象在网页上所占的空间没有改变。 使用 display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。也即是说它仍...
p中display和visibility属性差别p中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流本节向大家描述一下p中display和visibility的差别，visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征，虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。p中display和visibility属性差别vis...
基础说明： 外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 内阴影：box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影 内阴影：inset 可以设置成内部阴影 注（PS）：此属性使用于盒模型 如(p,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影 如果设置文字阴影请参考知识点:text-shad...
在css中类选择器就是在类名前面加一个点号了，如果是多类不是打多个点号而以.important.urgent这种形式了。类选择器 在 CSS 中，类选择器以一个点号显示： .center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。 <h1 class="center"> This heading will be center-aligned </h1> <p cla...
对于p,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行： html<p id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</p>css#wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all; wi...
—什么是auto? +auto是自适应的意思，auto是很多尺寸值的默认值，也就是由浏览器自动计算。 +块级元素中margin、border、padding以及content宽度之和构成父元素width。 使用auto属性后，父元素宽度发生变化，该元素的宽度也会随之变化。 下图中 auto 的值就是margin、border、padding以及content宽度之和 +但是当该元素被设为浮动时，该元素的width就变成了内容的宽度了，由内容撑开，也就是所谓的有了包裹...
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说min-height。这个看起来很容易。看下面试例：<p style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;">最小高度</p>运行图如下：先别高兴的太早，不要忘了已经让你深恶痛绝，但又不得不朝夕相对的ie6.0，它是这样回应你的： 没有办法，谁让国富民穷的国人口袋里没有钱呢？或许不应该这样说。应该说谁让我们无私的国人，把自...