ID选择器：#id { } ID是独一无二的，不可重复 类选择器： .class { } 标签选择器 h p input... 子选择器：.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素 后代选择器：.food li 通用选择器：*{ } 匹配html中所有标签元素 分组选择符：h1,span,li { } 伪类选择符：例： a:hover{color:red;}->鼠标滑过状态设置字体颜色变红; :link /*没有访问过的链接*/ :visited /*已经访问过的链接*/ input:focus{ } 选取获得焦点（光标）的表单 标签的权值为1，类选择符的权值为10，ID选择符的权值为100；行内样式style权值1000； 继承或者 * 权值0 改变样式权重：!important >> p{ color:red!important; } 权重叠加： 复合选择器会权重叠加；权重会叠加，不会有进位 (相同权重值时)： 层叠就是在html文件中对于同一个元素可以有多个css样式存在， 当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定， 处于最后面的css样式会被应用。 继承性：子标签会继承父标签的某些样式，text- font- line- color 标题标签不会继承父元素文字大小； a标签不会继承父元素的文字颜色； 优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中） 文字： font-family:" "; /*设置字体*/ font-size:6px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bold;/*设置字体加粗*/400 700 font-style:italic/*斜体*/ 文字属性连写，文字大小字体必写；其余不写取默认 复合写法：font: style weight size/height family 文本： text-decoration:underline;/*设置文字下划线*/ ；none/*没有装饰线*/ text-indent:2em;/*缩进*/ line-height:2em;20px/*行间距(行高)*/ letter-spacing:10px;/*文字间隔*/ word-spacing:10px;/*字母间隔*/ text-align:centen;/*块状元素中文本，图片居中*/ .oldPrice{text-decoration:line-through;}删除线 例：<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> 原价：300元 现价：230 元 背景： background-color （transparent透明）元素设置背景色 | background-image 图像放入背景 背景图片撑不开盒子的宽高 | background-repeat no-repeat 不平铺；repeat 平铺； 背景图像平铺 repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺 | background-position: 方位名词(left;right;center;top) x y 只写一个参数，第二参数默认垂直 改变图像在背景中的位置； 精确坐标 x y 只写一个参数，参数为x坐标，第二参数默认垂直；可混合使用 | background-attachment: scroll(滚动) ；fixed(固定，背景定位背景图片偏移位置参考非盒子大小，以浏览器大小为基准) 背景图像是否固定或者随着页面的其余部分滚动。 复合写法：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 半透明背景 background: rgba(0,0,0, .3);最后参数是alpha(透明度)，取值0~1之间，可以 .3代替0.3 轮廓： 绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 outline 在一个声明中设置所有的轮廓属性。 outline-color 设置轮廓的颜色。 outline-style 设置轮廓的样式。 outline-width 设置轮廓的宽度。 元素分类： 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： display:inline;块转内联 <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： display:block内联转块状 <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： display:inline-block设置为内联块状 <img>、<input> 块级元素： display:block内联转块状 1、从新的一行开始，并且其后的元素也另起一行 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度 4.是一个容器及盒子，里面可以放行内或者块级元素 内联元素：display:inline 块转内联 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变 4.只能容纳文本或其他行内元素 内联块状元素： display:inline-block设置为内联块状 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 盒模型： Margin(外边距) - 清除边框外的区域，外边距是透明的(可让块级盒子水平居中)。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像 border: 边框 每个边框有 3 个方面：宽度、样式，以及颜色 例：p{ border:2px dotted #ccc;} border-width:2px; 边框宽度 border-style:solid; dashed（虚线）| dotted（点线）| solid（实线） border-color:red; 颜色--边框颜色值 transparent。这个值用于创建有宽度的不可见边框 复合写法：border: width style color border-collapse:collapse 合并相邻边框（仅用在表格上） 一个块元素，不设置宽度，这个块元素设置左右padding值，不会撑开盒子。 padding: 填充 例：div{ padding:20px 10px 15px 30px; } 上top-右right-下botton-左left； 5px 10px 上下5，左右10； 5px 10px 20px 上5 左右10 下20 margin: 边界 padding在边框里，margin在边框外。 设置外边距的最简单的方法就是使用 margin 属性。 相邻块元素垂直外边距的合并： 尽量只给一个盒子添加margin值 嵌套块级元素垂直外边距塌陷： 1.给父元素设置边框。 2.给父元素设置内边距。 3. overflow:hidden; 圆角边框： border-radius:length(数值或百分比); border-top-left-radius、border-top-right-radius、 border-bottom-right-radius 和 border-bottom-left-radius 盒子阴影： box-shadow: h-shadow v-shadow blur spread color inset; box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1); color rgbs(半透明) 文字阴影： text-shadow: h-shadow v-shadow blur color 布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer） a.流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 2.内联元素都会在所处的包含元素内从左到右水平分布显示。 b.浮动(float) 可以让块状元素并排显示 任何元素都可以浮动，浮动后具有行内块元素相似的特性 块级元素没有设置宽度，默认父级，添加浮动后，大小根据内容 设置浮动，漂浮在普通块元素上面(脱标)，浮动盒子不在保留原先位置 只影响浮动盒子后面的标准流，不影响前面的 标准流父元素排列上下位置，内部子元素采取浮动排列左右位置 清除浮动：（父级盒子没高度；子盒子浮动了；影响下面布局） 选择器{clear:属性值;} left ; right ; both(同时左右两侧) 额外标签法：浮动元素末尾添加一个空标签(要求为块级元素) 例如添加<div style="clear:both"></div>，或者其他标签（如<br />等） 父级添加 overflow属性，hidden（隐藏溢出） ; auto ; scroll .clearfix:after 伪元素清除(父级类名添加clearfix) .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、 7 专有 */ *zoom: 1; } 双伪元素清除浮动(父级类名添加clearfix) .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 父盒子有高度，不需要清除；清除浮动，父级根据子盒子自动检测高度； 父级有高度，不会影响下面的标准流 c.层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作， 但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。 定位 = 定位模式 + 边偏移 定位模式： 浮动脱标 ：绝对定位，固定定位 脱标元素特点：行内元素可直接设置宽高；块级不会默认父元素宽，默认宽高0，内容会撑开宽高 1、绝对定位(position: absolute) 没有父元素或者父元素无定位，以浏览器为基准。 父元素有定位，以最近一级有定位父（祖级）元素为基准 绝对定位，脱标，不占有原来的位置 子绝父相 2、相对定位(position: relative) 参照于自己原来的位置来移动；继续保留原来的位置（不脱标） 例：position: relative; top: 100px;....... 3、固定定位(position: fixed) 以浏览器的可视窗口（）为基准 脱标，不占位置 固定在版心右侧位置： 浏览器宽度一半--left50%，margin-left:(版心盒子宽度一半) 4、静态定位 : static; 默认定位方式 偏移： 上 下 左 右 居中： 行内元素(文本，图片等)，行内块元素水平居中给其父元素添加 -> 居中 text-align:center 块状元素 -> 定宽(设置固定宽度)块状居中 左右margin”值为“auto” ->不定宽块状居中 1.加入 table 标签： 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法 加入table标签，设置左右margin值为auto 2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置 3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 ) 当文字内容的长度大于块的宽时，会有内容脱离块
日常记录，勤加练习。