1、CSS （Cascding Style Sheet）层叠样式表 级联样式表 样式表2、CSS作用： 修改页面中元素的显示样式 能够实现内容与表现的分离 提高代码的可重用性和可维护性3、导入CSS的方式 在HTML里直接写<h1 style="属性：值;属性:值"> 在<style>里面写法 选择器{属性：值;} 在外部创建<link rel="stylesheet" type="text/css" href=""> 或 ...
一：盒模型盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在）w3schools上对于盒子模型的图示如下CSS盒子模型的属性：内容属性：宽=width 高=height内填充属性（内容与边框之间的距离）：padding外边距属性：margin（使用该属性的时候注意浏览器的兼容性）内填充与边界的规则：如果有四个参数...
1，什么是BFC BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，2，生成BFC 下面的方法可以创建一个新的BFC （1）浮动元素，float: left | right （...
1、CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式element : 元素。 padding : 内边距，也有资料将其翻译为填充。 border : 边框。 margin : 外边距，也有资料将其翻译为空白或空白边。围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。 * {margin: 0;padding: 0;}padd...
1.CSScss style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class 2.ID选择器# 代表通过id选择器查找 #i1{height: 48px;background-color: red;}3.class选择器. 代表通过class选择器查找.menu{height: 48px;background-color: aqua;}4.标签选择器标签名 代表通过标签选择器查找 span {color: red;background-color: blue;}5.标签层级选择器标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签...
这一节总结起来就一句话：只可意会，想要在这个模型上了解的更透彻，请自行查阅相关书籍兼容：E8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。div { width:220px; padding:10px; border:5px solid gray; margin:0px; }原文：http://www.cnblogs.com/Terminaling/p/4067549.html
CSS命名规范一．文件命名规范 全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页 眉：header内 容：content容 器：container页 脚：footer 版 权：copyright 导 航：menu主导航：mainMenu子导航：subMenu 标 志：logo标 语：banner标 题：title侧边栏：sidebar 图 标：Icon注 释：note搜 索：search按 钮：btn登 录：login链 接...
研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子:<style>#box{-webkit-perspective:800px;//定义3D场景大小-webkit-transform-origin:50% 50%;//定义3D场景的中心点perspective:800px;transform-origin:50% 50%;}.box{width:200px;height:20...
文本也许是HTML里最常见的元素了，所以我们有必要对HTML的文本操作标签做下认识。1. <em>，<i>内的文字呈现为倾斜效果；2. <strong>，<b>内的文字呈现为加粗效果；3. <b>，<i>只是单纯的为了让文本具有某种特殊样式，而<strong>，<em>不仅带有特殊样式，而且也表达了某种语义；4. 在单纯的为了达到某种样式的情况下，建议使用不带有语义的标签。体验如下：http://www.mayacoder.com/lesson/lesson?lesson_id=28&knowledge_id=5原文...
//扩展Extend less的伪类，合并了选择器，放在与它引用匹配的选择器上Use Method：以在study上扩展test的样式为例.test{color:#000000;font-size:18px; }//grammar 1 .study{&:extend(.test);background:red; }//grammar 2 .study:extend(.test){background:red; }//输出css .test, .study {color: #000000;font-size: 18px; } .study {background: red; }//扩展all Use Method：以在study上扩展test的样式为例当有all的时候，会连...
3 D（3.1）rotateY围绕着Y轴进行旋转（1）正数是(站在右边推)，负数是(站在左边推)（2.1）定义元素背过去是否可见backface-visibility: visible|hidden; 说明：visible表示可见，hidden表示不可见测试贝塞尔曲线的网址：http://xuanfengge.com/easeing/ceaser/（1）translateZ就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用小经验：translateZ和rotate...
css作用：控制网页的样式 css语法：选择符{属性1：属性值；属性2：属性值；属性3：属性值1 属性值2 属性值3；} css实例： div{ width:300px; height:400px; background:red; } css语法解释： 1、选择符：对标签进行获取 2、所有声明都放在大括号里面，声明和声明之间用分号（“；”）连接 3、声明包括属性及属性值，属性和属性值之间用冒号连接 4、如果一个属性拥有多个属性值，属性值之间用空格隔开 例：border（边框）:10px(像...
《CSS3基本选择器》一、通配符选择器（＊）*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器（.className）四、id选择器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器（ＥＦ）.demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...
1.浮动高度坍塌原因：父元素的高度是被子元素撑开的，当设置浮动后，会脱离文档流，子元素无法撑起父元素，所以导致高度坍塌解决方法.clearfix:before, .clearfix:after{content: "";display: table;clear: both; } 2.父子兄弟联动解决方法1：padding解决方法2：float（但是有条件）解决方法3：position:absolute解决方法4：border解决方法5：overflow: hidden; 3.position相对定位：relative 针对它本身位置的起始点进行了一个...
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style> 7 *{ 8 margin: 0;/*重置*/ 9 padding: 0;10}11 body{12 background-color: whitesmoke;/*页面背景色*/13}14 .top{15 width: 100%;16 height: 60px;17 background-color: black;18 padding-left: 100px;19}20 .bo...