weixin_47295886的博客

overflow-x:单独处理水平方向布局， overflow-y：单独设置垂直方向的布局。scroll:溢出的内容会生成滚动条，显示完整内容，生成的是双方向的。如果子元素超过了父元素，则子元素会从父元素中溢出，使用。hidden:溢出内容会被裁剪，不显示。auto:根据需要生成哪个方向的滚动条。1、不设置父元素的高度的时候，默认情况父元素的高度被内容撑开。属性来设置父元素如何处理溢出的子元素。2、子元素在父元素的内容区中排列。

margin-left: +border-left: +padding-left: +width: +padding-right: +border-right: +margin-right: =父元素的内容区宽度=父width

内容区（content）---内容区、内边距、边框决定了盒子的大小内边距(padding)边框(border)外边距(margin)---外边距决定了盒子的位置

L表示亮度(0-100%) 0表示不开灯，是最黑的--所以前面无论是什么都是黑色。RGBA:A是透明 a=.5 半透明 1完全不透明 示 0 完全透明=没了。这是光的三元素，光全部最大是白色，光全部是0是黑色。每一种颜色在0-255之内（0，100%）RGB：通过RGB三种颜色不同的浓度调配除不同的颜色。HSL值：HSLA表示透明度 (色相是一个色环)S表示饱和度（0-100%）1表示最亮，无论什么是白色的。H表示色相 （0-360）16进制的RGB值：#红色绿色蓝色。颜色单位:使用颜色的名称设置颜色。

em：相对元素的字体大小 1em=1font-size 页面默认字体大小是16像素。不同屏幕的大小时不同的。像素越小，屏幕显示效果越清晰。rem:root相对于根元素的大小，即相对于html中的字体大小。所以同样200px在不同的设备下显示效果不一样。百分比：是相对于父元素属性的百分比、根据父元素改变而改变。像素：屏幕实际上由一个一个的小点构成。

impotant——此时改样式获得最高优先级，甚至超过优先样式，js改不了，或者更改很麻烦。将所有元素的优先级相加计算，优先级越高，越优先显示（分组选择器是单独计算的）样式的冲突：当我们通过不同的选择器，选中相同的元素，并设置不同的样式值时候，就发生了冲突。发生冲突，应用哪个样式由选择器的权重（优先级决定）优先级相同时，使用在style标签中靠下的样式。类和伪类选择器：0，0，1，0。id选择器：0，1，0，0。元素选择器：0，0，0，1。通配选择器：0，0，0，0。内联样式：1，0，0，0。

::after (:after)表示标签的最后位置::before (:before)表示标签的起始、这个是鼠标选中不了——是用css添加的，无法选中::selection{ 鼠标选中的内容::first-letter (:first-letter){表示第一个字母应用于块级元素的第一行的第一个字母}::first-line (:first-line){

visited——将样式添加到已经被访问过的元素（只适用于a标签），由于隐私，不希望别人看到，所以此链接只能修改颜色。:link——将样式添加到未被访问过的链接，=正常链接（只适用于a标签）:hover——当鼠标悬停在元素上方，向元素添加样式。:active——将样式添加到被激活的元素，点不松手。

:not否定伪类——将符合条件的元素去除:first-of-type——同类型所有元素排序。第一个:last-of-type——同类型所有元素排序,最后一个:nth-of-type（0-n）——同类型排序选择第n个子元素——:nth-child(数字)—全部子类first-child——全部子类第一个元素:last-child——全部子类最后一个元素

通配选择器：*匹配所有元素元素选择器：标签名{声明块}，根据标签名选择元素id选择器：#根据元素id选择一个元素属性选择器：基于属性选择 ，在属性=值中 选择属性 使用[]中括号交集选择器：选择器1选择器2选择器3——交集选择器中有元素选择器，必须使用元素选择器开头并集选择器：选择器分组 使用逗号 同时选择多个选择器对应的元素 （选择器1，选择器2，选择器3）子元素选择器：父元素>子元素——选择父元素中的子元素——直接包含的关系后代选择器：父元素 后代元素使用空格 选中指定元素内指定的后代元素

其中用到了background-color: 背景色;color字体颜色font-size字体大小text-align水平方向字体对齐方式list-style-type设置有序列表的序号表示font-weight字体加粗font-style字体倾斜font-family设置字体text-indent设置缩进text-align文本对齐方式font-size字号text-decoration是否有下划线...

block（设置元素为块元素 可以将行元素转化成块元素 然后进行width的设置，元素前后带有换行符。column-rule:设置列之间的竖线宽度、样式和颜色规则——2px solid green;width属性：设置内容显示区域的宽度-----只是对块元素（h1,p,）和img元素有效。column-count:规定元素应该被分割的列数——一个整数;默认值、元素被显示为行内元素，可以显示在一行，元素前后没有换行符。column-span: 规定元素应跨多少列——1 all;...

CSS的行内、内嵌、链接三引入方式+属性:color\font\text\backgroun\list\样式的继承\id#锚点

使用链接的方式=-----------锚点的使用

页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件-------------------页面的动画效果

swiper.css swiper.jss插件的引入 实现页面的自动切换 和鼠标进入切换

和前面有些许的差异 进行整体的调整

*/有一个父子样式的跟随子样式的背景图片的样式跟随父样式一同变化----鼠标触发。实现父子样式一起变化但是变化的内容不同

每一个列表里面都有图片和文字------图文混排----使用dl-----dt图片dd文字。分析五个部分形式相同除了内容不同---------------使用列表做-ul-li。

样式相同的可以放在列表里面。

代码】综合设计一个OPPE主页--页面的精选配件的设计。

先进行内容框分析在样式设置。

头部查看要求--观察页面头部是上下分还是左右分，明显是左右分。左边分为3小部分右边分5小部分。

建立样式（每一个部分（一共10个部分）设计共同的样式）id做页面的布局class做页面的样式。首先建立一个站点文件夹--保存网页的所有信息。

Bootstrap-综合案例-编写课程页面-导航条

stretch默认占满整个单元格的宽度nth-child(1){ /*代表了item类型的第一个子元素*/grid各种属性的使用

一维布局，用于页面的局部位置

fixed：浏览器窗口（参照物）--盒子不随下滑线的移动而移动relative：这个元素的直接父元素（参照物）--针对自己的父元素，脱离文档流，但是原来的文档流的位置保留，下面的static元素没有去占据位置absolute：相对于绝对或者相对的父元素（参照物）--脱离文档流，原来的位置会丢失，下面的static的元素会上去占据它的位置--如果父层没有，则相对body实现子元素跟随父元素的移动而移动...

font-size: 0;/*去掉图文之间的的默认空白*/ block-----元素独占一行inline---元素在一行显示inline-block：不独占一行，元素可以在一行显示display可以用于元素之间的转换

2.浮动定位float,脱离文档流 让盒子浮动起来 left左浮动 right右浮动 none不浮动---------------实现分栏功能应用：在图文混排的时候、多列布局

overflow:超出盒子部分是否显示 hidden表示超出部分不可见 scroll:显示滚动条图片文字：text-align:center;div：margin: 0 auto;auto:如果有超出才显示滚动条 没有正常显示border-width:边框的宽度 px,thin，medium,thickborder-style：dashed、dotted、solid、doubleborder-color:颜色border:宽度 线性 颜色 ------的顺序设置.

宽度width高度heightline-height：文本行高margin ：外边距padding：内边距background-color:背景颜色

list-style：所有的样式一起设置url("图片位置设置")list-style-image：列表前面设置的小图片list-style-position：标号的位置（在里面还是外面）list-style-type：标志的类型border：表格边框width:表格宽heigth：表格高border-collapse：collapse（叠加、坍缩） 合并表格边框和单元格的边框奇偶选择器 tr(行)：nth-chile(odd|even)--------隔行显示不同颜色的样式...

background-color:使用颜色值设置background-image:url（“ 图片--相对路径文件名”）background-repeat：背景图片的填充方式a:link------没有访问的----a:visit-------已经访问过--a:hover-鼠标停在上方a:active--鼠标刚点击...

color 文本颜色 letter-space 字符间距 line-height 行高 text-align对齐 text-decoration装饰线 font:将字体所有的设置在统一属性中 font-family:"里面是所有字体的系列 可一次定义多个字体 多个字体，隔开 如果字体带有空格 使用双引号隔开"font-size:字号 font-style:italic 斜体 font-weight：bold 粗体...

link:css text-align文本居中对齐