JJ_Smilewang的博客

我们在使用定位布局时，可能会出现盒子重叠的情况。一般的层级顺序是根据在html结构中的书写顺序排列的，写在上面的盒子会被压在下面，可我们有时需要把写在后面的盒子放在最上面，虽然我们可以通过更改html里面的书写顺序来调整，但是这未免过于麻烦，所以我们的z-index属性就闪亮登场了，它是用来控制盒子的前后次序 (z轴) 。<style> div { width: 200px; line-height: 200px; text-a

1.盒子阴影在CSS3中，我们可以使用 box-shadow 属性为盒子添加阴影。1.1 语法box-shadow: inset h-shadow v-shadow blur-radius color;/* inset 表示阴影类型为内阴影 *//* outset 表示阴影类型为外阴影 （不添加时默认为外阴影，但是添加后反而无效 故想表示外阴影时不添加即可）*//* h-shadow 表示阴影水平位移量 可以为负值*//* v-shadow 表示阴影垂直位移量 可以为负值*/.

定位是三种传统布局方式之一，虽然浮动可以帮助我们把几个盒子排在一行，也可以把一个盒子放在左边，一个放在右边，但是如果我们需要某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子；或者当我们滚动窗口时，盒子是固定屏幕在某个位置的。这些效果，标准流或浮动可以快速实现吗？答案显示是否定的，所以这就需要定位（position）来帮忙。1.定位的组成s所谓定位，简单的来说就是将盒子定在某一个位置。所以定位其实也是按照规则进行摆盒子，其规则为：定位 = 定位模式 + 边偏移 。1.1 定位模式.

我们在书写代码时，有时会出现不起效果，那么此时要么是代码本身存在问题，要么就是存在优先级问题。今天的文章主要介绍下优先级的算法。选择器的优先级顺序是由各个选择器的权重决定的。具体如下表：选择器 权重值 !important infinity(无穷大) 行内样式 style" " 1000 id选择器 100 class类选择器、属性选择器、伪类选择器 10 标签（元素）选择器 1 通配符（*）选择器 0

CSS 给我们提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：①文档流（标准流）；②浮动；③定位。所谓的标准流: 就是标签按照规定好默认方式排列：块级元素会独占一行，从上向下顺序排列。行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。标准流是最基本的布局方式。今天我们主要介绍浮动的相关知识：1.为什么需要浮动？我们在开发中经常需要将几个块级盒子（div）排在一行，如下图所示，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。...

我们经常在网站上可以看到以下样式，标题太长，一行显示不下，则会使用省略号来代替。但是事实上，这个省略号并不是打字打上去的，而是使用代码表示出来的。今天则主要介绍如何让文本超出部分显示省略号。1.单行文本超出部分显示省略号1.1 语法<style> .box { width: 400px; height: 30px; border: 1px solid red; /*第一步： 溢出隐藏 */ o

我们经常可以看到有些背景色并不是纯色，而是好看的渐变色，css3知我懂我，给我们提供了制作渐变背景色的属性。渐变主要包括线性渐变和径向渐变，接下来逐一介绍用法：1.线性渐变线性渐变--linear gradients，表示颜色沿着一条直线过渡，比如从左到右，从右到左，从上到下等。1.1 语法：background: linear-gradient(position , color1 ,color2, ....)； /* position 渐变方向，color1 第一种颜色 co

我们平时在网页上填写表单的时候，往往都会发现填写表单内容时有一定的要求，这就是所谓的表单验证。使用表单验证的好处主要有：①减轻服务器的压力；②保证数据的可行性和安全性实际开发中，表单验证基本使用js完成的，但是html中的input表单也提供一些初级的验证方法，主要有以下3种：①placeholder属性 ②required属性 ③pattern属性接下来就简单介绍下这三个属性如何使用！1.placeholder属性placeholder属性 是input 类型的文本框...

1. type="email"邮箱：<input type="email" name="emailname" id="">作用：使用电子邮件地址文本框，提交表单时会自动验证email的值2. type="url"网址：<input type="url" name="urlname" id="">作用：使用网页的url表单类型，提交表单时会自动验证url的值url这种文本框的网址格式：要为以http:// 或者https:// 开头，比如htt.

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。1. 结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。1.1 E:first-childE:first-child 这个选择器用于匹配父元素中的第一个子元素E/* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色，但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 但是这些新特性往往都村子兼容性问题，比较老的版本浏览器可能不支持。新增特性很多，今天主要介绍一些开发中常用的新特性。1.HTML5 新增的结构元素我们之前布局时，基本都是使用 div 来做的。但是div 对于搜索引擎来说，是没有语义的。而新增的结构元素虽然作用与div大致一样，但是增加了语义化，方便后期的维护。①<header>：头部标签 <!-- 一般是用在头部信息上 ...

1.什么是元素显示模式所谓元素显示模式就是元素（标签）以什么方式进行显示，HTML 元素一般分为块元素和行内元素两种类型。2.块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。2.1 块级元素的特点：① 自己独占一行，宽度默认是容器（父级宽度）的100%；② 块级元素可以设置高度，宽度、外边距以及内边距；③

网页布局的核心本质： 就是利用 CSS 摆盒子。1.盒子模型的组成所谓的盒子模型：就是把 HTML 页面中的布局元素看作是一个盒子，一个可以盛装东西的盒子。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，主要是由边框、外边距、内边距、和 网页元素（content)组成。2.边框border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。border是一个复合属性，具体语法如下：border: border-width || b.

1.背景属性通过 CSS 背景属性，可以给页面元素添加背景样式，包括背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景图片缩放等。1.1 背景颜色background-color 属性定义了元素的背景颜色。background-color:颜色值;如：background-color:red;一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。background-color:transparent; 背

1.CSS字体属性CSS 字体属性（font）用于定义字体系列、大小、粗细、和文字样式（如斜体）。1.1 字体系列所谓字体系列简单的说就是使用哪种字体，比如宋体、微软雅黑等。CSS 使用 font-family 属性来定义文本的字体系列。p { font-family: 微软雅黑;} div {font-family: Arial,"Microsoft Yahei", "楷体";}注意点：①字体可以使用引号包裹，也可以不加引号，但一般情况下,如果有空格隔开的多个单词组成

1.什么是高级选择器在 CSS 中，可以根据选择器的类型，把选择器分为基础选择器和高级选择器（又称为复合选择器），高级选择器是建立在基础选择器之上，对基本选择器进行组合形成的。①高级选择器可以更准确、更高效的选择目标元素（标签）②高级选择器是由两个或多个基础选择器，通过不同的方式组合而成的③常用的高级选择器包括：层次选择器、属性选择器、伪类选择器等等，本文主要介绍层次选择器和属性选择器。2.层次选择器层次选择器里包含：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器和并集选择..