复习 :
1. CSS引入方式
1. 行内样式
<div style="500px;">
2. 文档内嵌
<style>
选择器{
}
</style>
3. 外链文件
1. 创建外部的.css文件,通过定义选择器设置元素样式
2. <link rel="stylesheet" href="" type="text/css">
2. 选择器
1. 标签选择器
根据标签名匹配元素
div{
}
2. id选择器
根据id属性值匹配元素,id属性具有唯一性
#id属性值{}
3. 类选择器
根据class属性值匹配元素
.class属性值{}
4. 群组选择器
选择器1,选择器2{}
5. 后代和子代
选择器1 选择器2{}
空格表示匹配后代元素
选择器1>选择器2{}
>匹配直接子元素
6. 伪类选择器
1. 超链接伪类选择器
:link
:visited
:hover
:active
2. :focus 输入框获取焦点时的状态
7. 选择器的优先级看权重
标签选择器 1
类选择器/伪类 10
id选择器 100
行内样式 1000
组合选择器的权重 : 由组成的选择器权重值相加
div span{} 2
#main .box span{} 100 + 10 + 1
3. 常用CSS属性
1. width height 设置元素宽高
2. color 文本颜色
3. background-color 背景颜色
4. font-size 字体大小
5. font-weight 字体粗细程度
6. text-decoration 设置文本装饰线
4. 尺寸与颜色
1. 尺寸单位
1. px 默认单位
2. % 百分比
2. 颜色表示
1. 英文单词
2. rgb(0,0,0)
3. rgba(255,255,255,1)
4. #fff;
#ffffff; 白色
---------------------------------
Day04
1. HTML元素分类及特点
1. 块级元素 :
1. 独占一行,不与其他元素共行显示
2. 可以手动设置宽高
3. 默认宽度与父元素保持一致(table除外)
常见块元素 :
body h1~h6 p div table form ul ol li
2. 行内元素
1. 可以与其他元素共行显示
2. 默认尺寸由内容多少决定,不能手动设置宽高
常见行内元素 :
span label i b strong u s sub sup a
3. 行内块元素
1. 可以与其他元素共行显示
2. 可以手动设置宽高
常见行内块元素 :
img 表单控件
2. HTML标签嵌套
1. 块元素中可以嵌套任何类型的元素
特殊情况 :
段落标签中只能放行内元素和行内块元素
2. 行内元素只能嵌套行内(块)元素
3. 内容溢出
块元素可以手动设置宽高,如果内容超出尺寸范围,如何处理?
属性 : overflow
取值 :
1. visible 默认值,表示溢出内容可见
2. hidden 溢出内容隐藏
3. scroll 为元素添加水平和垂直方向的滚动条,不管内容
有没有溢出
4. auto 自动在溢出方向添加可用的滚动条
4. 边框
CSS中认为所有的元素都是矩形区域
边框是围绕元素内容出现的线条样式
1. 简写属性
简写属性 : border
取值 : width style color;
width : 像素值,表示边框宽度
style : 边框样式,可取 :
solid 实线边框
dashed 虚线边框
dotted 点线边框
double 双线边框
color : 颜色值,默认为黑色
特殊用法 :
1. 边框默认具备3px的宽度,黑色的边框颜色,边框样式
必须指定
et :
border:solid;
2. 表单按钮,可以取消边框
border:none;
2. 单边框设置
单独设置元素上右下左四个方向的边框
属性 :
1. border-top : 上边框
2. border-right : 右边框
3. border-bottom : 下边框
4. border-left : 左边框
取值 : width style color;
3. 网页三角标制作
1. 元素的width height 设置为0
2. 涉及三角标,必须由边框拼接组成
3. 设置四个方向的边框,宽度保持一致
4. 通过颜色控制三角标显示
透明色可使用transparent表示
4. 圆角边框
属性 : border-radius
取值 : px / % 百分比单位依据元素尺寸计算
取值情况 :
1. 取一个值
border-radius : 5px;
border-radius : 50%;
一个值表示上右下左四个角圆角程度相同,最大值
取到50%,元素形状会发生变化
2. 取两个值
border-radius : 30px 50px;
第一个值表示 上下 的圆角程度,
第二个值表示 左右 的圆角程度.
3. 取三个值
border-radius : 10px 20px 30px;
三个值分别对应上右下三个角,
缺少的第四个值与第二个值保持一致
4. 取四个值
分别代表上右下左四个角的半径值
单独为一个角或两个角设置半径时,可以大于50%,
但是四个角不能同时大于50%
5. 盒阴影
为元素添加阴影效果
属性 : box-shadow
取值 :
offset-x 阴影的水平偏移距离
offset-y 阴影的垂直偏移距离,取像素值
blur 阴影的模糊程度,取像素值,越大越模糊
spread 阴影的延伸距离,取像素值(可省略)
color 阴影颜色,默认为黑色
浏览器的坐标系 :
不管是浏览器窗口,还是元素本身,都包含坐标系,
默认以左上角为原点(0,0),向右,向下分别为X和Y
轴的正方向.
正值代表正方向,负值代表负方向
5. 盒模型/框模型
1. 介绍
CSS中,认为所有元素皆为框
1. 元素在文档中的最终占据尺寸是由 : 内容尺寸,
内边距大小,边框,外边距大小决定的
2. 计算元素最终占据的大小
在标准盒模型下:
最终宽度 = width + 左右内边距 + 左右边框 + 左右外边距
最终高度 = height+上下内边距+上下边框+上下外边距
其他盒模型元素尺寸的计算(表单元素)
元素设置的width,height表示包含内容,内边距和边框
在内的总宽度或总高度
最终宽度 = width + 左右外边距
最终高度 = height + 上下外边距
2. 外边距
1. 什么是外边距 :
元素与元素之间的距离
2. 简写属性
margin 表示外边距
取值 : 像素值
取值情况 :
1. margin: 10px; 上右下左四个方向添加10px外边距
2. margin : 10px 20px;
上下外边距为10px,左右外边距为20px;
3. margin : 10px 20px 30px;
左右保持一致,为20px
4. margin: 10px 20px 30px 40px;
分别设置四个方向的外边距
特殊用法 :
1. margin :0; 清除元素默认外边距
2. 左右外边距可以使用auto,实现元素水平居中
3. 外边距可以取负值,参照浏览器坐标系,可以
实现元素位置的微调
3. 单独设置四个方向的外边距
属性 :
margin-top
margin-right
margin-bottom
margin-left
取值 : 只给一个值
4. 外边距合并
1. 垂直方向上的外边距(块元素) :
1. margin-top
问题 : 给子元素添加的margin-top,作用于父元素上
解决 :
1. 为父元素添加上边框
2. 为父元素设置padding-top 顶部内边距
padding-top : 0.1px;
3. 为父元素添加overflow:hidden;
2. margin-bottom
两个块元素分别设置margin-bottom,margin-top,
最终元素之间的距离取较大的值
2. 水平方向上的外边距(行内元素):
默认行内元素水平方向上的外边距会叠加显示
5. 默认具有外边距的元素 :
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
}
3. 内边距
1. 什么是内边距
内边距指元素内容与边框之间的距离
2. 简写属性
属性 : padding
取值 : 像素值
取值情况 :
padding:10px;
设置上右下左四个方向上内容与边框之间为10px
padding:10px 20px;
设置上下内边距为10px,左右内边距为20px;
padding:10px 20px 30px;
设置左右内边距为20px
padding:10px 20px 30px 40px;
分别设置上右下左四个方向的内边距
3. 单独设置某个方向的内边距
属性 :
padding-top
padding-right
padding-bottom
padding-left
取值 : 给一个值
4. 不同元素类型对盒模型属性的支持情况
1. 块元素完全支持盒模型属性
2. 行内元素不完全支持盒模型属性
(margin-top/margin-bottom)
5. 默认带有内边距的元素
ul ol 表单元素(文本框,按钮)
4. box-sizing
作用 : 指定盒模型的计算方式
取值 :
1. content-box 默认值
元素的width,height属性只设置内容尺寸,最终
在文档中占据的尺寸为margin border padding
width/height 累加得到
2. border-box
元素的width,height属性设置包含边框在内的区域
大小,一旦元素设置内边距和边框,会压缩内容显示
区域
元素最终在文档中占据的尺寸由margin和width/height
相加得到
注意 :
表单按钮默认采用border-box计算尺寸