常用浏览器
浏览器的内核也就是渲染引擎
IE Trident Edge浏览器是一家
火狐（Firefox） Gecko
谷歌（Chrome）/Opera Blink
Safari webkit
label标签用于绑定一个表单元素，当点击
<label for='sex'>男</label><input type='radio' name='sex' id='sex'/>
核心：
css文本属性
font-style 文字样式
font-style:normal; //默认值，浏览器会显示标准的字体样式font-style:italic;// 斜体复合写法：font: font-style font-weight font-size/line-height font-family;不能颠倒顺序，不需要设置的属性可以省略，但必须保留font-size和font-family属性
text-align (对齐文本)
text-align属性用于设置元素内文本内容的水平对齐方式text-align:left/right/center
text-decoration（装饰文本）
none: 默认没有装饰线underline: 下划线，链接a自带下划线（常用）overline:上划线，基本不用line-through: 删除线（不常用）
text-indent (文本缩进)
文本首行缩进
text-indent: 20px; //长度也可以是负值
2em; em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有
设置大小，则会按照父元素的1个文本大小
line-height (行高)
line-height属性用于设置行间距（行高），可以控制文字行与行之间的距离
Emmet语法
快速生成HTML结构语法
快速格式化代码
“editor.formatOnType”: true,
“editor.formatOnSave”: true,
css复合选择器
后代选择器
子元素选择器
并集选择器
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素
书写特点用冒号（:）表示，比如: :hover、:first-child
链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 访问所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
:focus
谁获得光标谁的颜色才能生效
input:focus {
css的显示模式
块元素
常见的块元素：
~
、
、
- 、
- 其中div标签是最典型的块元素
特点：独占一行，不管是否已经设置宽度；如果没设置宽度，则会默认是父级元素的宽度
在元素类的标签（行内元素
常见的行内元素：、、、、、
、等
特点：- 一行可以显示多个
- 宽高直接设置无效
- 默认高度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
行内块元素
常见的行内块元素：、、
一行可以放置多个，可以设置宽高css背景(background-color/image/repeat/position/attachment)背景简写，背景半透明
background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大背景蹄片，优点是非常便于控制位置（精灵图）也是一种应用场景
background-image:url(图片地址)/none;
对背景图像进行平铺，可以使用background-repeat属性
默认情况下背景都是平铺的
background-repeat:repeat/no-repeat/repeat-x/repeat-y背景方位background-position:x y; x，y可以使用方位名词或者精确单位
方位名词：top/center/bottom/left/center/right 方位名词前后顺序无关
精确单位：百分数/px水平靠右侧对齐，y省略是垂直居中显示的
background-position:right;
y轴顶部对齐，x轴水平居中显示
background-position:top;background-position：20px;表示x轴20px,y是center
背景附着 background-attachment:scroll/fixed；
属性设置背景图像是否固定或者随着页面的其余部分滚动
复合写法：（使用复合属性的时候，没有特定的顺序，一般习惯的顺序为）
background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置;background: rgba(0,0,0,0.3)
css三大特性
层叠性
继承性
颜色和字体大小会继承，以及text-、font-、line- ，高度，以及padding等不能继承
行高继承的特殊性： font: 12px/24px ‘Microsoft YaHei’ 24px就表示行高，可以继承
font: 12px/1.5 ‘Microsoft YaHei’ 这个1.5表示子元素的行高是当前子元素的1.5倍优先级
盒子模型
padding会影响盒子的实际大小
padding不会撑开的情况：
（1）、如果盒子本身没有设置width/height属性，则此时padding不会撑开盒子大小，一旦设置width/height就一定会撑开居中对齐的方式
块级元素：margin： 0 auto；这个属性对于行内元素以及行内块元素都是无效的
行内元素和行内块元素的局中方式：给其父元素添加text-align:center;既可嵌套块元素塌陷
使用margin定义块元素的垂直外边距，可能会出现外边距的合并
解决方案：给父元素设置边框，或者给父元素设置padding/overflow:hidden;圆角边框
盒子阴影（box-shadow）
影子是不占据位置的，默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效文字阴影（text-shadow）了解
浮动（float）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动的盒子不会压住文字浮动特性
- 浮动元素会脱离标准流（脱标），浮动的元素不占有原有的位置
- 浮动的元素会一行内显示并且元素顶部对齐，如果父级元素装不下这些浮动的盒子，多出的盒子会另起一行对齐。
- 浮动的元素会具有行内块元素的特性：任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
-
为什么要清除浮动
很多父盒子是不应该给高度的，但是子元素浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动的本质：就是清除浮动造成的影响
选择器{clear:both;}
清除浮动的方法： 额外标签法，是w3c推荐的做法 在最后一个浮动元素后面加个标签 清除浮动
.clear{clear:both;}- 父元素添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
css书写顺序
定位
static、relative、absolute、fixed、sticky
static（静态定位）
relative（相对定位）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它 （不脱标）
因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。。。。。
absolute (绝对定位)
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近的一级的有定位的祖先元素为参考点移动位置
-
fixed（固定定位）
固定定位是元素固定于浏览器可视区的位置，主要是用场景：可以在浏览器页面滚动时元素的位置不会改变
以浏览器的可视窗口为参照点移动元素（和父元素没有关系）
-
sticky 粘性定位 兼容性不太好
粘性定位可以被认为是相对定位和固定定位的混合
以浏览器的可视窗口为参照点移动元素 （固定定位）
-
定位总结
定位的叠放层次 z-index
定位的拓展
加了绝对定位的元素不能通过margin: 0 auto;水平居中 position: absolute;left: 50%;margin: -50px; //盒子宽度的一半
- 行内元素添加绝对或者固定定位或者浮动，可以直接设置宽度和高度
- 脱标的盒子不会触发外边距塌陷 （浮动元素，绝对，固定定位的元素）
元素的显示与隐藏
display
dispaly隐藏元素，不再占有原来的位置display:none;//隐藏元素dispaly:block://除了转换为块级元素之外，同时还有显示元素的意思
visibility
visibility: hidden; //隐藏之后会保留位置overflow
overflow:hidden; //溢出隐藏
overflow：scroll;//不管是否溢出都显示滚动条
overflow：auto; //溢出才显示滚动条，不溢出不显示滚动条字体图标
http://icomoon.io
http://www.iconfont.cn/
鼠标样式 cursor
default 小白 默认 pointer 小手 move 移动 text 文本 not-allowes 禁止 vertical-align
css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
用于设置一个元素的垂直对齐方式。只针对于行内元素或者行内块元素有效baseline 默认 元素放置在父元素的基线上 top 把元素的顶端与行中最高元素的顶端对其 middle 把此元素放在父元素的中部 bottom 把元素的顶部与行中最低的元素的顶端对齐 溢出文字隐藏
常见的布局技巧
- 相邻盒子margin往左侧移动-1px可以压住相邻盒子边框
- 鼠标经过某个盒子的时候，提高盒子的层次，可以使用相对定位 position:relative
- 行内块元素中间有间隙，给其父元素添加text-align:center;
直角三角形的写法
HTML5
HTML5新增语义化标签
:头部标签
E[att=”val”] 选择具有att属性且属性值等于val的E元素 E[att^=”val”] 匹配具有att属性且值以val开头的E元素 E[att$=”val”] 匹配具有att属性且值以val结尾的E元素 E[att*=”val”] 匹配具有att属性且值中含有val开头的E元素
<a name="HxomU"></a>### 结构伪类选择器E:first-child 匹配父元素中的第一个子元素E<br />E:last-child 匹配父元素中最后一个E元素<br />E:nth-child(n) 匹配父元素中第n个E元素<br />E:first-of-type 指定类型E的第一个<br />E:last-of-type 指定类型E的最后一个<br />E:nth-of-type(n) 指定类型E的第n个li:nth-child(even){} 选择所有的偶数 even/2n<br />li:nth-child(odd){} 选择所有的奇数 odd/2n+1<a name="bzYyV"></a># 在线案例<a name="bYQZG"></a>## 头部制作（主要看命名）导航栏的注意点：实际开发过程中，我们不会直接用链接a而是用li包含链接(li+a)的做法。<a name="ejSMr"></a>### css选择器```javascript复合类名命名：btn-success复合id命名：btn_success
样式重置
去掉边框：outline:none;border:none;body{margin: 0;}ul{padding: 0;margin: 0;list-style: none;}a {text-decoration: none;}
幻灯片案例展示
var slider=new Slider({slider:'slider-item',thumbItem: 'thumb-item'});(function(){var Slider=function(opt){this.sliderItem=document.getElementsByClassName(opt.sliderItem);this.thumbItem=document.getElementsByClassName(opt.thumbItem);this.bindCLick();}Slider.prototype={bindClick:function(){var slider=this.sliderItem;var thumbs=this.thumbItem;for(var i=0;i<thumbs.length;i++){(function(j){thumbs[j].onclick=function(){for(var k=0;k<thumbs.length;k++){thumbs[k].className='thumb-item';slider[k].className='slider-item';}this.className+=' cur';slider[j].className+=' active';}})(i)}}}window.Slider=Slider;})();
css属性设置
- 、
若有收获，就点个赞吧
0 人点赞
