黑马跟学CSS--day4笔记

圆角边框

语法

border-radius:length;

length可以是具体的值也可以是

圆角矩形：设置为高度的一半就行

简写属性：分别代表左上角，右上角，右下角，左下角

两个值：对角线关系的

分开写 border-top-left-radius

border-bottom-right-radius

盒子阴影

语法

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

h-shadow: 必需 水平阴影的位置 允许负值

v-shadow：必需 垂直阴影的位置 允许负值

blur:可选。模糊距离

spread:可选。阴影的尺寸

color:可选。阴影的颜色

inset:可选。将外部阴影（outset）改为内部阴影

注意点

1.默认的是外阴影（outse），但是不可以写这个单词，否则导致阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

text-shadow：h-shadow v-shadow blur color

CSS浮动

常见网页布局

传统网页布局的三种方式

普通流

文档流/标准流

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

1.块级元素独占一行，从上到下顺序排列

常用元素：div hr p h1~h6 ul ol dl form table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

常用元素：span a i em

浮动

最典型的应用：让多个块级元素一行内排列显示

语法

选择器{float: 属性值；}

属性值：none（默认值） left right

！浮动特性

浮动元素会脱离标准流（脱标）：浮动的盒子不再保留原来的位置

（会产生叠加的效果）

在一行显示，三个div都要设置浮动属性

浮动的元素会一行内显示并且元素顶部对齐

（如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列）

浮动的元素会具有行内块元素的特性

（如果行内块元素有了浮动则不需要转换为行内块元素）

如果块级（行内元素同理）盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，大小根据内容调整

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

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

注意点

栏的盒子不需要指定宽度(和浏览器一样宽)

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

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

3.浮动的盒子只会影响后面的标准流不会影响前面的标准流

清除浮动

本质

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

语法：

clear :both;

left/right/both

方法：

额外标签法

在浮动元素末尾添加一个空标签，例如<div style="clear : both"></div>

!新添加的元素一定是块级元素

overflow属性

给父级添加overflow属性，将其属性值设置为hidden,auto或scroll

after伪元素

额外标签法的升级版

优点：结构更简单没有添加标签

双伪元素清除浮动

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

！！准则

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

网页布局第二准则：先测量盒子大小，再看位置

定位

PS切图

常见的图片格式

jpg：高清颜色好（产品类）

gif:可以保存透明背景和动画效果

png:结合了以上两种优点，储存形式丰富，保持透明背景，如果要切成背景透明的图片

PSD