42:Css 盒子模型阴影
写于style中:box-shadow:h-shadow v-shadow blur speed color inset 按照顺序填写
h-shadow 和v-shadow必须要要,允许负值,进行移动
blur 可选--表示模糊距离(阴影清晰度)
spread 可选-阴影尺寸(阴影大小)
color 颜色
inset 将外部阴影改为内部阴影
例子:box-shadow:10px 10px 10px 10px red
43:css文字阴影
text-shadow: h-shadow v-shadow blur color
44:css网页布局三种方式
1:文档流 正常显示状态
2浮动 :对盒子左右浮动完成布局
3:定位(后面详细说)
45: Css浮动
float: left(right)
特点:1:脱离文档流,设置浮动之后,浮动元素会脱离原来的文档流,浮在文档流的上角,不占位置
2:浮动的元素会在一行显示,放不下会换行
3:有行内块元素的特点
4:浮动元素如果没有宽度,元素大小会根据内容决定
46:Css为什么要清除浮动(带来的影响)
因为子元素的父元素是设置高度的,一旦父元素的高度为0(如果是设置为0的那没有用,是在父元素不设置高度的情况下),那么父元素下面的元素就会顶上来,所以清除浮动,就是清除浮动带来的影响
三种 办法
1:额外标签法
在父元素的尾部添加一个标签
选择器{ clear:both }
clear : left(左侧不允许) right(右侧不允许) both (都不)inherit(继承父元素)
例子,在body中 写 <div style=" clear:both"></div>
2:给父元素添加 overflow:hidden (在style中添加)
3:在reset.css文件中增加clearfix代码(详细在第四天文件夹中)
首先在head中引入reset.css文件,然后 给父元素添加 div clss=" wrap clearfix";
如何取消移入div,下行div会往右边移动:给div增加border边框,颜色为无
47:Css文本省略号
单行: a{
white-space:normal (文本自动换行)
white-space;nowrap (文本不换行) (两个写一个即可)
overflow:hidden (溢出隐藏)
text-overflow;ellipsis (文本用省略号替换溢出隐藏)
多行: a{
display: -webkit-box
-webkit-box-orient:vertical
-webkit-box-clamp:2(数字可更改,在第几行显示省略号的作用)
overflow:hidden
width:50px
}
48:Css定位 对接44
1:为什么需要定位
完成一些文档流和浮动流无法完成的布局。比如固定在页面的回到顶部(例如淘宝的回到顶部)
定位:将盒子固定摆放在某处
定位:定位模式(采用哪种模式定位)+偏移(该元素最终的位置)
定位模式: static(静态定位--默认的)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
偏移(盒子最终的位置)
top top :60px 顶部偏移量,定位相对于父元素上边线的距离
left left :60px 左部偏移量,定位于左边线
right rigt ;60px 右部偏移量,定位于右边线
bottom bottom:60ox 底部偏移量
49:Css定位具体
1:static 静态定位 (文档流定位)
例子: 选择{ position:static} 无偏移
2:relative 相对定位
布局:相对于自己本身的定位,偏移也是相对于自己本身的偏移
语法:选择器{position:relative}
偏移:
1:以元素原来的位置偏移
2:原来文档流的位置仍然占有,后面盒子仍用标准流的方式对待他
最大作用:实际开发中,给绝对定位的元素当父元素
3:绝对定位
绝对元素在偏移时是相对于它的祖先元素来定位的
语法 选择器 { position:absolute}
特点:
1:如果满意祖先元素或者祖先元素没有定位,他就以浏览器为准定位
2:当父元素有定位的话(相对,绝对,固定),绝对定位的偏移是以最近一级有定位的祖先元素为参考的
3:绝对定位不再占有原来的位置
4:固定定位:可以定位于浏览器可视区的任意定位
语法: {position:fixed;}
特点:以浏览器的可视窗口为参考点移动
不再随滚动条滚动
不再占有原来的位置
例子: a{
position:fixed;
left:50%; 固定定位盒子left:50% 到可视区中间
margin-left:500px; 让盒子margin-left:到中间内容区的一半
}
50: Css定位的叠放顺序
使用2-index控制盒子的优先级 (对于用级别使用时有效)
特点:1数值可以是正整数,负整数,数值越大盒子越在上面,默认是auto
2:如果属性相同,没设置就是auto。按书写顺序,后来居上
3:只有定位的盒子才能设置Z-index属性
51:Css定位的绝对居中
加了绝对定位的盒子,不能通过margin: 0 auto 水平居中,但可以通过以下方式实水平居中和垂直居中
语法{
left:50%
margin-left:自身宽度的一半(负值如:-xxPX)
或者
top:50%
margin-top:-xxPX
}
52:Css特性
1:行内元素添加了绝对或者固定定位,可以直接设置宽高
2:块元素添加绝对或者固定定位,如果不设置宽高,默认大小是内容大小
3:下面浮动的文字不会压住上面的元素,而是到右边去了,定位的话会覆盖上面的元素,因为浮动的最初目的是做文字环绕效果。
53:Css的隐藏和显示
语法:display: none (style中写,不再占有原来的位置)
none:此元素不显示
inline:此元素显示为内联元素,没有换行符
inline-block:行内块元素
list-item:列表显示
run-in:根据上下文作为块元素或内联元素显示
block:块元素,有换行符
visibility: (能见度)
visible:默认值,可见
hidden:不可见,隐藏后占有原来的位置
collapse:当在表格中使用时,此值可以直接删除一行或者一列,不影响表格布局;如果用在其他元素上则显示为hidden;
54:Css轮播图项目
父相子绝原理
详细见第四天中内容
55:overflow:
值
hidden:溢出内容隐藏修建不可见
scroll:内容修建,但有滚动条(可以分,xy轴)==overflow-x: 或者overflow-y:
auto:自动
56:设置三角形
先把盒子的宽度高度设置为0,然后给盒子设置一个没有颜色的边框,然后再设置某一个方面的颜色即可
style中 写
div{
width;0
height:0
border:10 px solider transparent
border-left-ride :red
}
57:Css vertical-align应用 ---写于图片中(让文字图片并排效果)
实现图片或行内块元素和文字垂直对齐
语法: vertical-align:bottom
值
sub:垂直对齐文本下标
super:对齐上标
top:元素顶端与行中顶最高父元素对齐
text-top:顶端与父元素字体顶端对齐
middle:对齐于父元素的中部
bottom:对齐于父元素的底部
原文:https://www.cnblogs.com/zcc1049949708/p/12485831.html