zl960320的博客

flex布局操作方便，布局极为简单，移动端应用很广泛 pc端浏览器支持情况较差 IE11或更低版本，不支持或仅部分支持[建议]如果是pc端页面布局，使用传统布局较多 如果是移动端或者不考虑兼容性问题的pc端布局，使用flex弹性布局1. flex布局原理1.1 布局原理flex:弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设置flex布局以后，子元素的float,clear和vertical-align属性将失效，伸缩布局=弹

CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素属性选择器 结构伪类选择器 伪元素选择器1. 属性选择器属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且以val开头的E元素 E[att$="val"] 匹配具有att属性且以val结

这一章学习一些关于CSS比较常用的其他知识，主要讲解精灵图，字体图标，小三角的画法，溢出省略号的显示等的实现。1. 精灵图精灵图的出现主要为了有效减少服务器接收和发送请求的次数，提高页面加载速度。使用精灵图的核心：精灵图技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中 这个大图片也称为sprites精灵图或雪碧图 移动背景图片位置，此时可以使用background-position 移动的距离就是这个目标图片的x坐标和y坐标。主要，网页中的坐标有所不同 一般情况下，

我们在浏览网页时，经常会看到有些图片上面带一个小叉号，当我们点击小叉号的时候，图片就会消失，当我们重新刷新网页时，图片还会显示出来，这就用到了元素的显示与隐藏。本质：让一个元素在页面中隐藏或显示出来。display:显示隐藏元素，但是不保留位置 visibility:显示隐藏元素，但是保留原来的位置 overflow:溢出显示隐藏，但是只对溢出部分进行处理下面就对这三个属性进行详细的描述1. display属性display属性用于设置一个元素应该如何显示display:none隐

1. 定位1.1 为什么需要定位？1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的，要实现这个效果，标准流或浮动都无法实现，此时需要定位来实现。浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子1.2 定位组成定位：将盒子定在某一位置，所以定位也是摆放盒子，按照定位的方式移动盒子定位=定位模式+边偏移定位模式

1. 浮动1.1 传统网页布局的三种方式网页布局的本质，就是用css来摆放盒子，把盒子摆放到相应的位置。css提供了3种传统的布局方式(简单说就是盒子如何进行排列顺序)普通流(标准流) 浮动 定位下面就要对这3种传统的布局方式进行一一讲解1.2 标准流(普通流/文档流)所谓标准流：就是标签按照规定好的默认方式进行排列1. 块级元素会独占一行，从上向下按顺序排列常用元素：div hr p h1-h6 ul ol dl form table等2. 行内元素会按照顺序，从左

我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。1. 盒模型1. 1 看透网页布局的本质我们在进行网页布局的过程中，需要做以下准备：先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置 往盒子里面装内容网页布局的核心本质：利用CSS摆放盒子1.2 盒子模型组成所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。CSS盒模型本

这一章节主要描述CSS非常重要的三大特性：层叠性，继承性和优先级。下面对这三个特性分别进行介绍1. 层叠性看到这个标题，我们不禁会想，层叠性？？？这个层叠性是会覆盖的意思吗？没错，就是会出现覆盖样式的问题，当我们给相同的选择器设置不同的样式的时候，在相同权重的情况下，后面设置的样式会覆盖掉前面设置的样式，这就实现了CSS的层叠性。[注]层叠性原则：样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。 样式不冲突：不会层叠利用下面的示例进行演示：```CSS&lt

前面简单的学习了文本样式，字体样式，以及一些css选择器等，这篇主要来学习一下css的背景属性。1. css背景复合写法css背景属性可以设置背景颜色，背景图片，背景平铺，背景图片滚动，背景图片位置等。background: background-color | background-image | background-repeat | background-attachment | background-position;background: red url(image/img.pn

引言看到这个标题，我们不禁会思考，什么是CSS元素的显示模式？看到这个标题，我脑海中首先浮现的元素以什么样的方式呈现？分别有哪几种方式？带着这个问题，开启下面的篇章。1. 什么是CSS显示模式？元素的显示模式就是元素(标签)以什么方式进行显示，比如<p>标签独占一行，<span>标签在一行内可以显示多个。其实，HTML元素分为块级元素和行内元素两种类型1.1 块级元素前面学过了HTML的一些标签，我们通过实际验证可以知道，块级元素包括<h1>-&l

引言前面我们学习了HTML的一些基础知识，了解了HTML是前端开发中用于书写结构的标签，我们在浏览网页时，会看到页面内容的各种好看的样式，这些样式的实现是通过CSS来实现的，CSS的主要使用场景就是美化网页，布局页面的CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(宽度，边框样式，边距等)以及版面的布局和外观显示样式。下面讲解一些CSS的基础内容1. CSS选择器1.1 选择器的作用选择器就是根据不同的需求把不同的标签选出来，

为了以后便于复习，记录一下三大标签的SEO优化1.SEO定义SEO(Search Engine Optimization)即搜索引擎优化，这是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式SEO目的SEO的目的是对网站进行深度优化，帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站知名度2. 页面中必须包含的标签为了复合SEO优化，页面中必须包含3个标签，这3个标签分别是title、description、keywords.2.1 title网站标题title具有

之前学习的使用CSS制作小三角形，今天再看发现已经记不起来了，写个笔记记录一下，方便以后查看~首先先回顾一个正方形,只要我们设置好宽高，就可以得到，代码如下：div{ width:100px; height:100px; border:1px solid #000; background-color:red;}这时我们就得到了一个非常简单的正方形。但是如果想画出一个三角形，代码该怎么写呢？其次我们可以这样来思考一下如果我们将正方形的宽高设置为0，那么这个形状就会消失，在没有宽高的情况