emmet简写方法
div.nav$*5
输出效果如下
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
<div class="nav4"></div>
<div class="nav5"></div>
div{我不喜欢男人}*5
输出效果如下
<div>我不喜欢男人</div>
<div>我不喜欢男人</div>
<div>我不喜欢男人</div>
<div>我不喜欢男人</div>
<div>我不喜欢男人</div>
div{$}*5
输出效果如下
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
后代选择器
选择所有同名元素2的类
元素1 元素2 {样式声明}
子选择器
并集选择器
逗号隔开元素
<style>
/* 并集选择器和后台选择器 复合使用 */
/* 书写规范逗号+换行 */
div,
span,
.pig li {
color: pink;
}
</style>
<body>
<div>熊大</div>
<span>熊二</span>
<p>光头强</p>
<ul class="pig">
<li>佩奇</li>
<li>妈妈</li>
<li>爸爸</li>
</ul>
</body>``
伪类选择器
LVHA原则
/*必须是link visited hover active这这种顺序执行/
/* 未访问的链接颜色 */
a:link {
color: black;
/* 去除下划线 */
text-decoration: none;
}
/* 访问过的链接颜色 */
a:visited {
color: orange;
}
/*鼠标经过的颜色*/
a:hover {
color: skyblue;
}
/*按下不松开时候的颜色*/
a:active {
color: green;
}
//那个输入框获得了焦点 背景色就变成红色
inptu:foucs {
background-color:red
}
块元素
a元素特殊里面可以放块级元素
行内块元素可以调节宽高 也不挤人
文字居中 只需要吧line height高度和所在容器一样高就行
背景
背景的平铺
repeat平铺 no repeat 不平铺 repeat-x repeat-y
背景图片的位置
简写方式
背景颜色的半透明
background:rgba(0,0,0,0.3)red green blue alpha(透明度)
总结
css的三大特性
层叠性:
采用和元素的就近原则
继承性:
行高的继承
在父级定义12px/1.5 也就是说说继承的自己 行高:文字大小*1.5
优先级:
需要注意的是 继承的权重为0 就算!important也不行 粉色渲染
复合选择器权重叠加问题 同时渲染一种元素 复合选择器的权重高一倍
权重不会有进位问题:比如复合选择器有10个 那么他不会进位成为0,0,1,0 而是0,0,0,1,0
盒模型
四大组成
borde边框
合并相邻的边框 由于相邻的列设置了1px边框 两个单元格会叠加2px 我们需要输入如下属性合并
padding 内边距
盒子里面嵌套子元素 没有设定widht height的话 是不会超过父亲元素的
margin 外边距 (居中)
简写方式和padding一样
利用margin让块级盒子水平居中:
- 盒子必须指定了宽度(width)
- 把左右的margin设置成为auto
行内块元素/行内元素居中 利用text-align:center 即可(在父级上使用)
外边距合并 塌陷问题
由于隔得太近 出现塌陷问题 可以给父盒子添加边框
圆角边框
border-radius的50%是高度或者宽度的一半就是圆
https://www.bilibili.com/video/BV14J4114768?p=166&spm_id_from=pageDriver
阴影
盒子阴影
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
水平 垂直 模糊度 距离 颜色 内外(inset outset)
文字阴影
text-shadow 水平 垂直 模糊距离 颜色
布局
普通流 浮动 定位
网页布局的第一准则
浮动重点
清除浮动
为什么要清除浮动?
浮动特性引起的高度塌陷
溢出隐藏 清除浮动 把浮动起来的包进父盒子里面 */
overflow: hidden;
伪元素法
然后在父元素的class中加上clearfix
父级双伪元素
总结
流程
1.确定版心
版心宽度 以及是否居中
自定义一个类 以后方便使用
导航栏的制作
定位
为什么需要定位
四种定位
相对定位
给他加一个边偏移 left100px top100px
一般来说脱离标准流之后 后面的元素会把你的位置占用 然后相对定位不回
绝对定位
俗话说 相对定位靠自己 绝对定位靠父亲
因为绝对定位会拖标 需要依靠让父级相对定位
固定定位
必须要有宽度高度
粘性定位
定位总结
效果解释如下
float: left;
只是压住了span标准流的盒子并不会压住文字 原因 浮动最初的目的是环绕文字效果出生的
position: absolute;
绝对定位完全拖标 并且压住了 固定定位也是如此 (相对定位不会因为没有脱离标准流)
显示隐藏
案例
鼠标经过遮罩层显示隐藏
精灵图-图片定位background-position
X轴向右移动一段距离
字体图标
https://icomoon.io/app/#/select/font
复制这个
把fonts放到文件根目录
粘贴 声明 引入用
利用css绘制三角形
一个宽高为0 的盒子 给他加10px边框
这样我们就可以做出三角了
强化练习
强化练习3
强化练习4
鼠标样式
去除输入框和文本域的表单轮廓和拖拽效果
vertical-align 图片表单行内块元素垂直对齐
让文字和图片中线对齐
图片底下默认缝隙问题
文本溢出显示省略号
多行文本
一些小技巧
由于多个盒子紧密排列 给他们加上边框 重合的地方会出加粗边框线
加上ml-1px 这样就会往右边走1px 盖住左侧的边框线 不会重合
衍生问题 如果给他们设置伪元素hover 鼠标划过边框线变色 就出现如下问题
可以利用相对定位可以压住标准流和浮动的盒子这个特性