A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小江哥 于 2017-12-13 17:27 编辑

一、border
border:它是“边框”的意思
边框有三个要素:粗细、线型、颜色
语法格式:
        border:粗细 线型 颜色;
说明:
        边框的颜色可以省略不写 但是如果不写的话就表示边框的颜色为黑色 其它的两个属性值不能不写 如果不写的话就会不显示边框。
边框的线型:
其实边框也是有四个方法的:
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框

二、display
display  它是“显示”的意思,它就是用来进行行内元素与块级元素之间的相互转换!将隐藏的元素显示或者是将显示的元素进行隐藏。
display  这个属性取值:inline(行内)block(块级)none()

当我们将一个行内元素的display属性的值设置为block以后 那么这个元素就会被转换为块级元素

将我们将一个块级元素的display属性的值设置为inline以后 这个元素就会从块级元素转换为行内元素。
注意:
n 如果说将行内元素转换为了块级元素,那么这个元素它就会拥有块级元素的特点
n 如果说将块级元素转换为了行内元素,那么这个元素它就会拥有行内元素的特点。


将一个显示的元素隐藏、将一个隐藏的元素显示。


display:none(将一个显示的元素进行隐藏)
display:block(将一个隐藏的元素显示出来
注意:以上两个功能主要是JavaScript来使用


三、
display属性的综合案例




四、position
position 在英文中表示“位置”的意思  它主要是用于实现对元素的定位
CSS中定位分为三种:
        position:fixed                        固定定位
        position:relatvie                相对定位
        position:absolute                绝对定位        
注意:
        在使用定位属性时,一定要配合定位的坐标来使用!
        left表示定位的元素离左边多远
        right表示定位的元素离右边多远
        top表示定位的元素离上边多远
        bottom表示定位的元素离下边多远
4.1固定定位
语法:
        position:fixed
固定定位,它是相对于浏览器窗口来进行定位。不管页面如何滚动,固定定位元素显示的位置不会改变!
特点:
l 固定定位元素它脱离了标准文档流
l 固定定位元素的的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素
l 固定定位元素它不再占用空间
l 固定定位元素它显示的位置不会随着浏览器滚动而滚动

案例1:使用固定定位来实现返回顶部的按钮
案例2:使用固定定位来实现顶部的导航栏
4.2相对定位
语法:
        position:relative;
相对定位它是相对于原来的自己”来进行定位!
特点:
l 相对定位元素它没有脱离标准文档流
l 相对定位元素如果没有设置定位的坐标,那么相对定位元素它还在原来的位置
l 相对定位元素设置了定位的坐标以后,那么它会在老家留下一个坑
l 相对定位元素它会将标准文档流中的元素压盖住。
l 相对定位元素的定位坐标值可以是负数

注意:
        相对定位元素它会在老家留下一个坑,所以一般情况下它很少单独使用,相对定位元素它主要是用来配合绝对定位”元素来使用的。
4.3绝对定位
语法:
        position:absolute;
什么是绝对定位?
        绝对定位元素是相对于祖先定位元素”来进行定位!
什么是祖先定位元素?
        绝对定位元素它会先去查找其父元素是否设置了定位的属性 如果有设置定位的属性 那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性 那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位 但是如果没有设置 那么会继续往向一级进行查找,如果其祖先元素都没有设置定位属性,那么它会相对于浏览器窗口”来进行定位!
问题:
        如果当前元素的父元素与其爷爷元素都设置了相对定位,那么请回答当前的绝对定位元素它会相对于“谁”来进行定位?
答:当前的绝对定位元素它会相对于其父元素来进行定位,也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再去查找上一级元素。

特点:
l 绝对定位元素它脱离了标准文档流
l 绝对定位元素它不再占用空间
l 绝对定位元素它会压盖住标准文档流中的元素
l 绝对定位元素它会相对于其“祖先定位元素”来进行定位,这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位 但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位
4.4使用绝对定位来实现拉手网上的效果


五、z-index
Ø z-index表示谁压盖着谁,数值大的会压盖住数值小的
Ø 只有定位的元素才有z-index值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
Ø z-index的值是没有单位的 值是一个正整数 默认的z-index的值是0
Ø 如果多个定位元素没有设置z-index属性 或者z-index值设置一样 那么写在HTML后面的定位元素就会压盖住前面的定位元素

都没有设置z-index属性
都有设置z-index属性
六、CSS36.1CSS3CSS2之间的区别
css3=css2+新语法+新的属性
就是对css2进行扩充 删减 优化
6.2结构伪类
选择器
功能
E:first-child
匹配第一个孩子
E:last-child
匹配最后一个孩子
E:nth-child(n)
匹配第n个孩子
E:nth-child(2n)
E:nth-child(even)
匹配偶数的孩子  如:246[size=10.5000pt]…..
E:nth-child(2n+1)
E:nth-child(odd)
匹配奇数的孩子  如:135[size=10.5000pt]…..
E:only-child
匹配有且只有一个孩子
l E:first-child  匹配第一个孩子
l E:last-child        匹配最后一个孩子
l E:nth-chid(n)        匹配第n个孩子
l E:nth-child(2n)E:nth-child(even)        匹配偶数的孩子
l E:nth-child(2n+1)或者E:nth-child(odd)        匹配奇数的孩子
l E:only-child        匹配有且仅有一个孩子
案例:使用CSS3中的结构伪类选择器来实现隔行变色的表格

6.3border-collapse
这个属性主要是用于来合并表格的边框线 其值为:collapse
border-collapse:collapse;

6.4伪元素
选择器
功能
:first-letter
操作当前元素中第一个字
:first-line
操作当前元素中第一行文字
::before
在之前插入,在一个盒子内部的最前面
::after
在之后插入,在一个盒子内部的最后面

.5文本阴影
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色

描述
l 文字阴影可以有多组值多组之间用逗号隔开就可以
l 水平阴影正值阴影在右边 负值在左边
l 垂直阴影正值在下边,负值在上边
l 模糊强度,值越大越模糊

6.6盒子阴影
box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸  阴影颜色 /外阴影
水平阴影和垂直阴影必须的写,其余的是可以省略不写;
l 盒子阴影可以有多组值多组之间用逗号隔开就可以
l 水平阴影正值阴影在右边 负值在左边
l 垂直阴影正值在下边,负值在上边
l 模糊尺寸,值越大越模糊


给图片设置阴影

6.7圆角矩形
border-radius:左上 右上 右下 左下;

如果说border-radius的四个值都是一样的话就可以只需要写一个参数就可以了
上半部分圆形:

6.8圆角矩形案例






6.9CSS透明度
只要是颜色,都可以用透明度
rgba(红色,绿色,蓝色,透明度)
a:表示透明度的意思  透明度取值:0~1之间  0表示完全透明  1表示不透明
l 背景颜色透明
Background-color:rgba(255,255,255,0.3)


l 文本颜色透明
Color:rgba(255,255,255,0.3)
l 边框颜色透明
Border:1px solid rgba(255,255,255,0.5)










20 个回复

正序浏览
fanbuer 来自手机 中级黑马 2017-12-6 20:41:52
21#
学到了^_^
回复 使用道具 举报
许言 来自手机 中级黑马 2017-12-6 18:03:22
20#
顶顶顶顶顶
回复 使用道具 举报
张艺凡老师 来自手机 中级黑马 2017-12-6 16:24:57
19#
厉害啦666
回复 使用道具 举报
许言 来自手机 中级黑马 2017-12-6 16:06:13
18#
顶顶顶顶顶
回复 使用道具 举报
nhm 来自手机 中级黑马 2017-12-6 16:04:18
17#
666666666666
回复 使用道具 举报
秋子菇凉 来自手机 中级黑马 2017-12-6 16:03:23
16#
棒棒哒
回复 使用道具 举报
棒棒哒
回复 使用道具 举报
gy_yt 来自手机 中级黑马 2017-12-6 15:59:57
14#
66666,干货
回复 使用道具 举报
咸鱼666 来自手机 中级黑马 2017-12-6 15:58:55
13#
很详细,灰常不错
回复 使用道具 举报
阿布乙 来自手机 中级黑马 2017-12-6 15:58:13
12#
很基础,很详细
回复 使用道具 举报
黑马6666 来自手机 初级黑马 2017-12-6 15:58:09
11#
hdhdhdhdhddjjdd
回复 使用道具 举报
小年青 来自手机 中级黑马 2017-12-6 15:57:49
10#
好详细好详细呀辛苦啦辛苦啦
回复 使用道具 举报
奔跑地小少女 来自手机 中级黑马 2017-12-6 15:51:41
9#
一起学习呀
回复 使用道具 举报
PHP老曹 来自手机 高级黑马 2017-12-6 15:41:57
8#
不错,我喜欢
回复 使用道具 举报
从此学好 来自手机 中级黑马 2017-12-6 15:37:45
7#
每天学习一点点,生活更美好
回复 使用道具 举报
继续加油
回复 使用道具 举报
孙晓威 来自手机 黑马粉丝团 2017-12-6 15:34:00
报纸
期待后续更新
回复 使用道具 举报
6666666666666666666666666
回复 使用道具 举报
yuxiaoyi 来自手机 中级黑马 2017-12-6 15:32:51
藤椅
好详细啊
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马