小脚的Blog

利用CSS盒模型中的border（边框）实现三角形<div></div> div{ margin: 0 auto; width: 200px; height: 200px; border: 2px solid orange; }这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容

CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组成，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断结果为true的时候，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为false，样式表同样会被下载，但是不会应用。用媒体查询来实现响应式布局1.引入meta标签<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1..

每个图片的宽度都一样，但是不同位置的动作是不同的，可以将一张照片划分成8个小图片，利用动画和浮动每次只显示一个小图片，连贯起来就是一系列动画。首先对外层div进行设置，相当于是人物的可视窗口，因为单个人物图片是1600,180；所以一小份就是200px;人物之间设置了50的间距50*3，之后对第一个图片的间距进行清除，所以可视区的总宽度就是200*4+50*3；绝对定位配合left，top进行居中设置，这时的位置是相对于body来说，所以还要向左移动可视区width的一半。...

在最外层设置一个div盒子，作为轮播图的展示区域，id=outer；设置它的定宽定高，并且居中放置，当图片溢出时隐藏在move中放置了5个div占据位置，以后可以用图片来替代。move的宽度是div图片设置的总宽度5*400px;高度是div图片的设置的高度120px;他们的大小和最外层设置的展示区的大小是相同的。然后对div图片进行浮动设置，使他们在一行排列。最后就可以设置动画效果了，为这个动画取名move，为动画设置完成一个循环所需的时间长度10s,因为设置了5个div图片，步...

CSS动画-Animationsu由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何JavaScript技术即可完成动画的制作。动画序列（animationsequence.

利用flex容器进行后台系统的设置，在最外层的div盒子设置float：flex；布局contanier设置伸缩盒布局，行布局，对头部绿色部分进行定宽定高。对于左侧的导航框也进行伸缩盒设置，占据200px的位置，将hover的触发颜色设置成同li背景颜色相同对右侧的部分设置伸缩盒占比1份，overflow：scroll；会对内容区设置滚动条必须要对外面整体高度设置100%，不然滚动条只在外层显示。...

伸缩盒布局（Flexbox）CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。容器使用弹性盒布局的父元素display:flex;三列布局(一行中有3列)为了使得article分列显示，只需要为article元素的父元素section进行如下设置.section{display:flex;}修饰后，三列在一.

定位布局（Positioning）相对定位、绝对定位、固定定位元素都有定位属性left,right,top,bottom。静态定位（Staticpositioning） position:static;是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。搭配top，left没有效果相对定位（Relativepositioning） position:relative;与静态定位相似不脱离文档流，原先位置保留如果不设置top,bottom,left,right属.

默认文档流（Normallayoutflow）默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点有1)元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。2)块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。3)行内元素与其他元素共享一行空间，宽高由其内容所决定。但是默认文档流往往不能满足我们的布局需求，我们可以使用如下属性改变默认布局：1.display 通过为display属性指定值block,inline,inline-bloc.

利用盒子模型定宽定高的特性，改变父元素padding的大小，实现动画，制作了呼吸灯的动画效果。盒子类型必须是border-box对最外层的盒子div设置定宽定高 box-sizing：border-box；对first，second设置边框圆角，宽度自动填充为100%。此时两个圆会叠加在一起，这时对外层设置margin，也就是对out，first设置margin.接着设置动态效果，当鼠标移入时最外层的padding改变30px-->10px,动画效果发生时间.

1.默认盒子模型：W3C盒子使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。内容的高度一般由子元素填充，在框架布局时可以写上，内容填充好可以删除。padding填充\margin间隔，都有四个属性值的设置-top、-right、-bottom、-left。速写时四个值（上左下右），两个值（上下、左右）。margin上下间隔会叠加，上一个元素的margin-bottom，和下一个元素的margin-top会叠加，实际距离是两个中.

在页面的布局中，有许多需要居中对齐的布局，有以下几种方法：效果图首先放置四个div块级元素作为测试，并统一为div元素设置style方法一：对第一个div设置居中方式margin：0 auto；这里为了四个div元素排列美观，上下间距设置了20px有的时候块级元素内会添加文本，需要将文本也进行居中对齐设置：水平居中 text-align：center；竖直居中 为 line-height设置数值，与外部块级元素高度一致，这里外部块级元素div设置h.

字体样式color为字体指定颜色font-size为文字指定大小font-family为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体font-style用于打开和关闭斜体文本font-weight为字体设置粗细程度text-align文字排列方式text-decoration设置或者取消文本修饰text-transform设置或者取消字体改变text-shadow设置或者取消字体改变1.color为字体指定颜色2.font-size为字体指定文字大小，取值可以为绝对单位.

级联级联(Thecascade)，CSS是CascadingStyleSheets的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有的选择器中某个选择器定义的规则是否能够胜出（即优先级）取决于三个元素：Importance，Specificity，Sourceorder权重1000：行内样式表 sytle属性100: #id10: .class [attr] :first1： ::after tag标签继承.

一.基本选择器1.标签选择器 项目统一样式标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。例如：<style> p{ height:100px;border:1pxsolidred; }</style><p>one</p><p>two</p><p&gt.

一使用BootCDN图标库1.在线使用图标库官网打开https://www.bootcdn.cn/，然后在搜索库中搜索font选择第一个font-awesome尽量选择版本高的选择一个复制link在网站https://fontawesome.dashgame.com/选择自己需要的图标复制标签，例如fa-adjust需要修改的只有圈住的地方2.在本地使用图标本地使用时，需要把下载好的图标库移动到项目目标文件内，其他步骤同在线操作一样使用UR.

什么是CSS？CSS(CascadingStyleSheets)层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户。html\css\js 是前端三要素，用于修饰网页，完成布局。CSS工作原理？当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此，在处理文档的时候包含两个阶段：1.浏览器将HTML和CSS转换为DOM(DocumentObjectModel)，DOM在计算机内存中表示文档，使得文档和C.