1.边框尺寸
1.轮廓线
outline
默认情况下文本框密码框都带有轮廓线
取消轮廓线 outline:none;
2.box-sizing
改变元素尺寸的计算方式
1.默认取值:content-box
元素实际尺寸由margin + border + padding + width/height 计算得到
2.取值 border-box
元素的实际尺寸 width = margin + border + padding + 内容;
一旦为元素设置边距和边框,会压缩内容区域
2.背景属性
1.背景颜色
属性 background-color
取值 颜色值
2.背景图片
属性 background-image
取值 url(路径)
3.背景图片相关属性
1.背景图片重复平铺显示
属性 background-repeat
取值:
1.repeat 默认值,图片尺寸不够时,沿水平和垂直方向重复平铺
2.repeat-x 沿水平方向平铺
3.repeat-y 沿垂直方向平铺
4.no-repeat 不平铺
2.背景图片尺寸
属性 background-size
取值:
1.500px 500px 分别设置背景图片宽高
2.100% 100% 采用当前元素的尺寸占比作为背景图片的尺寸
3.cover 表示对图片等比缩放至完全覆盖元素,多出部分裁剪
4.contain 表示对图片等比缩放至刚好容纳图片,不足的部分不管
5.auto 自动
3.背景图片位置
属性 background-position
取值:
1.数值px :x y
设置水平和垂直方向的偏移距离
2. x% y%
0% 0% 表示图片在左上角显示
100% 100% 图片在右下角显示
50% 50% 背景图片居中
3. 方位值表示:
top center bottom
left center right
left bottom 左下角
设置背景图片水平和垂直方向的显示位置,某一个方向缺省的话,默认为center
4.背景图片是否固定
属性 background-attachment
设置背景图片是否跟随网页滚动
取值:
1.scroll 默认值 跟随滚动
2.fixed 固定背景图片位置
1.给任何元素添加背景图片固定,当前背景图片是相对于视口viewport 和当前容器元素几乎没有关系
2.当容器元素不可见时,背景图片也不可见
4.背景属性简写
属性 background
取值 color url positat size ion repeattachment
e.g.
background:red url('') right no-repeat 100% 100% scroll;
background-size 是css3属性,需要单独设置
3.文本/字体属性
1.指定字体
font-family : "Microsoft YaHei","微软雅黑","黑体",Arial;
注意:当字体名称是中文,或者是由多个英文单词组成的,都需要添加引号
2.字体粗细
font-weight:
取值:
1.lighter(100)/nomal(400)/bold(700)
2.采用数字,无单位,取值100-900,值越大,字体越粗
3.字体大小
font-size
取值 16px
4.字体样式(斜体)
font-style
取值:
1.normal
2.italic 斜体
3.oblique 字体倾斜 显示效果与斜体一致
5.行高
line-height
常用于设置文本垂直居中
6.字体属性简写
使用简写,有必填的属性值 family
font:style weight size family;
font:family size/line-height;
e.g.
font:Arial 16px/20px;
注意:font-weight font-style 必须设置在font-size之前
同时设置字体大小和行高,必须写成一个属性值存在,size/line-height
7.文本颜色
color
8.文本装饰线
text-decoration
取值:
1.underline 下划线
2.none 取消装饰线
3.overline 上划线
4.line-through 删除线
9.首行缩进
text-indent
取值 像素值 或者以em为单位 1em = 元素字体大小
4.表格属性
1.表格添加边框
border:1px solid black;
2.表格边框合并
属性 border-collapse
取值:
1.separate (默认)
2.collapse (边框合并)
3.边框边距
设置单元格之间的距离
属性:border-spacing
取值:
1.指定一个数值
水平与垂直方向上间距相等
2.指定两个数值
分别设置水平方向与垂直方向上单元格之间的距离
注意:属性必须在边框分离的情况下使用
border-collapse:
border-spacing: 10 20
5.列表属性
1.列表特征:
1.无序列表和有序列表 存在上下边距
2.存在左边内边距
3.具备项目符号
4.列表项垂直排列
2.列表属性
属性
1.list-style-type 设置项目符号
2.list-style-position:
设置项目符号的位置 默认outside 项目符号与内容框分离
设置inside 项目符号调整到内容框中
3.list-style-image:url()
自定义项目符号
属性简写:
list-style : type image position;
常用的取消列表项目样式:
list-style:none;
list-style-type: square;
list-style-position: inside;
list-style-image: url('../web001/img/northStar.jpg');
6.过渡效果
1.过渡效果指的是css属性值在一段时间内平缓变换的效果
2.语法
1.指定过渡属性
指定哪个属性值在变化的时候使用过渡效果
transition-property:
取值:
1. all 但凡能够使用过渡效果的属性值在变化时一律使用过渡来体现
2. 单独设置属性,指定某一个属性在变化时使用的过渡效果
允许使用过渡效果的属性:
1.颜色相关的属性
2.取值为数字的属性
2.指定过渡时长
transtion-duration
指定在多长时间内完成过渡效果
取值:以s或者ms为单位的数值
1s = 1000ms
500ms = 0.5s = .5s
3.指定过渡的速度时间曲线函数
transition-timing-function
取值:
1.ease默认值 慢速开始,快速变快,缓慢结束
2.linear匀速变化
3.ease-in 慢速开始,加速结束
4.ease-out 快速开始,慢速结束
5.ease-in-out 慢速开始和结束,中间先加速后减速的过程
4.指定过渡效果的延迟时间
等激发过渡效果之后,等待多久开始执行
tarnsition-delay
取值 以s或者ms为单位的数值
5.属性简写
transition:property duration
timing-fun delay;
6.练习
创建200*200的元素,背景为红色
鼠标悬停时:
1.尺寸变为400*400
2.背景颜色变成橘色
3.变成圆形
属性值的变换需要5s内完成
7.布局方式(重点掌握)
1.布局方式影响整体结构划分和元素的显示样式
2.布局方式分类
1.文档流布局/普通流/静态流/
默认的布局方式
元素按照书写顺序及元素类型,从上到下,从左到右排列
2.浮动布局(重难点)
3.定位布局
1.绝对定位
2.相对定位
3.固定定位
3.浮动布局
最常用的布局方式
1.将元素设置浮动之后,元素会具备以下特点:
1.元素会脱离文档流,不再占据文档空间
2.剩余未浮动元素会上前占位
3.元素浮动时,会停靠在父元素的左边或右边,或者是其他的浮动元素边缘上
4.元素浮动只能在当前行浮动
5.浮动可以解决共行问题,也可以解决行内块元素水平间隙的问题
2.语法
属性 float
取值:
1.left 元素向左浮动,碰到其他元素的边框时停止
2.right 元素向右浮动,碰到其他元素的边框停止
3.none 默认值,元素未浮动
3.浮动引发的效果
1.如果父元素中无法容纳浮动元素,浮动元素会自动换行显示
2.元素一旦设置浮动,便可以设置宽高,主要针对行内元素
3.元素一旦浮动,默认尺寸由内容决定
4.文字环绕效果
如果前一个元素设置浮动,后面元素会上前占位,并且文本后面元素的文本会围绕浮动元素显示