css-day6-个人学习笔记

css-day6-个人学习笔记

一、渐变——多种颜色之间平缓过度的显示效果（background-image）

1、渐变分类

a、线性渐变(linear-gradient)——按照直线的方式填充渐变颜色和方向
b、径向渐变(radial-gradient)——以圆的方式填充渐变效果(圆心位置，半径)
c、重复渐变——重复线性渐变（repeating-linear-gradient）；重复径向渐变（repeating-radial-gradient）。

2、渐变的语法

a、linear-gradient(angle,color-point1,color-point2)；

angle——关键字（to top，to right，to bottom，to left），角度（0deg，90deg，180deg，270deg）；

color-point——red 0px（该色标颜色为 red ，位置为填充方向的 0px 处），blue 50%（该色标颜色为 blue，位置为填充方向的 50% 处），linear-gradient(to top,red,blue,green)；自动分配位置

b、radial-gradient([size at position,]color-point,color-point)

size：圆的半径，position：圆心的位置（以px为单位的具体数值）/（x% y%）/（left,top）。

c、repeating-linear-gradient()

d、repeating-radial-gradient()

3、浏览器兼容性问题——主流浏览器都支持渐变，对于不支持的浏览器，需要添加浏览器前缀的方式实现兼容性

浏览器前缀：（1、Firefox ：-moz-；2、Chrome 和 Safari ：-webkit-；3、Opear ：-o-；4、Microsoft IE ：-ms-）

如果浏览器不支持属性的话，则将前缀添加到属性名称前（animation:值；-moz-aniamtion:值；-webkit-aniamtion:值；-o-aniamtion:值；-ms-animation:值；）

如果浏览器支持属性，但不支持属性值的话，则将前缀添加到属性值前（background-image:linear-gradient()；background-image:-moz-linear-gradient()；）

二、文本格式化

1、字体属性

a、指定字体——font-family："微软雅黑"，Arial；（字体中包含中文或特殊字符的话，尽量使用“”引起来 ）

b、字体大小——font-size：px 或 pt 为单位的数值

c、字体加粗——font-weight：normal（正常体）/ bold（加粗显示）/ 400 ~ 900；400 ：normal，900 ：bold

d、字体样式——font-style：normal（正常体）/ italic (斜体)
e、小型大写字符——font-variant：normal（正常，默认值） / small-caps（小型大写字符）
f、字体属性——font：style variant weight size family；注意：该简写属性中，必须包含 family 的值

2、文本属性

a、文本颜色——color：red

b、文本排列——text-align：left / center / right / justify(两端对齐)
c、文本修饰——text-decoration：none（无线条修饰）/ underline（显示下划线）/ line-through（显示删除线 ）/ overline（显示上划线）
d、行高——line-height：以px为单位 或 当前字体大小的倍数
f、文本阴影——text-shadow：h-shadow v-shadow blur color；

三、表格

1、表格常用属性
a、边距属性——padding，margin(不能为td设置margin)
b、尺寸属性——width，height

c、垂直方向对齐——vertical-align：top / middle / bottom
2、表格特有属性
a、边框合并属性——border-collapse：separate（默认值）/ collapse（合并）
b、边框边距——border-spacing：px（注意：必须保证border-collapse是separate时才有效）
c、标题位置——caption-side：top（默认值）/ bottom（底部）
d、显示规则——table-layout：auto /  fixed（尺寸取决于设定的值，加速显示表格）

四、浮动
1、定位
改变元素在网页中的默认位置
2、定位的分类
a、普通流定位/文档流定位
b、浮动定位
c、相对定位
d、绝对定位
e、固定定位

3、定位 - 浮动定位
a、浮动定位特点：会排除在文档流之外即"脱离文档流"，不再占据页面空间，后续元素则上前补位；浮动元素只在当前行内浮动；浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上；浮动元素依然位于父元素之内；解决问题-多个块级元素在一行内的显示问题。
b、语法——float：none（默认值）/ left（元素左浮动）/ right（元素右浮动）。
c、浮动引发的特殊效果——当父元素容纳不下所有已浮动子元素，最后一个将换行显示(有可能被卡住)；元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下)；元素一旦浮动起来后，都将变成块级元素。