1.重置button和input元素的背景 添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。...在移动设备上，浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap，这样当水平空间不够时，浏览器会帮我们自动换行。...使用它们时，我们经常会忘记下面这些步骤： 添加content: ""属性 设置 width 和 height 时没有设置 display 导致 width 和 height 无效 在使用伪元素的时候，...一个简单的修复方法是在父元素上设置font-size: 0。 ul { font-size: 0; } li { font-size: 16px; } ?...压缩或拉伸图像 在CSS中调整图像大小时，如果宽高比与图像的宽度和高度不一致，则可能会对其进行压缩或拉伸。
今日重点： 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 ? 1....有的地方也成内联元素 ? 行内元素的特点： （1）相邻行内元素在一行上，一行可以显示多个。 （2）高、宽直接设置是无效的。 （3）默认宽度就是它本身内容的宽度。...行内块元素的特点： （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。...样式不冲突，不会层叠 CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 5.2 CSS继承性 ? 概念： 子标签会继承父标签的某些样式，如文本颜色和字号。...5.3 CSS优先级（重点） ? 概念： 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时， 选择器相同，则执行层叠性 选择器不同，就会出现优先级的问题。 1).
MDN介绍： 使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。...进入全屏时，有一个默认的提示：'按esc即可退出全屏模式'，如下图显示： 当按Esc或调用退出全屏方法，退出全屏。标签栏和书签栏依然是隐藏的，网页上的元素恢复成原本的尺寸。...} else { return true; // 有元素在全屏状态 } } 事实上，还有一个属性document.fullscreen，返回一个布尔值，表示文档是否处于全屏模式。...important; } 全屏状态的CSS： 全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。...使用这个伪类，可以对全屏状态设置单独的CSS属性。
： 伪元素名 说明 :first-letter 向文本的第一个字母添加样式 :first-line 向文本的第一行添加样式 :after 在元素之后添加内容 :before 在元素之前添加内容 css...设置 fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置 inherit，继承父元素。...background-position用于设置背景图像圆点的位置。...设置是否显示表格中空单元格上的边框和背景 table-layout 设置用于表格单元格列宽的设置方式 盒模型 css盒模型，包含元素内容 content，内边距 padding，...裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则 overflow 设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll display 设置元素如何显示，值none
:hover -> 该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。 ...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ...当对元素设置为固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 ...当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...这样当用户访问该页面时，只需要向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。 ?
:hover -> 该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。 ...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ... （1）CSS精灵背景 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...这样当用户访问该页面时，只需要向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。 ...（3）CSS精灵原理 CSS精灵其实就是将网页中的一些背景图像整合到一张大图中，然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用css中的background-image
CSS 伪类 CSS 伪类可对 CSS 的选择器添加一些特殊效果 锚伪类： 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态...背景属性 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 尺寸属性 CSS 尺寸属性允许控制元素的高度和宽度。同样，还允许增加行间距。...浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。...所有 HTML 元素可以看作盒子，在 CSS 中，box model 这一术语是用来设计和布局时使用。 盒子模型允许在其它元素和周围元素边框之间的空间放置元素。...分类属性 CSS 分类属性允许控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
我们在使用css的时候,会出现两个或多个规则在同一元素上,这时css就会出现优先级的情况....在css中的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级...（3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素 // 行内元素(inline-level) （1）和相邻行内元素在一行上。...（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ） 行内块元素（inline-block） （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。...背景图片地址 背景平铺 背景滚动 背景位置 案例: // css 层叠样式表 <!
CSS 语法规范 (1). 继承性，大部分的样式属性是可以被继承的 (2). 层叠性，可以为一个元素定义多个样式规则或样式声明,只要样式声明不冲突时,那么所有的样式声明都可以应用到元素上 (3)....动态伪类 A . hover 适用于鼠标悬停在元素上的状态 B . active 适用于元素被激活时的状态 C . focus 适用于元素获取焦点时的状态 ③. 目标伪类 ④. 元素状态伪类 ⑤....value2 ①. value1 value2 指定背景图像宽度和高度 ②. value1% value2% 采用当前元素宽和高的占比，来作为背景图大小 ③. cover 覆盖，会将背景图像等比放大，直到背景图完全覆盖到元素为止...在 CSS 2.1 中，伪类选择器和伪元素选择器都是用 : 来表示 如:hover 、:active、 :first-line、:first-letter 在 CSS3 中，所有的伪类选择器用 : 表示...只在 IE6 以上版本上生效 这段文字只在 IE6 以上(包括)版本 IE 浏览器上显示 D. 只在 IE8 上不生效 <!
有的地方也将行内元素称为内联元素。 行内元素的特点： 相邻行内元素在一行上，一行可以显示多个。 高、宽直接设置是无效的。 默认宽度就是它本身内容的宽度。 行内元素只能容纳文本或其他行内元素。...有些资料称它们为行内块元素。 行内块元素的特点： 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。 一行可以显示多个（行内元素特点）。 默认宽度就是它本身内容的宽度（行内元素特点）。...背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。...3、背景平铺 样式名称： background-repeat 设置元素背景图像的平铺 使用方式： 4、背景图片位置 样式名称： background-position属性可以改变图片在背景中的位置...6、背景样式合写 背景合写样式： background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 使用方式： 7、背景色半透明 CSS3 提供了背景颜色半透明的效果。
让图片在容器中显示的更舒适 设置图像在其容器内的适合度和位置，同时保留其宽高比。以前只能使用背景图像和background-size属性来实现。...浏览器支持程度 82.9% IE11或当前版本的Edge不支持。caniuse 21. 指定元素的全屏 :fullsrcreen 全屏伪类表示浏览器处于全屏模式时显示的元素。...CodePen上查看和编辑代码 说明 background-image:url(...)添加SVG形状（24x12三角形）作为伪元素的背景图像，默认情况下重复。它必须与要分割的块颜色相同。...CodePen上预览和编辑代码 说明使用：before和：after伪元素作为在悬停时设置动画的边框。 浏览器支持程度 100%. 35.甜甜圈旋转器 创建一个甜甜圈旋转器，可用于等待内容的加载。...caninuse - css-variables caninuse - css-transitions 38.悬停阴影动画 在文本上悬停时，在文本周围创建一个阴影框动画效果。 ?
样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。...图层选择： 使用移动工具V 1、图层缩览图判断 2、按住CTRL,在目标图像上单击 3、将光标放置在目标图像上右键，选择图层名称 图层面板中加选图层： 1、按SHIFT，单击另一目标图层 中间所有图层被选中...当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。...样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。...为了避免背景色将图像盖住，背景色通常都定义在最后一组上， background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
CSS 1.css选择某一个 (CSS :first-child 选择器,CSS选择器——伪类选择器) q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255,...例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。...但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。...比较 在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。...CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。 CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。
CSS 优先级(CSS特殊性)」 -概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时， 选择器相同，则执行层叠性 选择器不同，就会出现优先级的问题。...静态定位在布局时几乎不用 「4. 相对定位(relative)」 相对定位是元素相对于它原来在标准流中的位置来说的。...图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...5.1 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。...这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
会受到框中填充的背景颜色影响Content（内容） - 盒子的内容，显示文本和图像图片在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。...该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。...不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。background-image: url(img_flwr.gif), url(paper.gif);同时显示多张图片。...background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。...你指定的大小是相对于父元素的宽度和高度的百分比的大小。background-Origin属性指定了背景图像的位置区域。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。 title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。...CSS无法描述的东西，根本区别在于：它们是否创造了新的抽象元素； 伪类：描述了所有逻辑上存在但在文档树中无须标识的分类； 伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中...9、请写出多种等高布局 假等高布局：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象 给容器div使用单独的背景色（固定布局、流体布局）：用元素中的最大高度撑大其他的容器高度...，整个网页的风格就可以改变了 缺点： 在宽屏，高分辨率的屏幕下的自适应页面，如果背景图不够宽，很容易出现背景断裂 CSS sprites 在开发的时候，需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置...css的content属性专门应用在 after/before 伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号。
样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。...| url (url) 参数： none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景...（默认的） no-repeat : 背景图像不平铺 repeat-x : 背景图像在横向上平铺 repeat-y : 背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素...当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。...auto : 超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 CSS高级技巧 CSS用户界面样式
像素 在css中，px实际上是一个相对单位。 举个例子：1280x960分辨率的15寸显示器上得1px比800x600分辨率的21寸显示器上得1px要小得多。...background 许多设计师会同时定义背景色和背景图片。背景色由浏览器直接控制，会和CSS中的其他定义一起快速显示于页面上，而背景图片需要相对较长的时间加载。...如果同时设置了2个，那么第一个值表示水平位置，第二个值表示垂直位置。 如果只设定一个值，那么它将表示水平位置，而垂直位置将取默认的50%或者居中。 设置水平位置为“负值”在背景定位中是合法的。...为链接元素指定伪类时，牢记以下顺序：link\visited\hover\active （8）测试时使用嵌入样式，发布时再改为外部输入 此举可避免许多因浏览器缓存导致的不正常现象。...和:active伪类的样式也会应用于其上。
，背景与边框的关系； background-clip:设置元素的背景（背景图片或者颜色)是否延伸到边框下面；重点在切割的位置 border-box: 默认情况 背景延伸到边框外延(但是在边框之下...多重边框 你还在用多个元素层层包裹来模拟多重边框吗？不，我在用伪元素实现，哈哈。...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 光说不练，假把式试一试 8....解决方案： 三维世界中旋转一个矩形，由于透视关系，我们在二维图像上看到一个梯形，再结合平行四边实现的方法便能实现 perspective: 观察者与z=0平面的距离; 对元素使用了3D变形之后，其内部的变形效应是...解决方案:伪元素，变形属性和css渐变实现 1.把这个元素设置为一个圆形； 2.用一个简单线性渐变来把图像的有半部分设为其他颜色 3.用伪元素覆盖到这个元素的渐变区域上面去（看起来这个元素和第一步效果一样
，背景与边框的关系； background-clip:设置元素的背景（背景图片或者颜色)是否延伸到边框下面；重点在切割的位置 border-box: 默认情况 背景延伸到边框外延(但是在边框之下)...多重边框 你还在用多个元素层层包裹来模拟多重边框吗？不，我在用伪元素实现，哈哈。...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 光说不练，假把式试一试 8....解决方案： 三维世界中旋转一个矩形，由于透视关系，我们在二维图像上看到一个梯形，再结合平行四边实现的方法便能实现 perspective: 观察者与z=0平面的距离; 对元素使用了3D变形之后，其内部的变形效应是...解决方案:伪元素，变形属性和css渐变实现 1.把这个元素设置为一个圆形； ? 2.用一个简单线性渐变来把图像的有半部分设为其他颜色 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
