CSS的复习

最新推荐文章于 2024-07-21 17:58:14 发布

刘刘哒

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量108

点赞数

分类专栏：基础学习+常复习文章标签： html css3 css

本文链接：https://blog.csdn.net/weixin_55371434/article/details/114921863

版权

基础学习+常复习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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
评论
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输出效果如下
复制链接

扫一扫