css基础

CSS基础

CSS元素显示模式

块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

独占一行、可以控制宽度高度内外边距、宽度默认是父级宽度的百分之百、里面可以放行内或块级元素

和不能放其他块级元素

行内元素

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

一行可以显示多个、无法直接设置宽、高，默认宽度是它内容的宽度，只能容纳文本和其他行内元素

特殊情况连接可以放块级元素，但是转换一个块级模式更加安全

行内块元素

<img> <input/> <td>

一行可以显示多个、默认宽度是内容的宽度、高宽和内外边距可以控制

背景

属性

属性	意义	值
background-color	背景颜色	预定义颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	分别是x和y坐标，可以为固定值也可是center，top
background-attachment	背景是否滚动	fixed（背景固定）/scroll（背景滚动）
background-size	背景大小	固定/相对(x y)/cover（填满容器)/contain（至少一端满)

• 简写：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
• 装饰性小图片和超大背景图片经常使用背景图片来做，方便控制位置

背景颜色半透明

background :rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值在(0,1)之间，0.3前的0可以省略

背景半透明是指盒子背景半透明，盒子里面内容不受影响

CSS三大特性

层叠性

解决样式冲突的问题，遵循就近原则，哪个样式离结构近，执行哪一个

继承性

• 子标签会继承父标签的某些特性
• text- font- line- color属性会继承
• 行高的继承

父元素 font:24px/1.5 “微软雅黑” 表示行高为当前元素1.5倍

子元素 font:16px

行高也是当前元素1.5倍,即16*1.5=24px

子元素2 未指定文字大小

继承父元素的文字大小和行高，即24px/1.5

优先级

1. 选择器相同，则执行层叠
2. 选择器不同，根据选择器权重进行

继承或者* 0,0,0,0

元素选择器 0,0,0,1

类选择器，伪类选择器 0,0,1,0

ID选择器 0,1,0,0

行内样式 1,0,0,0

!important 无穷大

1. 等级判断从左到右，如果哪一位数值相同，则依次判断下一位
2. 继承的权重是0，不管父元素权重多高，子元素得到的权重都是0
3. 对body指定颜色不会改变文中链接的颜色，因为浏览器有默认颜色即蓝色
4. 复合选择器会有权重叠加的问题,但是不会进位 ul li权重为0,0,0,2 .nav li权重为0,0,1,1

---

盒子模型

HTML页面的布局本质是一个个盒子

border: 边框

content：内容，可以是文字图片或者其他的盒子

padding：内边距，内容和边框的距离

margin：外边距，不同盒子间的距离

边框(border)

border: border-width ||border-style ||border-color

定义边框粗细、样式、颜色

border-style: solid 实线边框 dashed：虚线边框 dotted：点线边框

border: 1px solid red;

没有顺序要求

border-top border-bottom上边框 下边框

表格细线边框

border-collapse: collapse

相邻边框合并一起

边框会影响盒子的大小

width不包括border-width

实际宽度=width+border-width

内边距(padding)

padding-left/padding-right/padding-top/padding-bottom

调整边框与内容距离

padding:5px 表示上下左右各5像素内边距

padding:5px 10px上下5px，左右10px

padding：5px，10px，15px 上/左右/下

四个值 上/右/下/左

paddding会影响实际盒子大小

如果盒子没有指定高度/宽度，padding不会撑开盒子

外边距（margin)

margin-left/margin-right/margin-top/margin-bottom

外边距可以让块级盒子水平居中，必须满足

• 盒子指定了宽度
• 盒子左右的外边距都设置为auto

margin: auto;

margin: 0 auto;（最常用)

行内元素和行内块元素水平居中直接给父元素添加text-align:center

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素的有下外边距，子元素有上外边距，会塌陷为较大的边距

解决方法:

• 可以为父元素定义上边框 border: 1px solid transparent
• 可以为父元素定义上内边距
• 可以为父元素添加overflow:hidden

清除内外边距

*{margin:0;padding:0}

布局前，应该先清除网页元素的内外边距

行内元素尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块级就可以了

---

list-style: none;

去掉无序列表前的小圆点

圆角边框

border-radius: length;

如10px或%50

1. length为正方形的长度一半时，显示为圆形
2. length为矩形的高度一半时，显示为圆角矩形
3. 最多可以四个值，分别为左上右上右下坐下

盒子阴影

box-shadow: h-shadow v-shadow blue spread color inset

1. 前两个必须写，其他可选
2. 水平阴影、垂直阴影（可以正负，相对主体的偏移距离)、模糊距离（虚实)、阴影尺寸、阴影颜色、外部阴影
3. 阴影颜色通常不用黑色，可以用rgba(0,0,0,.3)的操作，透明度为30的黑色
4. 默认是外阴影，只能写inset，不能写外阴影
5. 阴影不占用盒子空间

文字阴影

text-shadow: h-shadow v-shadow -blur color

---

浮动

传统网页布局的三种方式

实际开发中，一个页面基本包含了三种布局方式

多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动

• 标准流（普通流/文档流)

标签按照规定好默认方式排列

• 浮动

可以改变默认的排列方式

• 定位

浮动特性

• 浮动后脱离标准流的控制移动到指定位置（脱标），浮动的盒子不再保留原先的位置
• 如果多个盒子设置了浮动，他们会按照属性值一行内显示并且顶端对齐排列
• 浮动元素会具有行内块特性，可以设定高度宽度，没写宽度时为内容宽度
• 浮动的盒子没有外边距合并的问题

浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置，符合网页布局第一准则

先设置盒子大小，再设置盒子位置

标准流独占一行，不会被后面的浮动盒子影响，但如果前面盒子浮动，会上移

清除浮动

清除浮动后，父级就会根据子盒子自动检测高度。父级有了高度后就不会影响下面的标准流。

选择器{clear:属性值;}

left/right/both

本质是清除浮动元素脱离标准流造成的影响

为什么要清除浮动

• 父级没高度
• 子盒子浮动了
• 影响下面布局了

清除浮动方法

• 额外标签法，也称隔墙法

在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式

实质是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

• 父级添加overflow属性

overflow: hidden(清除)

外边距合并也是用这句代码

代码简洁但是无法显示溢出的部分

• 父级添加after伪元素

.clearfix:after {
content:"";
display: block;
height: 0;
clear:both;
visibility: hidden
}
.clearfix {
*zoom: 1;
}

第二种是I6I7专有

一般约定就叫clearfix

百度淘宝网易等都用这种方式

• 父级添加双伪元素

.clearfix:before,.clearfix:after {
content: "";
display:table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

最后一个照顾IE6IE7

代表网站：小米，腾讯

---

切图

常见图片格式

1. jpg:对色彩信息保留好，高清，颜色多，产品类图片经常用jpg
2. gif图像格式：只能存储256色，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
3. png结合了gif和JPEG优点，能够保持透明背景
4. PSD是PS专用格式，可以从上面直接复制文字，图片，还可以测量大小和距离

PS切图

1. 点击图片，找到图层，右键快速导出PNG，有时需要合并图层后导出
2. 切片切图，利用切片选中图片，导出选中的图片（文件-导出-存储位web所用格式-存储-切片（选中的切片）-保存
3. 使用cutterman插件

---

案例

CSS属性书写顺序

1. 布局定位属性（建议display第一个写）
2. 自身属性
3. 文本属性
4. 其他属性

导航栏制作

用li包含链接(li+a)的做法 ul>li>a

1. li+a语义清晰
2. 直接用a，搜索引擎容易辨别为堆砌关键字嫌疑，从而影响网站排名

---

定位

1. 可以染多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2. 定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且压住其他盒子

定位组成

定位=定位模式+边偏移

定位模式

position属性

值有四个：static(静态定位)/relative（相对）/absolute（绝对）/fixed(固定)

静态定位是按照标准流特性摆放位置，没有边偏移，很少使用

边偏移

top、bottom、left、right四个属性

表示距离顶部/底部/左侧/右侧x距离

如果既有left又有right则优先左侧，上下优先上

相对定位 relative

position:relative

1. 以自身原来的位置为基础偏移
2. 原来在标准流的位置继续占有，后面的盒子保留原来位置，不脱标

绝对定位 absolute

position:absolute

绝对定位是元素在移动位置时，相对它祖先元素来说的

1. 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位（Document文档）
2. 如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位的祖先元素为参考点移动位置
3. 绝对定位不再占有原来的位置

子绝父相

子级绝对定位的话，父级要用相对定位

1. 父盒子必须占有位置，则只能相对定位，而子盒子不需要占有位置，则是绝对定位
2. 某种情况下父绝子绝也会用到，当父亲不需要占有位置时

固定定位

position:fixed

元素固定于浏览器可视区的某个位置，用于浏览器页面滚动时元素的位置不会改变

1. 以浏览器的可视窗口为参考元素

   跟父元素无关，不随滚动条滚动

2. 固定定位不再占有原先的位置

如何让盒子固定在版心右侧位置？

1. 让固定定位的盒子left:50%,走到浏览器可视区的一半位置
2. 让固定定位的盒子margin-left:-版心宽度的一半距离，多走版心宽度的一半位置

粘性定位

position:sticky; top:10px

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 占有原先的位置（相对定位特点）
3. 必须添加top、left、right、bottom其中一个，否则视为相对定位

--兼容性较差，IE不支持--

定位叠放顺序

z-index:1;

• 数值可以是正整数，负整数，或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，按照书写顺序，后来居上
• 数字后面不能加定位
• 只有定位的盒子才有z-index属性

绝对定位居中

加了绝对定位的盒子不能用margin：0 auto 居中

方法：

1. left: %50
2. margin-left: -自身宽度的一半

垂直方向居中同理

拓展

1. 行内元素添加绝对或者相对定位，可以直接给高度宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小的内容的大小
3. 脱标的盒子不会触发外边距塌陷
4. 绝对定位（固定定位会完全压住盒子）

浮动元素不同，只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字，绝对定位会压住所有内容

浮动产生的最初目的是为了做文字环绕效果的

---

元素的显示与隐藏

某些元素，关闭后会消失，刷新时会出现

1. display

display:none ;隐藏对象，隐藏后不再占有原来的位置

dispaly:block ;除了转换为块级元素外，还有显示对象的意思

应用十分广泛，配合JS可以做很多网页特效

2. visibility

visibility：visible 元素可视

visibility：hidden 元素隐藏，隐藏后仍然占有原来的位置

3. overflow

• overflow：hidden 溢出部分隐藏
• overflow：visible 不剪切内容也不添加滚动条
• overflow：auto 不剪切内容在需要的时候添加滚动条
• overflow：scroll 溢出的部分显示滚动条（不溢出也显示滚动条）

一般情况下，不让溢出的内容显示出来，因为溢出的部分会影响布局

但是如果有定位的盒子，慎用overflow：hidden 会影响多余的部分