文章分类 - CSS
摘要：1 行内元素水平垂直居中 方式一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内元素水平垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 2
阅读全文
摘要：1 css的命名规范 参考网址：http://www.divcss5.com/jiqiao/j4.shtml 2 项目目录规范 css：静态资源 fonts：字体图片文件 images：图片文件 js：脚本文件 index.html：入口文件
阅读全文
摘要：1 单列布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ margin: 0; height: 100%; } .header{ wid
阅读全文
摘要：当鼠标穿过展示动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style type="text/css"> .shadow{ margin: 50px auto; position: rel
阅读全文
摘要：box-shadow: 50px 20px 50px red inset; /*水平偏移方向（正负控制方向）， 垂直偏移方向（正负控制方向）， 阴影的模糊程度（数值越大越明显）， 颜色， 内射还是外射，默认外射*/ <!DOCTYPE html> <html> <head> <meta charse
阅读全文
摘要：用到的属性： border-top-left-radius: 15px # 右上角设置圆角 border-top-left-radius: 15px 30px # 水平对齐x,y切角 # 其中还是有方向上的互换，改变方位设置即可。 top / bettom left / right border-r
阅读全文
摘要：这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。 z-index 只能应用在定位的元素之上 z-index 默认属性是 auto ，数值取正整数。 z-index 值表示谁压着谁，数值大的压盖住数值小的， <!DOCTYPE html> <html> <head
阅读全文
摘要：1 相对定位 position: relative 相对定位：相对于自己原来的位置定位 现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right 用途： 1.微调元素位置 2.做
阅读全文
摘要：流动布局 流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。 在正常情况下，HTML元素都会根据文档流来分布网页内容的。 文档流有2大特征： ① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。 ② 行内元素会随着浏览器区队文档
阅读全文
摘要：在以后的开发中，第一步就是要清楚默认样式。可参考以下的清楚默认方案： 详情：https://meyerweb.com/eric/tools/css/reset/ 默认body标签默认有margin外边框8px的边距 默认p标签也有margin边框16px 其中还有ul ol dl dt 默认inpu
阅读全文
摘要：什么是盒模型 css model 这一术语是用来设计和布局时使用 所有的HTML元素可以看作盒子。 它包括：外边距、边距、内填充和实际内容 盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 盒模型的属性 width：内容的宽 height：内容的高 padding：内边距，边框到内容的距
阅读全文
摘要：1 display阐述 文本级标签：h1~h6 ; p ; stuong/em ; span ; a ; img 排版级标签：br/hr ; div ; ul/ol/dl ; li ; input ; table ; select ; option ; form CSS中的元素分类 块级元素 <di
阅读全文
摘要：CSS中提供了一些列表属性可以用来： (1)、设置不同的列表项标记为有序列表 ul (2)、设置不同的列表项标记为无序列表 ol (3)、设置列表项标记为图像 list-style-type（系统提供的列表项目符号） list-style-image（自定义的列表项目符号） ul {li
阅读全文
摘要：border-style（边框风格） 定义边框的风格，值可以有 /* none：没有边框，当border的值为none的时候，系统将会忽略[border-color] hidden：隐藏边框，低版本浏览器不支持。 dotted：点状边框。 dashed：虚线边框。 solid：实线边框。 doubl
阅读全文
摘要：常用背景相关属性： background-image: url('images/11.jpg'); 默认有图片平铺效果（宽高30px的图片，会在宽高300px的盒子中平铺） 背景图像如果不想设置平铺，就设置以下： background-repeat: no-repeat; 值默认为repeat平铺
阅读全文
摘要：1 text-decoration 属性值： <style type="text/css"> body{ text-decoration: line-through; } </style> // 使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none
阅读全文
摘要：1 font-family font-family：设置字体样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体属性</title> <style type="text/css"> body{ font-family: "
阅读全文
摘要：谁的选择器权重大，在浏览器上就会选择谁的选择器 内联样式的选择器权重为 1000 id选择器权重为 100 类选择器权重为 10 标签选择器权重为 1 权重计算永不进位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器的权
阅读全文
摘要：CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。 在上图中，可以看到，body的子元素有三个，h1、p
阅读全文
摘要：1 基础选择器 首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。 1-1 标签选择器 顾名思义就是通过
阅读全文
