CSS的复习

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 鼠标划过边框线变色 就出现如下问题
在这里插入图片描述
可以利用相对定位可以压住标准流和浮动的盒子这个特性
在这里插入图片描述

css的初始化

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值