CSS-03（pink老师课程笔记）

去掉li前面的项目符号：list-style：none

圆角边框

border-radius: 12px;可以是px或百分比

若将正方形改为圆形，则：border-radius: 50%;或者将其设为宽度的一半。

盒子阴影

box-shadow: 8px 10px 10px 10px rgba(0, 0, 0, .3);

水平阴影 垂直阴影 模糊距离 阴影的尺寸 阴影颜色

透明色：rgba(0,0,0,.3)

鼠标经过有阴影效果

.box:hover {

​ box-shadow: 8px 10px;

​ }

文字阴影

text-shadow: 8px 5px;

浮动（float）

传统网页布局

普通流（标准流）

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

如：块级单占一行

浮动

定位

浮动

典型应用：多个块元素在一排显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float: right;右浮动

float: left;左浮动

float：none

浮动特性

脱标

1.脱离标准流移动到指定位置（俗称脱标）

2.浮动的盒子不在保留原先的位置

一行内显示并顶端对齐

若一行显示不开则自动换行

浮动元素是互相贴靠在一起，没有缝隙

具有行内块特性

任何元素可以设置浮动

与display：异曲同工

如果行内元素设置了浮动，则无需转换为行内块元素也可直接设置宽度和高度

约束浮动的位置

先使用标准流的父元素，之后使用浮动的子元素

网页布局第二准则：先设置大小，后设置位置

常见网页布局

通栏盒子无需指定宽度

两个注意点

浮动和标准流的父盒子搭配

一个元素浮动，则其余兄弟元素也应浮动

（浮动的元素不会影响前面的标准流，只会影响后面的标准流）

思考：父盒子都必须有高度吗？

不，理想状态是子盒子撑开父盒子

浮动状态下，父盒子感应不到子盒子——解决方法：清除浮动

清楚浮动

.clearfix:before,

.clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

学成在线案例

CSS属性书写顺序

布局定位display/position/float/clear/visibility/overflow

自身属性

width/height/margin/padding/border/background

文本属性

color/font/text-decoration/text-align/...

其他属性（CSS3）

content/cursor/border-radius/box-shadow/background：liner-gradient...

页面布局思路

先结构后样式

版心和行模块

/* 版心居中 */

.w {

width: 1200px;

margin: auto;

}

清除li的样式

li {

list-style: none;

}

导航栏注意：li+a

实际开发中，使用li包含链接a（不直接使用a）

导航栏处于一行，则对li加浮动

由于导航栏的每个字数不一样，所以链接a只给高度，宽度不给而使用padding撑开

搜索栏

文本框和按钮

banner

/* 背景半透明 */

background: rgba(0, 0, 0, .3);

浮动的盒子不会发生外边距合并

行高会继承